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
////////////////////////////////// \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\