1276 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Member of the Envato Team
+15 more
ChristineWilde Envato team says

Hi guys and gals,

I’m having a problem with my personal site in Internet Explorer 7. The slider on the home page looks screwy. If you check it out in Chrome or Firefox you’ll see what the slider is supposed to look like.

Can anyone point me in the right direction with this?

www.wildemedia.co.uk

1182 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
campolar says

Applying a negative margin-left might fix it :)

1276 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Member of the Envato Team
+15 more
ChristineWilde Envato team says

But wouldn’t it look wrong in all the other browsers? It looks perfect in Chrome, Opera, Firefox, IE8 and Safari it’s just IE7 .

2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says
But wouldn’t it look wrong in all the other browsers? It looks perfect in Chrome, Opera, Firefox, IE8 and Safari it’s just IE7 .

Simple just ad an * for the css( *margin-left:-2px) this will only affect IE7

1734 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VisualSharing says

For a number of reasons, I’d recommend avoiding CSS “hacks” and instead using an inline conditional comment for IE7 :

<!--[if lte IE 7]>
<style type="text/css">
    div { margin-left: -2px; }
</style>
<![endif]-->
1276 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Member of the Envato Team
+15 more
ChristineWilde Envato team says

Thanks for the replies!

That doesn’t seem to have work unfortunately. I tried both ideas.

343 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
JackHowell says

Unfortunately I am using my macbook at the moment so don’t have access to IE7 (though I am curious so I will take a look on my pc when I get a chance).

An alternative way of thinking might be that IE7 is actually displaying correctly [don’t shoot] and that other browsers are being too lenient? I know it is unusual to think of IE being correct about something but because it is less forgiving it may show up an actual bug others are overlooking.

If you can, might even be worth looking at it in IE6 – if they same bug appears (though you will get a lot more as there are quite a few margined and floated divs without ‘display: inline’) then it might be a common IE problem.

Also try simplifying parts of your code: does it need to float, margin, position etc? Something (like the slideshow frame) that is ‘positioned: absolute’ doesn’t need to float as it is effectively no longer in the flow of the page. Also try using ‘left: XXpx’ and ‘top: XXpx’ rather than margin for your absolutely positioned divs as margin is not ideal (and could be causing IE to fall over).

Good luck! Might be able to come back to you with an exact reason later! I know how you feel though as I absolutely hate when this happens. :)

Edi: lovely site btw.

1276 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Member of the Envato Team
+15 more
ChristineWilde Envato team says

Thanks Jack,

Yes it is very annoying especially when I’m a freelance web designer if people view it in IE7 they will instantly leave because of this issue.

I copied the CSS from the sliders original files and didn’t change anything as it looked fine in the other browsers it wasn’t until my boss pointed it out that I knew it existed.

I have got IE6 on a virtual machine on my computer but I’m dreading looking at it.

I will try left and top positions to see if this changes anything.

Glad you like it, it has come a long way to get where it is today I think this must be about the 6th re-design! :)

2324 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+6 more
CreativeMilk says

Try to give the div#slide-holder a float left

1182 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
campolar says
Thanks for the replies! That doesn’t seem to have work unfortunately. I tried both ideas.

Did you try more than -2px? Dumb question, but possible?

And also try what mark said…

by
by
by
by
by
by