Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    53
    Thanks
    6
    Thanked 1 Time in 1 Post

    Having CSS trouble in IE with site for positioning of images

    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:

    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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your code is missing a doctype. Without one IE is unlikely to display everything correctly. Start by fixing this.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    53
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Your code is missing a 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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •