CSS Anthology book by Rachel Andrew - horizontal menu page 102-105

[810311]

Hello,

I am using the following code from Rachel Andrew book to style my horizontal menu. I want to make all the boxes of the menu same width so they don't depend on the length of the word itself e.g now box containing word "blog" is shorter than box containing "contact" etc.




#navigation {
font-size: 90%;
}

#navigation li{
display: inline;
}

#navigation ul{
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}


#navigation a:link, #navigation a:visited {
padding: 0.4em 1.3em 0.4em 1.3em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
margin-left: 4px;
margin-right: 4px;

}

#navigation a:hover {
color: #FFFFFF;
background-color: #711515;


Thank you

[chris.upjohn]

On your LI element all you simply need to do is add a width but you will need to change the display property to inline-block as you can't use height and width on inline elements:

#navigation li{
    display: inline-block;
    *display: inline; /* IE6+7 Fix */
    width: 100px;
}

[ralph.m]

Or you could just float the list items too:

#navigation li{
    float: left;
    width: 100px;
}

[chris.upjohn]

Or you could just float the list items too:

#navigation li{
    float: left;
    width: 100px;
}

You will need to be careful when using a floated element as unless you clear the parent all child elements that occur after may collapse into the element above.

[Paul O'B]

On your LI element all you simply need to do is add a width but you will need to change the display property to inline-block as you can't use height and width on inline elements:

#navigation li{
    display: inline-block;
    *display: inline; /* IE6+7 Fix */
    width: 100px;
}

Hi Chris,

Forgive the small correction but the IE6/7 fix cannot be in the same rule as it won't work.

It needs to be exactly like this:

#navigation li{
    display: inline-block;
    width: 100px;
}

#navigation li{*display: inline; /* IE6+7 Fix */}

If you place the display:inline in the same rules as the display:inline-block then the element never gets haslayout because the display:inline-block is ignored and only display:inline is seen.

If you separate the rule as above then what happens is that IE6/7 see the display:inline-block and apply haslayout to the element (this is probably the only real use of display:inline-block). In the next rule you set the element to display:inline and in IE6/7 an inline element that is in haslayout mode behaves just like inline-block (this is probably a throwback to ie5 which allowed dimensions on inline elements by default).

The display:inline-block is a haslayout trigger for both inline and block elements which is why you can't use some of the other haslayout triggers. zoom:1.0 is also a haslayout trigger for both inline and block elements and you can can actually create an inline-block element in IE6/7 without using inline-block. All you do is make the element inline and apply haslayout suitable for an inline element.

p{display: inline;zoom:1.0 /* IE6+7 Fix */}

[Stomme poes]

Forgive the small correction but the IE6/7 fix cannot be in the same rule as it won't work.

Thierry Koblentz does it. He adds zoom to keep the haslayout.

#navigation {
font-size: 90%;
}

#navigation li{
display: inline;
}

#navigation ul{
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}

Bleh, nasty old code. So there's a wrapping-something called #navigation, and then it sets font size, and then it sets li to display inline but doesn't make the anchors some kind of block?

#navigation a:link, #navigation a:visited {
padding: 0.4em 1.3em 0.4em 1.3em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
margin-left: 4px;
margin-right: 4px;

}

#navigation a:hover {
color: #FFFFFF;
background-color: #711515;

and then setting :link and :visited styles... instead of the easier and more powerful "a" styles... and then only :hover? Where's :focus??

Bleh.

[Paul O'B]

Thierry Koblentz does it. He adds zoom to keep the haslayout.

Which is basically what I said in my second example.

You'd have to do this though:

#navigation li{
display:inline-block;
*display: inline;
zoom:1.0;
}

I'm not a fan of the *property hack as its invalid (unlike * html) but it is neater in this case where it targets ie6 and 7.

[Stomme poes]

I'm not a fan of the *property hack as its invalid (unlike * html) but it is neater in this case where it targets ie6 and 7.

Thierry likes it because he feels the * html/*+html rules are too specific (in that they are more specific than the original rule offered to other browsers).

I've never run into needing to override * html rules with anything more than another * html rule myself though. But I don't work on ginormous sites.