...

View Full Version : IE7 Footer Trouble



gingerchris
01-17-2008, 01:12 PM
Hi All,

I'm trying to polish off a website, but am having trouble with ie7.

http://www.office-planet.com

Everything displays fine in FF, and although a few ie6 fixes are still necessary, the footer at least sits under the content.

Can anyone offer some help with this please?

Thanks
Chris

CFMaBiSmAd
01-17-2008, 01:58 PM
Your markup contains some errors that would effect how the page is rendered (some missing/mismatched tags and duplicate id's) - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.office-planet.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Fix all the validation errors and see if the site renders like you want.

gingerchris
01-17-2008, 04:21 PM
Thanks for that, I have fixed the validation now but the page is still not rendering the same in IE7.

Any further suggestions?

Chris

Excavator
01-17-2008, 05:55 PM
Good morning gingerchris,
I don't see much difference between the two. A little more whitespace between the orange "search now" and "some of our clients"... but that's it.

You do need to clear your floats.
You have #columns set at height:73px; but the columns it's containing are way higher than that. Put a background color on it to see what I mean...
#columns{
margin-top:115px;
height:73px;
background: #000;
}



Make your CSS look like this:

#columns{
margin-top:115px;
background: #000;
overflow: auto;
}

Here is the overflow method of clearing floats explained (http://www.quirksmode.org/css/clearing.html).


Hope that helps.

jcdevelopment
01-17-2008, 05:55 PM
beside a little border issue, everything looks fine to me, they look the same in each browser, IE7 and FF.

Is there something im missing?

If it is a border problem its acting wierd in IE, and it just may be a height issue!!

gingerchris
01-18-2008, 09:59 AM
Thank you guys so much

I think I must have forgotten to clear my cache, because it is now fixed.

Thanks again

Chris

Excavator
01-18-2008, 10:49 AM
#feature is acting weird because your not clearing it right. Get rid of the min-width on .index....

#feature{
width: 468px; /*you may need to adjust this width*/
padding: 20px;
float: left;
font-size:12px;
line-height:20px;
background-color:#fff;
border:1px solid #a1a1a1;
overflow: auto;
}
/*.index{
}*/

.photo{
border:2px solid gray;
float:right;
margin-left:5px;
}

And make the img src look like this: <img src="http://www.office-planet.com/images/photo.jpg" width="204" height="272" class="photo" alt="photo" />



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum