CODEWITHSUNDEEP
cssinternet-explorerfirefoxhtmlborder
Wodzu
Wodzu

Reputation: 6979

Help with CSS DIV borders needed, different view between IE and FireFox

I am showing an image of differences in presenting borders for div elements between IE and FireFox. IE displays border in a correct way but FireFox not. As you might notice, the black border for BorderDiv seams to not respect the fact that its parent div has height of 78 pixels. Instead of it respects the height of most outer div. To complicate things, the right side of the border is drawn without respecting the most outer div also.

alt text

I am lost here. What do I need to do to achieve in FireFox the same result as in IE? Please note, that I want to have width and height for BorderDiv equal to 100%, I do not want to set it explicitly.

Here is my code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;">
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div>
      </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div>
</div>
</BODY>
</HTML>

Thanks.

Upvotes: 1

Views: 2701

Answers (1)

Jess Telford
Jess Telford

Reputation: 13200

It is actually the other way around: Firefox is correct, and IE is incorrect.

It is because of IE's bad implementation of the box model.

The div "BorderDiv" has a 100% height of its container div ("ContentColumn") which is 78px. Then, on top of that, the border, padding, and margin are added.

Why not just add the border to the "ContentColumn" div and get rid of the "BorderDiv" div altogether:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
        <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;">
            right
        </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">
        left
    </div>
</div>
</BODY>

</HTML>

Edit Modified the "ContentColumn" to have a height of 76px, to take into account the border size.

Also, you may want to look at avoiding quirksmode in IE so it will use the correct box model.

Upvotes: 3

Related Questions