Problem with padding in IE

**xtaste** · Aug 21, 2011 10:57

Hi all,

For my new layout I want to have a large square with little squares in it. So I made a relative positioned cube with absolute positioned (for design reasons) squares in it.

Now, in Chrome and Firefox this works. All the squares have the same width and height; 60px (2px padding included) and all positions are right.

But in IE (8 & 9), the little squares' padding seem to have become margin.

Probably a stupid mistake, but I can't seem to get it right.

**xtaste** · Aug 21, 2011 12:03

Thought I would post my code as a reply because the attachment approval takes some time

HTML :

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/master.css" />
</head>
<body>

<div id="cube">

<div class="dot60 r1 c1 r1bg"></div>
<div class="dot60 r1 c2"></div>
<div class="dot60 r1 c3"></div>
<div class="dot60 r1 c4"></div>
<a href="" class="dot60 r1 c5 r1bg"></a>
<a href="" class="dot60 r1 c6 r1bg"></a>


<div class="dot60 r2 c1 r2bg"></div>
<a href="" class="dot60 r2 c2 r2bg"></a>
<a href="" class="dot60 r2 c3 r2bg"></a>
<a href="" class="dot60 r2 c4 r2bg"></a>
<a href="" class="dot60 r2 c5 r2bg"></a>
<a href="" class="dot60 r2 c6 r2bg"></a>

<div class="dot60 r3 c1 r3bg"></div>
<a href="" class="dot60 r3 c2 r3bg"></a>
<a href="" class="dot60 r3 c3 r3bg"></a>
<a href="" class="dot60 r3 c4 r3bg"></a>
<a href="" class="dot60 r3 c5 r3bg"></a>
<a href="" class="dot60 r3 c6 r3bg"></a>

<div class="dot60 r4 c1 r4bg"></div>
<a href="" class="dot60 r4 c2 r4bg"></a>
<a href="" class="dot60 r4 c3 r4bg"></a>
<a href="" class="dot60 r4 c4 r4bg"></a>
<a href="" class="dot60 r4 c5 r4bg"></a>
<a href="" class="dot60 r4 c6 r4bg"></a>

<div class="dot60 r5 c1 r5bg"></div>
<a href="" class="dot60 r5 c2 r5bg"></a>
<a href="" class="dot60 r5 c3 r5bg"></a>
<a href="" class="dot60 r5 c4 r5bg"></a>
<a href="" class="dot60 r5 c5 r5bg"></a>
<a href="" class="dot60 r5 c6 r5bg"></a>

<div class="dot60 r6 c1 r6bg"></div>
<a href="" class="dot60 r6 c2 r6bg"></a>
<a href="" class="dot60 r6 c3 r6bg"></a>
<a href="" class="dot60 r6 c4 r6bg"></a>
<a href="" class="dot60 r6 c5 r6bg"></a>
<a href="" class="dot60 r6 c6 r6bg"></a>

</div>
</body>
</html>

CSS :

Code:

html, body, div, img, span, form, fieldset, p {
	margin:0;
	padding:0;
}

#cube {
	width:410px;
	height:410px;
	position:relative;
	background-color:#cccccc;
}

.dot60 {
	width:56px;
	height:56px;
	padding:2px;
	position:absolute;
	display:block;
	color:#666666;
}

.c1 { left:0; }
.c2 { left:70px; }
.c3 { left:140px; }
.c4 { left:210px; }
.c5 { left:280px; }
.c6 { left:350px; }

.r1 { bottom:350px; }
.r1bg { background-color:#000000; }
.r2 { bottom:280px; }
.r2bg { background-color:#222222; }
.r3 { bottom:210px; }
.r3bg { background-color:#444444; }
.r4 { bottom:140px; }
.r4bg { background-color:#666666; }
.r5 { bottom:70px; }
.r5bg { background-color:#888888; }
.r6 { bottom:0; }
.r6bg { background-color:#aaaaaa; }

**Victorinox** · Aug 21, 2011 12:15

Without a valid DOCTYPE IE is thrown into Quirks Mode.

Add the following to the very top of your HTML markup:

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

**xtaste** · Aug 21, 2011 12:32

Ok, I formatted the code here to make it easier to read so I removed my doctype..

I'm currently working with HTML5's doctype : <!DOCTYPE HTML>
But this is not working. So how should I solve this one with the HTML 5 doctype?

**Victorinox** · Aug 21, 2011 13:43

The rendering in IE8/9 and other browsers looks identical here. What causes you to believe padding has become margin?

**xtaste** · Aug 21, 2011 14:13

Ok, the strangest thing happened. I placed the doctype at the very top of the page and the page worked! Now when I place it back to where it was, it still works!

I'm more than confused, I haven't changed anything else.
But that's probably why I couldn't find anything about this problem searching the web for the last 6 hours..

Anyway, thank you for your help!

User Tag List

Thread: Problem with padding in IE

Thread Tools

Display

Problem with padding in IE

Bookmarks

Bookmarks

Posting Permissions