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.
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:
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.
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.
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?
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.