Container DIV Pushes Down Only In IE7 and IE6

HTML & CSS
1

The page linked below looks accurate in IE8 (and most other browsers) but has an error in IE7 and IE6. The problem seems to be the slider-container DIV. Not sure why or how to fix it, so any help would be greatly appreciated. Thank you in advance!

LINK-
http://www.securehostserver.info/rainscapes/

Todd

2

Hi,

The page is looking correct now in IE7 and 6 but in IE6 the slideshow doesn’t load and shows shows the round loading gif (that may just be a problem with my ietester though).

3

Hi,

The problem in IE7 is that slideshow-container clears the floats above but in Fireox it doesn’t and allows the background to slide under the floats above. You then added a big top margin fix which ending up breaking something else :slight_smile:

Just clear the float and remove the margins and all will be the same.


#slideshow-container {
    background: url(http://www.securehostserver.info/rainscapes/i/gfx_slideshow_bkg.png) repeat-y 0 0;
    width: 749px;
    height: 198px;
 [B]   /*margin: 131px 0 0;*/[/B]
    padding: 0 0 0 34px;
[B]    clear:both;[/B]
}
4

That has fixed it, or at least as far as I can tell. Can you test it in IE 6 and 7? Look okay?

5

Paul,

Thanks for taking a look at this for me. I have added the class of clearfix to the header DIV instead of adding additional markup like the br tag. I uploaded the new content and it looks great in all browsers except for IE7.

I read about your condition of haslayout in IE7 for the solid clearer but didn’t know if it applied to the instance that I am using it. But I added haslayout to the ie.css file for the clearfix class and the header ID.

Can you take a look and see if I have added the right property to the right class & ID?

6

Hi,

I couldn’t see the problem you mention but you’ve made a mess of your clearfix classes though :slight_smile:

They are actually doing very little in the page as the rules are strange.

First of all the beauty of the clearfix method is that you don’t need extra html mark up like this.


<br class="clearfix" />

(Even if you need a solid clearer don’t use a break as it is unreliable as a clearer cross browser and is hard to control its height in IE. Use an empty div instead which is more semantic because it’s not a line break anyway.)

The clearfix method is applied to the existing element without the need for extra mark up.


<div id="header"[B] class="clearfix"[/B]>

There is no need for the extra html element now.

However you seem to also have corrupted the clearfix rules and the full (old fashioned ) version is as follows.


/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \\*/
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles..................*/

If you need to use a solid clearer in the html (which occasionally IE will need) then use this instead.


.clearer{
    height:0;/* Firefox <2 would need a 1px height here but it introduces a gap*/
    overflow:hidden;
    clear:both;
}
* html .clearer{height:1px;margin-top:-1px}




<div class="clearer"></div>

However in most cases neither are needed because you could set overflow to hidden (and set haslayout for <=IE7)and that will ensure the element contains its child floats but obviously won’t work where overflow needs to be visible so is not an all or nothing solution.

7

Hi,

before div with id=“main” and after div with id=“header” add

<br style="clear:both;" />

Example:

<div id="header">....</div>
<br style="clear:both;" />
<div id="main">...</div>

this should help.

8

I added a clearfix directly after the header DIV and just before the main DIV and it did clear up the initial issue of the slideshow DIV pushing down, BUT of course it has raised a new issue. Not a big one though.

The main DIV had a gap at the top so I added a negative top margin to the main DIV and it looks fine in Safari but it has a slight gap between the header and main DIVs when I view the updated page in any other browser.

It is very subtle, but there appears to be a 1px or 2px gap between the green grass background image and the repeated shadow edges of the main DIV. Does anyone else see this on their screen?

If so, how would I fix this?