IE8 Weirdness With Background Image

HTML & CSS
1

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!

2

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.