http://broadspancommerce.com/menu-pixel.html
#menu * {margin:0;padding:0;} #menu { width: 180px; float:left; line-height:0; } #menu ul { list-style: none; padding-left:4px; background:#ccc; line-height:0; } #menu li {
background: red;
} #menu li a { font-size: 10px; font-weight: bold; padding:8px 0 8px 16px; height:12px; display: block; line-height:12px; background:#999; }
You forgot to mention: body {... font-size:12pt; ...}
Remove the font metrics from a and insert them in li:
#menu li { background: red; font-size: 10px; font-weight: bold; line-height: 12px; }
#menu li a { padding: 8px 0pt 8px 16px; background: rgb(153, 153, 153) none repeat; height: 12px; display: block; }
Note that IE6 inserts a spurious white space even in an empty <li></li>.
This opens a line-box with the inherited font metrics like font-size:12pt from body.
But 12pt!=12px, so the line-box of the <li> got slightly taller than the line-box of <a>.
(check which line-height:0 is really needed)
Ingo
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
