Hi all,

 

I have an issue with my CSS that only seems to happen in IE8. I have tested IE6, IE7 and IE9 as well as Chrome and Firefox and it works fine.

 

The problem is on this site: http://www.ecloset.co.za/shop/clothing - Ever since adding the sold out sign with absolute positionging, the first column seems to have grown and the "Sold Out" sign on the 2nd, 3rd and 4th column are out of place.

 

Please let me know if you have any suggestions..

Thanks!!

Few good tips regarding both Sold Out block and IE8 troubleshooting.

 

As I see, You used absolute positioning for the block, it's properly center aligned in Firefox but not in IE8. Try to use position: absolute; left: 50%; margin-left: negative half of image width (example: margin-left: -40px; ).

 

Another tip, which You might like even more (because no testing will be required), simply add the following line to the <head> of Your document:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

Hi,

 

Thanks for your response...

 

Your first suggestion didn't fix the problem in IE8 - looked OK in Chrome but the same bug in IE8.

 

The second suggestion also didn't work. I am testing with IE tester as opposed to a real IE8 but I guess they work the same right?

 

Any other suggestions would be much appreciated...

IE Tester might not understand this rule becuase it sets the default rendering method. Please try to implement the second techqniue and I will check later using native IE7 and IE8. In general, if it's possible avoid using IE tester.

Hi,

 

I did make the emulate fix and have left it on. Please let me know how it looks on your browser. I also used the net render website and it also seems to be still showing the error.

 

The only thing that seems to fix the problem is removing: position: absolute; - When I remove that, the vertical lines straighten out in IE8 and all other browsers. But as you can see with Chrome of Firebug when you remove it, the image of the clothing goes downwards. I try using margin-bottom: -40px; on the sold out div but then the image of the clothing comes up and overlaps the sold out sign. Do you know any way around this? z-index doesn't seem to be working for me...

 

Thanks for the help so far!!

Well, You did not put it correctly (IE doesn't find it). Put it just below <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - I am almost sure it would help.

Ah - moving it up fixed the problem!!

 

It works now in IE tester but strangely it now crashes the IE NetRender. Does that matter?

 

Thanks...

Well, hard to say, try to check the website using native IE environments and You will see. But I think that it won't cause any errors.