My buttons are not working properly in Internet explorer 7 or lower version

[evaky]

Hi,

My button works fine in firefox, mac and internet explorer 8. But it doesn't work on internet explorer 7 or lower version. Could anyone point me to the right direction of what is not working in my code?

http://er2.com.au/index.php?main_page=index

Works fine in firefox:



But not working in IE6/7:



Please help! I want them look all the same on all version of browser.

[RescoCCC]

That's a browser compatibility issue, not a Zen Cart issue. Only about 3% to 4% of netizens are still using IE7 and IE6, so don't worry about it.

[moesoap]

Hi,

My button works fine in firefox, mac and internet explorer 8. But it doesn't work on internet explorer 7 or lower version. Could anyone point me to the right direction of what is not working in my code?

http://er2.com.au/index.php?main_page=index

Works fine in firefox:



But not working in IE6/7:



Please help! I want them look all the same on all version of browser.

You can use the following in your css with ie7 - for example -

*margin-left: -3em;

or ie6

_margin-left: -3em;

The asterisk and underscore is a css hack that only applies to ie 7 or 6. Should you need to make a change in ie8 only you can use /9 - for example -

margin-left: -3em/9;

Hope this helps.

[evaky]

Thanks a lot!

However, I still have one problem in the coding. In IE6/7, the free shipping image is moved to the top and overlap with the Price. Which code I can control the Free shipping image to align at the bottom?



Eva

[moesoap]

Thanks a lot!

However, I still have one problem in the coding. In IE6/7, the free shipping image is moved to the top and overlap with the Price. Which code I can control the Free shipping image to align at the bottom?



Eva

Hi,

You need to either float that image left or right and use clear:right, clear:left or clear:both, whichever works. The image should fall into position under the rest and then you could use either margin-left or right to position it where you want.

If it doesn't fall into position you could try margin-top to push it down or if that doesn't work rearrange the html into order so that it is meant to be positioned under the rest.

Remember to use the css hacks so that it doesn't change its appearance in firefox or compatible browsers.

[evaky]

Sorry, I am very dumb here, is it meant I need to add "Float: left and Clear: both in the following code:


.itemCartAdd+img {
position: absolute;
top: 227px;
left: 27.5%;
_margin-left: -7em;
*margin-left: -7em;
float: left
Clear: both }

I try but the image not force to the bottom. Could you please leading me to the right direction?

Thanks!

Eva