IE8 Weirdness With Background Image

Hey everyone,
In order to replicate this problem in IE8 it is a two step process.

  1. First you must add a book to the basket, click here and then click the “Add To Basket” button:
    http://bit.ly/duY7Fv

2)Then click the My Basket link:
http://bit.ly/aW7J55

You will notice in IE8 that the remove from basket button is showing up 2 times. (The red X next to the Update button)

I have set the width to 22px, the height to 22px, but it’s showing up as 44px in width and with 2 background images side by side. I have set the background-repeat to no-repeat but this didn’t fix it either.

<div onclick=“document.getElementById(‘cartRemove’).value = ‘722’; document.getElementById(‘removeItem’).submit();” border=“0” class=“listing_remove”><a href=“#”>X</a></div>

I can’t figure it out for the life of me… It is only an issue for IE8. Any help is greatly appreciated.

Thanks!

you need to first sort this one out, appearing when adding to the basket:

ie

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Timestamp: Sat, 23 Oct 2010 22:23:24 UTC

Message: ‘document.getElementById(…)’ is null or not an object
Line: 53
Char: 11
Code: 0
URI: http://www.corelearningresources.com/books/aboriginal-authors/children-of-the-longhouse

ff

Error: document.getElementById(throbID) is null
Source File: http://www.corelearningresources.com/books/aboriginal-authors/children-of-the-longhouse
Line: 53

and you have a <div> inside a <a>. which is wrong. and which are also closed the wrong way: you first open the a then the div, but you close first the a and finally the div.

<a href=“#”><div class=“listing_remove” border=“0” onclick=“document.getElementById(‘cartRemove’).value = ‘729’; document.getElementById(‘removeItem’).submit();”>X</a></div>

so every browser does what it can with it.