ansaurus

Question

DIV's behaving differently in IE vs Firefox

Answer 1

A:

use float: left instead of float: none in the first div (the one on the left).

<html>
<body>
    <div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
    </div>
    <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
</body>
</html>

NebuSoft 2010-03-02 18:45:25

Answer 2

+2 A:

Reverse the order of your divs and it will work. That is put the first one second and the second one first in the markup.

<html>
<body>
     <div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
    </div>
     <div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
    </div>

</body>
</html>

Robusto 2010-03-02 18:47:40

This suggestion along with the DOCTYPE suggestion (from above) fixed the issue. Thanks everyone! I really appreciate it!

John 2010-03-04 16:09:16

Answer 3

+1 A:

You can't set height and width on inline elements. If you want the boxes to be laid out as they are in Firefox, remove the display: inline and float the left-hand box.

Tom 2010-03-02 18:48:13

Removing `display:inline` isn't really necessary, as `float:left` should cause them to be displayed as block elements anyway (overruling `display:inline`).

Tim Goodman 2010-03-02 19:20:18

In fact there are occasionally times where I put `display:inline` on a floating element just because this fixes some IE7 CSS bug . . . even though in a W3C compliant browser having `display:inline` on a float should do nothing at all.

Tim Goodman 2010-03-02 19:23:43

Answer 4

+2 A:

Add a doctype at the very start of your document. It's being rendered in quirks mode. E.g.

<!doctype html>
<html>
... etc.

Oh, and what exactly do you mean by "behave as inline"? Do you simply mean you want them to appear side-by-side, or do you actually want the width and height to be ignored (as Tom pointed out)? Because you won't be able to do the latter for floated elements. The display: inline is useless on floats (except to fix IE6 bugs), because "inline" floats automatically turn into block.

mercator 2010-03-02 18:49:41

Good point, but irrelevant here. Having the right-floated div first works even in the skeleton html provided.

Robusto 2010-03-02 19:07:57

@Robusto Not irrelevant, because quirks mode causes IE8 to display both divs as blocks, which only the right one should be (according to the specs). Adding the doctype both fixes that and allows both divs to appear on the same line (answering the original question). Just adding a doctype still leaves at least IE7 broken, though. Swapping the divs fixes that.

mercator 2010-03-02 19:18:52

Yes, I had removed my DOCTYPE b/c it didn't have an effect on my original example. However, by the time I had isolated the issue with a much simpler HTML from the original page, the DOCTYPE did make a difference. Adding my XHTML STRICT DOCTYPE back in along with the comment to move the float:none element to the end (my example has two DIV's but the original has three), fixed the issue.

John 2010-03-04 16:08:08

ansaurus

tags:

views:

answers:

DIV's behaving differently in IE vs Firefox

related questions