Having CSS trouble in IE with site for positioning of images [Archive]

Wuteverx1972

08-04-2010, 12:10 AM

Hey guys I'm having trouble with getting these mouseover images to appear right in Internet Explorer. I've tested it out in Chrome, Firefox, Mobile phones such as Android and Iphone and they all display my code just fine. I was thinking it had to do something with the span tags or float but I played around with it and nothing fixed. Please give some advice.

Here's my code:

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

loadImage1 = new Image();
loadImage1.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/vw.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/vw.jpg";

loadImage2 = new Image();
loadImage2.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/Porsche.jpg";
staticImage2 = new Image();
staticImage2.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/porsche.jpg";

loadImage3 = new Image();
loadImage3.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/Bmw.jpg";
staticImage3 = new Image();
staticImage3.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Bmw.jpg";

loadImage4 = new Image();
loadImage4.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/Audi.jpg";
staticImage4 = new Image();
staticImage4.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Audi.jpg";

loadImage5 = new Image();
loadImage5.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/Ford.jpg";
staticImage5 = new Image();
staticImage5.src = "http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Ford.jpg";

</script>

<style type="text/css">
#myTabs .tab {
float: left;
}

#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
</style>

</head>

<body>

<div id="myTabs">
<table border="0" cellpadding="0">

<tr>
<td>


<div class='tab'>
<span class='tab_middle'>
<a href="http://www.modbargains.com/">
<img src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Colored%20Badges/Colored%20Banner.jpg" border=0></span>
</a>
</div>

</td>
</tr>

<tr>
<td>


<div class='tab'>
<span class='tab_middle' onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<a href="http://www.modbargains.com/gdept.aspx?dept_id=35">
<img name="image1" src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/vw.jpg" border=0></span>
</a>
</div>


<div class='tab'>
<span class='tab_middle' onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<a href="http://www.modbargains.com/Porsche-Parts.htm">
<img name="image2" src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/porsche.jpg" border=0></span>
</a>
</div>


<div class='tab'>
<span class='tab_middle' onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<a href="http://www.modbargains.com/gdept.aspx?dept_id=12">
<img name="image3" src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Bmw.jpg" border=0></span>
</a>
</div>


<div class='tab'>
<span class='tab_middle' onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<a href="http://www.modbargains.com/gdept.aspx?dept_id=63">
<img name="image4" src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Audi.jpg" border=0></span>
</a>
</div>


<div class='tab'>
<span class='tab_middle' onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<a href="http://www.modbargains.com/gdept.aspx?dept_id=64">
<img name="image5" src="http://www.csupomona.edu/~hlugo/Color%20Badges%20for%20script/Fadeds%20Badges/Ford.jpg" border=0></span>
</a>
</div>

<div style='clear:both'></div>
</div>

</td>
</tr>

</table>

</body>

<html>