I need some help please :)

My website displays all my image sliders properly in Google-Chrome & Mozilla-Firefox but in IE it pushes the mages down and creates a black bar at the top and also doesn’t display the image box properly. I’m sure this is an easy fix for some of you masters out there and I’d be much obliged for help!
Thanks,
Starkaise9

Hi there,

Welcome to the forums :slight_smile:

We cannot help you unless you provide a link to the page where you are having this issue, or enough code that we can reproduce this issue for ourselves.

The website is stadiumpros.com
The image sliders at the top of the homepage and at the top of the /bleachers page and so on display properly in Google Chrome and Mozilla Firefox and Safari, however in IE the homepage slider doesn’t display properly and the /bleachers page the images are pushed down with a black line at the top oddly, below is the code two posts 1st half and second half:

Edit:

I have trimmed the posts down starkaise, we can get the javascript from the link!
Spike

OK

I would call that a CSS problem that the page seems to be having. Let’s see if someone can help you with that.

HI,

Try adding the following CSS:



.ws_images li{
vertical-align:top;
}

It should cure the gap you mention.

Hi there,

I was looking at this page to reproduce your issue: http://stadiumpros.com/grandstands/

Paul’s solution will work excellently, but it might also be noted that on this page, the line which is causing IE to freak out is this:

<li><img src="../images/anfslot3.jpg" alt="Angle Frame Grandstand Addition" title="Angle Frame Grandstand Addition" id="wows1_2"/>Little Rock, AR, USA</li>

The file’s extension is actually JPG (upper case).

If you change your code to reflect this, then the black line will also go away:

<li><img src="../images/anfslot3.JPG" alt="Angle Frame Grandstand Addition" title="Angle Frame Grandstand Addition" id="wows1_2"/>Little Rock, AR, USA</li>

Well spotted :slight_smile:

Thanks!

I spent ages tearing my hair out over a very similar issue a while back and it was a real face-palm moment when I realized why things were working.
It’s really weird though, that it was just IE that had a problem with this, as normally it’s such a standards compliant browser …

I fixed the JPG to jpg, but still can’t get the IE issue fixed, driving me insane, perhaps I can email the files to you Pullo and let you look them over?
Starkaise9

Make sure to try Paul’s suggestion in post #6, as the JPG thing wasn’t intended as the whole solution.

Also, it would help if you could let us know which page you are having the issue with, which version of IE you are using, as well as the details of the problem.
I have just looked at this page in IE9 and IE10 and it works as expected.

The problem is viewing with IE 8, the homepage top slide
www.stadiumpros.com isn’t displaying the image slider borders properly “the white border” & the images don’t slide as smooth as with Chrome, Firefox & Safari.
And on this page www.stadiumpros.com/bleachers the black stripe is still at the top AND the border isnt displaying properly. Are you saying in IE 9 & IE 10 both the homepage and /bleachers page are displaying properly? " I loathe IE" lol !

Hi,

If you are talking about the white rounded image border added to ws_shadow and produced with this image:


Then the problem is that you have used background-size to make that image stretch to fit the slider image but IE8 has no support for background size so just shows the image at its normal size. You will either need to make the image the exact size to fit - assuming the slides are all the same size or perhaps use conditional comments and hide that image for ie8 and under.

the black stripe is still at the top

Adding the code I gave in my first post will fix that issue (as mentioned four times now) :slight_smile:


.ws_images li{
vertical-align:top;
}