IE6 - CSS - elements not floating corectly

Question

Hey, I've been trying to code a menu, without making the icons fixed width (with just padding-left/right) and it works fine in every browser, except IE6. I checked other websites and they do it the same way as I do, but it works well for them. (It looks like IE6 is ignoring the float).

Do you know what should I do to make it work?

And there is an image from firefox: http://img192.imageshack.us/i/firefoxverze.jpg/ And the same in for IE6: http://img39.imageshack.us/i/ie6bug.jpg/

Thanks, Mike.

Edit: The same problem seems to be on this website: http://www.mayercrocus.cz/

Edit 2: Please ignore the fact that I haven’t had time to make the .png images transparent yet.

Answer 1

IE tends to add a default margin on elements, other browsers don't. Try adding margin:0; in your css file. maybe this solves your problem.

Answer 2

Hi,

You applied float on the wrong element it's link you want to be float, not menu.

So, you can delete the float: left; from .menu_item and menu_item_2 and and it to .menu_item a and .menu_item_2 a

The first website is too confused.

But, as a rule, always try to give "haslayout" to an element which doesn't work on IE. To do this, just add zoom:1 and position:relative (and others on having layout) Perhaps it's not the (only) problem, but always try this.