Ie 7 Issues (again)

HTML & CSS
1

Hello,

I’m having issues with ie7. Looks fine everywhere else.

http://174.132.169.59/~gci/

The problem is with the image rotator. In ie the margins are not happening. I know somewhere in the css it’s off but I’m not sure where. I’m taking over from somebody else so I’m not sure what they did.

Any help would be appreciated

Thanks,
Daniel

2

Hi,

You haven’t taken into account the default padding and margin on the ul as it varies between browsers. You also have some typos so change the code to this.


ul.slideshow {
    list-style:none;
    width:600px;
    height:251px;
    overflow:hidden;
   [B] /*position:relitive;
    margin-top:-19px;
    margin-left:-40px;*/
    margin:0;
    padding:0[/B];
}
ul.slideshow li {
    position:absolute;
[B] z-index:1;[/B]
}
ul.slideshow li.show {
    z-index:500;
}

You previously had the following which is broken and contains a number of typos and an extra closing bracket.


ul.slideshow {
    list-style:none;
    width:600px;
    height:251px;
    overflow:hidden;
  [B]  position:relitive;[/B]
    margin-top:-19px;
    margin-left:-40px;
}
ul.slideshow li {
    position:absolute;
[B]z-index:1:[/B]
}
[B]}[/B]
ul.slideshow li {
    position:absolute;
[B]z-index:1:[/B]
}
3

Thank you so much for this. It looks perfect in ie7 but is now off in the other browsers. I’m just not sure where the default padding is being called (or not)

4

Hi,

The code I gave is correct and works fine locally. There is another issue going on and when I look at the generated source of the page in Firebug (rather than the real source) I see that a non breaking space hasd been introduced here.


 <ul class="slideshow">
                          [B]  &nbsp;[/B]
                            
                            <li style="opacity: 0;" class="">

It’s that space that is causing the problem so you need to find out how it got there and remove it.

I would start by closing the whitespace gaps in the html just in case there’s an invisible character in there.


[B]<ul class="slideshow"><li cla[/B]ss="show"> <a href="#"><img src="images/homepage-banner1.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner2.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner3.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner4.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner5.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner6.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner7.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner8.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner9.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner10.jpg" width="599" height="251" /></a></li>
                        <li><a href="#"><img src="images/homepage-banner11.jpg" width="599" height="251" /></a></li>
                    </ul>

However I think the issue is likely that the slidshow script is corrupting that html somehow.

5

It was the spacing. That did the trick. Thanks!