CSS guru needed to help resolve ie bug (very strange images issue)

HTML & CSS
1

Hello!

I have a vey strange bug on IE with this website : http://www.wpsmartsites.com/clonethis/.

Please check this video for the comments :
http://www.screencast.com/users/DocHansen/folders/Jing/media/a5c1976f-6455-4d26-aa75-abba4ba59e8c

Thank you very much in advance for your help!

Ulrich.

2

Clever to post a video like that–I’ve not seen that before. :wink:

When you have a problem with “IE”, remember that there are at least three of these nasty animals, all roaming in their own separate jungles.

For me, “IE” means IE8 (just as Firefox means FF 3.5 … currently).

Your arrows look fine in IE8.

They also happen to look fine in IE7 (I went and checked for you).

They also happen to look fine in IE6 (I went and checked for you).

Have you changed anything in the mean time? Or have you refreshed your page / emptied the cache?..

3

Thanks you very much for your help ralph.m!

Yes, IE also means IE8 for me. :wink:

Did you try to scroll down/up? On my computer, the arrow looks fine when the page loads, but the strange behaviour appears when I scroll down and up.

4

Yes, I did all the scrolling etc in each browser, and the behavior did not occur.

Using Win XP… what are you using?

5

Win 7. I also tested on Vista.

6

I don’t know if OS makes a significant difference (it certainly does sometimes), but will need others to test and confirm. :wink:

7

Just checked all three IE’s on my XP and I do not see either.

8

Thank you very much too, EricWatson.
Hopefully, someone who can see the bug will be able to help me…

9

Hi,

The bullets look ok in IE8 on xp but the bullets on the right hand side at the bottom are broken in ie6 and Ie7 though.

In Vista in IE8 I can see the problem on the left hand bullets that you mention and this seems to be caused by a rounding error in vista.

If you change the line height of the list to px or increase the em measurement slightly the problem goes away.

e.g.


ul li {
    background-repeat:no-repeat;
    background-position:left center;
    padding-left:20px;
    list-style:none;
   [B] line-height:1.55;[/B]
}

That fixes it for me.

The IE6/7 problems are “haslayout” and you need to address the list items like so:


.sidebar li a{background-position:0 3px;zoom:1.0}

You may want to add that just to an ie7 and under css file only.

Other lists may have the same bug so just target them similarly as required.

10

I neved heard about this rounding error…

Thank you very much, Paul O’B, you are a life saver! :smiley: