Rogue div (ie fix required)

m00f

12-18-2009, 05:32 PM

Hi there,

I'm having a problem that is IE specific(only certain versions though) and I'm sure it's just a simple fix but I'm struggling to find the correct wording to find a solution with google.

The problem is on 'http://www.nottinghammaintenance.co.uk' - the footer keeps 'floating' infront of the main body, what I mean by that is it is just sticking itself in the middle of the screen or sometimes just overlapping the main body div. As I have said it seems to be only IE specific, Firefox, Safari and Chrome all seem to handle it fine.

Any help/advice would be greatly appreciated.

Tech details:

I am using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Css pertaining to the footer:

#footer {
clear:both;
height: 34px;
font-size:72%;
padding: 0;
background: #FFF url(../images/bgmain.jpg) repeat-y center;
position: relative;
margin-top: -100px; /* negative value of footer height */
height: 150px;
clear:both;
}

#footer .padding { padding: 10px 0px 0px 0px; }
#footer .right {
float:right;
clear:right;
text-align:right;
}
#footer a{
color:#FFFFFF;
}
#footer a:hover{
color:#333333;
}

#footer #popular_links {

background: url(../images/footer_bground.jpg);
background-position:center;
border: none;
width: 772px;
float:left;
clear:both;
padding: 10px 0 0 0;
margin: 0 0 0 7px;
position:relative;

}

#footer #popular_links .wrap {
height:1%;
margin:16px 0;
overflow:hidden;
}

#footer #popular_links dl {
border-left:1px solid #ddd;
display:inline;
float:left;
line-height:15px;
margin:0 -2px -400px;
padding-bottom:400px;
width:25%;
color:#ddd;
}

#footer #popular_links dt {
margin-bottom:4px;
padding:0 15px;

}

#footer #popular_links dd {
padding:0 10px 0px 0px;
line-height:15px;
}
link_footer {
padding: 0px 0px 0px 20px;

}

Excavator

12-18-2009, 05:46 PM

Hello m00f,
You have some odd things there, like a 34px height on your footer that has 194px high links in it.
Try these changes in your CSS:

body {
margin:0px 0;
padding:0;
font: 74% Arial, Sans-Serif;
color:#ccc;
background: #343434 url(../images/bg.jpg) repeat-x;
line-height: 1.4em;
}

.content {
background: #FFF url(../images/bgmain.jpg) repeat-y center;
color: #ccc;
margin: 0 auto;
padding: 0;
width: 787px;
overflow: auto;
}

/* HEADER
---------------------------------------------------------------------------------------------------------------------------------------------------
*/
#header {
margin: 0;
width: 787px;
background: #FFFFFF url(../images/header.jpg) no-repeat center top;
height: 166px;
color: #FFF;
}

#main {
background: #FFF;
width: 765px;
margin: 0 10px 0 10px;
color: #808080;
overflow: auto;
}

#footer {
clear:both;
/*height: 34px;*/
font-size:72%;
padding: 0;
background: #FFF url(../images/bgmain.jpg) repeat-y center;

}

m00f

01-02-2010, 05:56 PM

Hi Excavator -

Thanks for replying so quickly, I have been away over christmas so apologies for taking so long to reply. I realise my code was in a bit of disarray, my apologies for that, over the course of 3 weeks I had been going back and forth editing the site. Usually I have a beta site I work from... With my frustration building, I ended up editing directly on the working site... Not good practice I know!

Anyway, I have tried implementing the fixes you placed above - some of which I have left in, although by making the 'overflow:auto' on my main div I end up with scroll bars all over the place which isn't ideal.

Is there anything else you can suggest?

Many thanks in advance

m00f

Excavator

01-02-2010, 06:23 PM

overflow:auto; (http://www.quirksmode.org/css/clearing.html) can clear floats for you and, if scrollbars appear like is happening to you, it's a good indication of your box model (http://www.w3.org/TR/CSS2/box.html)being off.

In .left_side you have a left padding of 10px.
That makes 180px wide .hitems too wide to fit in .left_side.
When figuring your box model, margin/padding/border all figure in to total width.

You shoud also check with the validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nottinghammaintenance.co.uk%2F). You have some very basic errors in your code. See the links about validtion in my sig below.