On 7 Nov 2005, at 10:23 am, Richard Grevers wrote:
> 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?
having fun with you... :-)
More seriously, Gecko doesn't support inline-block. In this particular
case, you could probably use the vendor only {display:
-moz-inline-box}; display:table-cell is an alternative.
As for IE, it only supports inline-block fully on elements 'whose
natural display value is inline'. But, one of the side effects of using
inline-block on _any_ element is giving that element 'hasLayout' [1].
The thing is, in your IE code, width and height do not apply to
inline-elements (correct per the css 2.1 docs), but by giving the
element 'hasLayout', suddenly it starts to work.
[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
Have fun,
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com/>
______________________________________________________________________
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/
