Help with CSS DIV borders needed, different view between IE and FireFox
Question
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.
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.
1 answers
solution1
3 ACCPTED 2010-11-23 10:25:54
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.