HTML+CSS: Horizontal Menu

[Cheetah Designs]

I used to know the reason why I did this but I have now forgotten.

For as long as I can remember when creating a horizontal menu I do something like this:

<ul>
    <li style="display:inline"><a style="float:left">Menu item</a></li>
    ...
</ul>

Why do I put the "float:left" as well as the "display:inline"? I know there is/was a reason for it, but I can't remember what it was?

Also, are people using inline-block these days or not due to compatibility issues in IE6/IE7?

 

[FabienO]

CSS

ul { list-style-type: none; }
li { float: left; }
a { display: block; }

 

[Cheetah Designs]

I swear you NEED to do it the way I did...possibly for compatibility issues with IE6?

I no longer have IE6 to test your way?...is that the accepted method these days?

 

[Hyburnate]

Who the .... uses IE6?

 

[Cheetah Designs]

Who the .... uses IE6?

That's kind of the point, I'm trying to remember why I did this and wanted to know the new convention.

 

[meth]

'display:inline' fixes the double margin bug on floated elements in ie6.

 

[Sherbs]

Just use display: inline;, no need to float.

 

[Cheetah Designs]

Just use display: inline;, no need to float.

No a direct reply to you specifically, but I think I found why I added the float....see link to show exactly what it achieves (you have to edit the code):

http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

EDIT: For reference, I can see the difference on Firefox 6.0 on OSX.

 

[Sherbs]

Yeah but normally you'd have a div underneath a navigation which is a block element.

 

[Cheetah Designs]

Yeah but normally you'd have a div underneath a navigation which is a block element.

I eat my hat, sir.

 

[ristac]

Brings back memories of trying to make sure everything worked in IE and Netscape