After much tearing out of hair I can't afford to lose, I came up with the
following CSS for a horizontal navigation list:
#main_nav {
position: absolute; top: 70px; left: 0; width: 100%; color:#fff; margin:0;
padding:0;
font-size: 13px; z-index: 5; background: #555 url(../img/nav_menu_bg.jpg)
repeat-x;
}
#main_nav li {
list-style: none; display:inline-block; width: 80px; height: 30px;
background:url(../img/menubar_bg.png) bottom left no-repeat;
padding:0 5px 0 16px; text-align: center; line-height: 25px;
/* Opera handles this but Moz doesn't
IE only works if you declare inline-block then change it to inline. Go
figure! */
}
* html #main_nav li {
display: inline; /* For IE */
}
#main_nav>li {
display: table-cell; /* Moz, Konqueror and Opera handle this although opera
adds 2px height */
}
#main_nav a:link, #main_nav a:visited, #main_nav a:hover {
font-weight:bold; color:#fff; text-decoration:none;
}
My first surprise was that Mozilla still doesn't aupport inline-block, hence
the use of table-cell
The second was that IE6 fails with display:inline alone and fails with
inline-block alone, but works if I declare inline-block then change it to
inline. Just what is that rendering-engine doing?
--
Richard Grevers
New Plymouth, New Zealand
Orphan Gmail invites free to good homes.
______________________________________________________________________
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/
