...

View Full Version : Having CSS trouble in IE with site for positioning of images



Wuteverx1972
08-04-2010, 01: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>

<!--Modbargains front page Banner-->
<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>

<!--vw-->
<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>

<!--Porsche-->
<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>

<!--BMW-->
<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>

<!--Audi-->
<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>

<!--Ford-->
<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>

SB65
08-04-2010, 10:21 AM
Your code is missing a doctype (http://www.alistapart.com/articles/doctype/). Without one IE is unlikely to display everything correctly. Start by fixing this.

Wuteverx1972
08-04-2010, 09:36 PM
Your code is missing a doctype (http://www.alistapart.com/articles/doctype/). Without one IE is unlikely to display everything correctly. Start by fixing this.

That's not the issue. This portion is just a sample from the actual website I'm working. I have the doctype on the real site and does the same thing. The only thing that was confusing me was that everytime the images shifted, if you just right click on the page in IE and click on properties it somehow shifts the image back to its spot.... How is that possible??

Anyways I managed to solve me issue my resizing the images of the vehicle's by 2 pixels. Still confused about the right-click action though...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum