CODEWITHSUNDEEP
internet-explorercross-browserinternet-explorer-7
Haradzieniec
Haradzieniec

Reputation: 9340

2 divs look different in IE7.0 vs other browsers (simplified). How to fix?

This part of my html page (95% of code was removed) still looks different in IE7.0 (IE6.0 was not tested) vs other browsers. Could anybody tell me how to fix so IE7.0 displays it the same way as FF, Opera and others?

<html >
<body>
<div style="margin: 0 100px 0 340px;">
    <div style="margin-right: -103px; height:300px; border:1px solid #3c6; float:right;">right is <br>different<br>when use<br>IE7.0. <br>Why?</div>
    <div  style="border:1px solid #c63; height:300px;">middle is OK</div>
</div>
</body>
</html>

That 2 divs should have some space in beetween, but IE7.0 shows them together.

Upvotes: 1

Views: 114

Answers (1)

Nick Knowlson
Nick Knowlson

Reputation: 7426

It's the negative margin that's doing it. That is a bit of an unusual way to structure your content, so you're hitting an edge case that IE handles differently.

If you structure your page in a more standard way (it is hard to recommend how with more details without knowing specifically what you are trying to accomplish) you will run into less edge cases like this.

But if circumstances dictate that this is the way it has to be, then you can add margin-left:44px; to the div with a negative right margin (tweak 44px as needed). That would result in:

<html>
<body>
<div style="margin: 0 100px 0 340px;">
    <div style="margin-right: -103px; margin-left:44px; height:300px; border:1px solid #3c6; float:right;">right is <br>different<br>when use<br>IE7.0. <br>Why?</div>
    <div style="border:1px solid #c63; height:300px;">middle is OK</div>
</div>
</body>
</html>

Upvotes: 1

Related Questions