CODEWITHSUNDEEP
htmlcssinternet-explorer
alexwatever
alexwatever

Reputation: 594

CSS Padding Stretching Divs: Internet Explorer Vs. Chrome/Firefox

Hello StackOverflow community, I have run into a problem that quite frankly is baffling me and I am surprised that I haven't run into this problem sooner.

Apologies if I have overlooked something simple - I have done extensive Google and StackOverflow searches to no avail.

My problem is that when applying a padding to a Div the container is stretched by the specified padding amount in Firefox/Chrome but not in IE. I have seen suggestions for adding "display:inline;" or "display:inline-block;" to fix the problem but this has effect for me.

Here is an rendered example: http://img825.imageshack.us/img825/7190/testpic.jpg

And the code for this example:

<html>
<head>

<style type="text/css">
#div1 {
background-color:black;
width:400px;
height:300px;
padding-top:10px;
}

#div2 {
background-color:red;
width:400px;
height:280px;
padding-top:10px;
}

#div3 {
background-color:blue;
width:400px;
height:260px;
padding-top:10px;
}

#div4 {
background-color:green;
width:400px;
height:200px;
}
</style>

</head>
<body>

<div id="div1">
<div id="div2">
    <div id="div3">
    </div>
</div>
</div>
<div id="div4">
</div>

</body>

</html>

What am I missing? Any help would be appreciated.

Thank you.

Upvotes: 1

Views: 1525

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

A <!DOCTYPE ... > is what you're missing. IE is rendering in Quirks mode, where the box model is border-box and not content-box.

Upvotes: 3

Related Questions