Search code examples
cssinternet-explorerinternet-explorer-7internet-explorer-6

IE7 & IE6 CSS bug

I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.

Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!

IE bug

Solution

  • I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.

    My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.

    However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.

    I would therefore suggest taking the float:left away from this container element, and see if that helps.

    (The tab elements inside it should still be floated, of course)