Help with AP div in Internet Explorer

Essien · 07-09-2010 1:56pm #1

Hi,

I need some help positioning a div correctly in IE, it works fine in Opera & Firefox and I'm hoping somebody here can tell me why it's not doing what it's supposed to in IE. The "gallery" div is sitting to the left of the "rightframe" div when it should have an equal L&R margin. The div "rightframe" is positioned absolutely within the "ccenter" div but it too seems to be sitting to the left when in IE. Heightwise everything looks ok.

Here is how it looks in IE...

Here is how it's supposed to look....

Here is the relevant code....

CSS...

body {margin:0px;
background-image:url(../images/backgrounds/texture.png);
background-repeat:repeat;
}
.top {
height:330px;
background-image:url(../images/backgrounds/logo.png);
background-repeat:no-repeat;
background-position:top;
}
.header {height:80px;
}
 
.horizontal  {
background-image:url(../images/backgrounds/horizontal.png);
background-repeat:repeat-x;
background-position:bottom;
height:250px;
}
.hcenter {
margin-left:auto;
margin-right:auto;
width:800px;
height:auto;
margin-top:10px;
margin-bottom:10px;
}
.content {
background-image:url(../images/backgrounds/contenttop.png);
background-position:top;
background-repeat:repeat-x;
background-color:#FFFFFF;
height:auto;
}
.ccenter { width:900px;
height:600px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.rightframe {
 width:624px;
 height:500px;
 position:absolute;
 background-image:url(../images/backgrounds/rightframebg.png);
 left: 275px;
 top: -164px;
}
.gallery {background-color:#FFFFFF; 
width:570px;
height:450px;
margin-left:auto;
margin-right:auto;
margin-top:35px;
}

HTML...

[HTML]<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<div class="top">
<div class="header">
</div>

<div class="horizontal">
<div class="hcenter">
</div>
</div>

</div>
<div class="content">
<div class="ccenter">
<div class="rightframe">
<div class="gallery"></div>
</div>
</div>
</div>

</body>
</html>[/HTML]

"rightframe" & "gallery" are most likely where the problem is, I don't know what it is though. Can anybody help?

EDIT: Its actually the div "ccenter" thats causing the problem, its sitting to the left when its supposed to have auto L&R margins, its dragging the rightframe with it. I still don't know how to fix it

Essien · 07-09-2010 3:58pm

Sorted.

FWIW the problem was that there was no "!DOCTYPE" specified

From W3schools.....

Note: Using margin:auto will not work in Internet Explorer, unless a !DOCTYPE is declared

I just copied and pasted it from another site I did in Dreamweaver (where !doctype is specifed automatically) is this ok?

Can somebody explain what !doctype is and its relevance to the auto margin?

bobbytables · 07-09-2010 5:35pm

Hey Essien, when you present markup to a browser one of the first checks is to verify what sort of document it is. So for example HTML/XHTML, etc documents can be authored to conform to various web standards as specified by a DOCTYPE. Depending on the doctype specified, the browser may handle/render the document differently. If you fail to include a doctype, the browser enters quirks mode, which is essentially the browser doing what it pleases with the document as opposed to adhering to a standard.

So by avoiding web standards you can expect the increased potential for cross browser compatibility issues.

^ the above is a very simplified view, but just get used to writing standards compliant code to reduce the potential for rendering surprises.

Help with AP div in Internet Explorer

Comments