position in CSS background

[Karsten Wade]

This is in reference to the CSS at:

http://fedoraproject.org/style.css
(cvs.fp.o:/cvs/fedora/web/static/F-7/style.css)

We're using a background image to get the arrow bullet for lists:

#nav li
{
  background: url(images/arrow.png) 5px 50% no-repeat;
...

Note the 50% -- this setting breaks the layout when doing nested lists
using this (typical) structure:

<ul>
  <li>foo</li>
  <li>bar
   <ul>
    <li>baz</li>
   </ul>
  </li>
</ul>

Here is what happens:

http://people.redhat.com/kwade/fedora/websites/broken-bullet.png

This is because the position on the background image is set to 50%
(half-way down the space it is backgrounding.)

XHTML doesn't even require a closing </li>, and if I remove them
entirely, the same behavior occurs.  If I put the nested list outside of
the <li></li>, the list does not display as nested but rather in serial.

My fix is to use 0% for the position:

 #nav li
 {
-  background: url(images/arrow.png) 5px 50% no-repeat;
+  background: url(images/arrow.png) 5px 0% no-repeat;

This has the effect of making the arrow sit at the top of the bounding
box for the element, which is not as pretty:

http://people.redhat.com/kwade/fedora/websites/bullet-top-bounding.png

Since getting a bullet this way (with a background image) is a bit of a
CSS hack, I think the best answer is to leave my changes to the CSS and
add a few pixels of transparency at the top of the arrow.png.

This is not crucial; I'm going to check in legal pages to a new
canonical location and am using some nested lists; if it looks funky for
a few days, that's OK. :)

- Karsten
-- 
   Karsten Wade, 108 Editor       ^     Fedora Documentation Project 
 Sr. Developer Relations Mgr.     |  fedoraproject.org/wiki/DocsProject
   quaid.108.redhat.com           |          gpg key: AD0E0C41
////////////////////////////////// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 189 bytes
Desc: This is a digitally signed message part
URL: <http://listman.redhat.com/archives/fedora-websites-list/attachments/20070623/ec0d5c97/attachment.sig>