PDA

Click to See Complete Forum and Search --> : Simple Div / CSS question...

rokit
09-13-2006, 11:03 AM
Hi all,

I'm new to this forum and have a simple question I'd be very grateful if someone can answer it for me.

I'm trying to create a very simple page layout with 2 sections centred horizontally. The HTML is this:

<div id="content">

<div id="header">
<!--header image-->
</div>

<div id="flashcontent">
<!--flash file-->
</div>

</div>


And the CSS I'm using is this:

#content {
width: 965px;
margin-left: auto;
margin-right: auto;
}

#header {
width: 965px;
height: 90px;
}

#flashcontent {
width: 965px;
height: 652px;
}


This works really nicely on all browsers except IE, where there is a gap between the two sections. It seems as though the header height: 90px is not working.

What's the correct way to achieve this?

Many thanks,
Rik
WebJoel
09-13-2006, 11:45 AM
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
#content {
width: 965px;
margin:0 auto;
/*border:1px dotted red;*/
}

#header {
width: auto;
margin:0 auto;
/*border:1px solid green;*/
height: 90px;
background-color:yellow;
padding:10px 25px;
}

#flashcontent {
width: auto;
height: 652px;
margin:0 auto;
background-color:#ececec;
/*border:1px dashed blue;*/
padding:10px 25px;
}
</style>
</head>

<body>
<div id="content">

<div id="header">
<!--header image-->header
</div>

<div id="flashcontent">
<!--flash file-->flash
</div>

</div>
</body>
</html>
rokit
09-13-2006, 02:58 PM
Thanks WebJoel but I'm not sure you quite understood what I was getting at. That just ensures the content is right at the top of the page.

The problem I am having is that (only with IE) there is a gap between the header div and the flashcontent div.

I read somewhere about a 3 pixel bug with IE. Could this be it? This does seem like a very simple layout so I can't understand why it's so complicated!
WebJoel
09-13-2006, 03:46 PM
From what you posted, I would not be able to discern that. But if you are picking up additional pixels in IE that aren't in other browsers, add:

<style>
body, html {border:0; padding:0; margin:0;}
</style>

This will strip that 'default' three pixel box-model error things from IE. All other ("compliant") browsers do this by default. But having added "margin:0 auto" to the "flash" content section removes any 'top' margin ("zero", and "auto"-adjusts the sides for 'centering'.).
Possibly next, for the "banner" image box, a "margin: 0 auto 0 auto;" (zero-top, auto-right, zero-bottom and auto-left) will nix this. There would not be anything remaining to cause additional pixels between the top banner area and the below FLASH area...
rokit
09-14-2006, 12:00 PM
Sorry, it was my fault for not making myself clear enough.

Thanks for your post. However this still has not solved my issue.

If I remove "height: 90px" for the header div, this gap between the header div and the flash content div appears in all browsers. I can set it to e.g. 40px and then the div shrinks to 40px and only that part of the image is displayed.

However - this does not work in IE. Setting the height to anything less than 90px has no effect - it still just displays the full header image and there is always this small gap. Perhaps this is a different issue from the 3 pixel gap thing??

Any ideas what's going on?

Many thanks again,
Rik