View Full Version : Resolved IE7 and IE6 Browser Issue

11-05-2009, 05:35 AM
For some reason there is a space between the Primary Content section and the Footer section on a layout that I'm working on. You can view the problem by viewing the following BrowerCam screenshots:


This problem only occurs when using IE7 or IE6 on a Microsoft Operating System.

The actual layout can be viewed at the following URL:


The layout validates XHTML Strict 1.0 and CSS 2.1

My css files can be viewed at the following URL's:




How can I get rid of the space between my Primary Content section and my Footer?

11-05-2009, 06:50 AM
Well your global resets are pretty extensive and personally I think they are going beyond the scope of resets and actually applying your own default styles to elements. Personally I would separate them into actual global resets and global styles, but I am very new to CSS myself so don't put too much stock in anything I have to say here.

I encountered a similar issue myself a while back and it boiled down to the browsers default styles in spite of the fact that I had pretty comprehensive global resets myself. What ended up fixing the issue for me was this:
* {padding:0; margin:0; border:none transparent 0px;}
So give that a try and if that that doesn't help then I expect someone else may be able to give you better advice.

edit: sorry that code for the borders was wrong.. probably wouldn't make much difference since the first value would still set borders to none and usually such problems are margin/padding related so I guess that is why it fixed my problem anyway. In any case it is fixed now (I think?).

11-05-2009, 11:04 PM
Thanks linehand but your solution didn't work. Is there anyone else who can help with this problem?

11-05-2009, 11:41 PM
Hello brayd,
It looks like your not clearing your floats in #wrapper...
Add a background color to #wrapper and you can see it doesn't extend as far as it should. Add overflow:auto;, the floats clear and it wraps everything like it's supposed to.

Not sure that cures the problem in IE7 though...
It looks like the odd float order has something to do with it. Try not floating #tertiaryContent once and see what happens.
Like this -

#tertiaryContent {
margin: 0 710px 0 0;
width: 210px;

11-06-2009, 06:06 AM
Thanks Excavator.

I implemented your suggestions and the layout now displays just fine in IE7 and IE6. I'm absolutely puzzled as to why my code didn't work in IE6 and IE7. It worked in every other browser/OS combination.