Overlapping boxes problem

[ZenBug]

Hi.
I'm wondering why my boxes are overlapping. Check it out:
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

See how the images in the footer overlap the text box? Should the footer ID be positioned absolutely? ...Relatively? ...Float maybe?

The CSS for the footer looks like this now:

#footer {
 position:relative;
 display: block;
 left: 5px;
 margin-left:0px;
 width: 730px;
 height: 100px;
 voice-family: "\"}\"";
 voice-family: inherit;
 height: 100px;
 width: 730px;
}

For extra points, if someone can tell me how to ensure that the images will be right up to the edges of the background image (the shadows on the sides) that would be great. It looks good in most browsers, but on IE 6/Win98, the masthead image is moved one pixel to the left so there's a small white space between the right edge of the image and the shadow down the side.

Thanks for any help.

[edited by: DrDoc at 3:42 pm (utc) on Oct. 9, 2004]

[createErrorMsg]

Welcome to WebmasterWorld!

What's the css for the elements BEFORE the footer in your code? Is the div above the footer floated, by any chance? If so, you need to add a clear property to the footer.

If this isn't the problem, you'll need to post more code.

Also, your Tantek Hack delivers the same values as the properties above it, rendering it unnecessary, and, if it has an intended purpose in the code, useless.

[ZenBug]

Yeah, I'm back-engineering code from other sites, (hence the problems) so I haven't quite got then hang of implementing that hack.

Here's all my layout code. There are no floats yet:

body { margin: 0; text-align: center; padding: 0;}
#controller {
position: relative;
width: 730px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
html>body #controller {
width: 730px;
}
#header {
width: 730px;
height: 173px;
margin-left: 0px;
border: 0px #EBE8DE solid;
voice-family: "\"}\"";
voice-family: inherit;
width: 718px;
height: 173px;
}
 
#footer {
position:relative;
display: block;
left: 5px;
margin-left:0px;
width: 730px;
height: 100px;
voice-family: "\"}\"";
voice-family: inherit;
height: 100px;
width: 730px;
}
#content {
position: relative;
display: block;
left: 0px;
margin-top: 0px;
width: 730px;
height: 271px;
padding: 6px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
width: 718px;
height: 258px;
}
#homeleft {
position: absolute;
display: block;
left: 7px;
width: 550px;
height: auto;
text-align: left;
padding:10px;
background-color: #ffffff;
border-bottom: 1px solid #d6ccb4;
border-top: 1px solid #d6ccb4;
border-left: 1px solid #d6ccb4; 
border-right: 1px solid #d6ccb4; 
}
#highlights {
position:relative;
display: block;
padding:10px;
top: 0px;
left: 575px;
width: 120px;
height: auto;
text-align: left;
}
#nav {
position: relative;
display: block;
border:0px solid;
left: 5px;
height: 25px;
width: 730px;
text-align: left;
} 

Thanks for the help.

[createErrorMsg]

The only thing I see that looks like it might cause an overlap is the height: 271px; setting on your #content div. That's a relatively small height for a content section, but because of the way the height property works in compliant browsers, the div will stop right at 271px, regardless of whether or not the content inside of the div stops, too. The page will then put the footer into the page immediately following that 271px high content div, more than likely overlapping some content.

What you probably want there is a min-height setting of 271px (if at all), which will keep it from shrinking to less than that, even if there is very little content, but will allow it to expand if more content space is needed.

Unfortunately, IE does not support min-height. instead, it implements the height property the way complaint browsers implement min-height.

So what you need, then, is to give compliant browsers min-height, and IE (ONLY) height. Here's one way to do this...

#content {
min-height: 271px;
height: auto;
}

/* hide fromm iemac \*/
* html #content {
height: 271px;
}
/* end hide from iemac */

The first #content rule tells complaint browsers what they need to hear. The second, inside of the mac commented backslash hack, gives IE the height value it needs in order to accomplish the same thing, without overriding the height: auto; property in compliant browsers.

Try it and see if it works.

[ZenBug]

I think I figured it out. I set the Heights to Auto, but to no avail. I don't need minimum height; it's just going to be a dynamic news section connected to a database, so it has to dynamically resize.

I made the footer and the two boxes with the text left-floats instead of relatively positioned ones that that seems to have done the trick. There's still a weird footer padding discrepancy between Firefox and IE; I'll have to fiddle with the code.

Thanks for your help. I may be back soon!