CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 6394

DIV's position is wrong in IE

I know that IE is impossible sometime. I have 6 divs aligned to the right, using float. Here is the code: http://jsfiddle.net/jcay3/1/. The problem is, in IE it is below the bar, which it should be positioned into.

Is there any solution? I heard a lot of devs talking about comments especially for IE. Would they solve the issue? I tried it in the compatibility mode (IE9). What if in IE 6 it is rendered correctly and in IE 7 wrong? Should I add the special code only for IE 7? Or there isn't such a risk?

Is there any other solution? A simpler one? Thank you

Upvotes: 0

Views: 310

Answers (4)

Zuul
Zuul

Reputation: 16269

For a proper display on old Internet Explorer Versions as well for a better cross-browser support, you need to float the opposite element:

See this working Fiddle Example!

ADD THIS CSS

.menuBar .menuBarContainer img {
    float: left;
}

Also, you need to consider that an element which contains nothing but floated elements will collapse in height, because the child floated elements are no longer in the normal document flow.

This means that your .menuBarContainer will have no height, thus causing possible visual problems for elements after it. The best way to fix this is to use CSS clear before closing this element:

CSS

.clear {
    clear:both;
}

This means that the bottom border of your .menuBarContainer will be after the space occupied by your floated elements, allowing your .menuBarContainer to retain its height, insuring the normal document flow.

As a side note, you have an extra closing </div> on your fiddle example.

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

You shouldn't trust compatibility mode IMHO. Only MS virtual machines with one different IE in each one are OK if you've an OS with IE9.
I've seen (err my colleagues have seen) non-existing bugs with IE8-as-IE7, with IE Tester, etc

Yes they're huge but it'll save you from hours of debugging non-existing bugs. There are enough real bugs in (old) IE already! ;)

As for your problem, it exists in both IE6 and IE7 and I can solve it with img { float: left; } but I'm far from certain that it's the best solution.

Upvotes: 1

Mikey G
Mikey G

Reputation: 3491

Your problem is the img tag.
If you get rid of it, the divs will be where they belong.
Put the img in a div if you can.

Upvotes: 1

jlengstorf
jlengstorf

Reputation: 447

IE conditional tags can help, but I don't think your issue is due to an IE bug.

Try this variation: http://jsfiddle.net/jcay3/5/

The difference is an overflow: hidden on the container .menuBar, which causes an element to self-clear floated elements.

I also fixed the height to accommodate borders and set the .menuBarContainer element to 100% width to keep it from overflowing the JSFiddle.

I don't have IE running on this machine, but I'm pretty sure this will work backward to at least IE7. Let me know if I'm wrong and I'll look at it again.

Upvotes: 0

Related Questions