Menu
I was creating a secondary navigation menu using embedded unordered lists with anchors and headers. Using a CSS reset sheet all headers and anchors are set to "display: block". When list-style-position: inside is set Firefox and Camino render the headers and anchors below the bullet while Safari, Camino, and IE render it inline.
(source: michaelgrace.org)
(source: michaelgrace.org)
<html> <head> <style type="text/css"> /* css reset */ h1, h2, h3, h4, h5, h6, a { display: block; } /* list styling */ ul { list-style-position: inside; } </style> </head> <body> <ul> <li> <h3>Primary</h3> <ul> <li> <h4>Secondary</h4> <ul> <li> <h5>Tertiary</h5> <ul> <li><a href="#">Tertiary Link</a></li> </ul> </li> </ul> </li> </ul> </li> <ul> </body> </html> To get Firefox and Camino to render the same as the others I set the unordered lists, headers, and links to "display: inline" but I still want to know...
Why does Firefox & Camino render the list item below the list bullet when Safari, Opera, & IE render it "normal"?
935
This is actually broken and has been since 2000. Still not fixed. I thought I had figured it out but it was a mistake on my part. STILL BROKEN! :(
Setting the CSS property of "list-style" to "disc" will cause the Firefox and Camino rendering engine, Gecko, to render the headers inside an unordered list "normal".
After following @o.k.w's advice of digging into the rendering engine I found that my problem had been reported on bugzilla.mozilla.org on April 22, 2000! (*Cough* Um, Mozilla... the bug is still there.) The reported bug at https://bugzilla.mozilla.org/show_bug.cgi?id=36854 discusses the fact that Mozilla's rendering engine, Gecko, has a problem displaying headers in an unordered list while displaying the list item marker inside. It also says about this problem:
"This actually seems to be a major CSS1 compliance issue..." - David Baron
At the bottom of the bug report thread there is a link a w3c.org document that led me to find my fix:
"There is a description in a CSS 2.0 recommendation: http://www.w3.org/TR/CSS2/generate.html#q11 which tell us that Gecko behavior is faulty." - Listy Blaut
At the bottom of that document there is a suggestion to set the CSS list-style to disc:
ul { list-style: disc } Setting the unordered list list-style to "disc" has "fixed" the rendering problem in Gecko rendering engine browsers, Firefox & Camino, while leaving the lists unchanged in other browsers. *Note: Although "disc" is a list-style-type property, if "list-style-type: disc" is used instead of "list-style: disc" it does not fix the problem.
<html> <head> <style type="text/css"> /* css reset */ h1, h2, h3, h4, h5, h6, a { display: block; } /* list styling */ ul { list-style-position: inside; list-style: disc;} </style> </head> <body> <ul> <li> <h3>Primary</h3> <ul> <li> <h4>Secondary</h4> <ul> <li> <h5>Tertiary</h5> <ul> <li><a href="#">Tertiary Link</a></li> </ul> </li> </ul> </li> </ul> </li> <ul> </body> </html> 
(source: michaelgrace.org)
I can finally sleep ; )
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With