Some problems with IE and Navbar

Discussion in 'vBulletin Discussions' started by plazzman, Jun 30, 2009.

  1. plazzman

    plazzman Adept

    Joined:
    May 17, 2009
    Messages:
    180
    Likes Received:
    6
    I'm trying to use a mouseover/png button feature on my site, and it's not working on IE.

    If you look, you can see that it's making some weird pyramid scheme instead of the two line row.

    Anyone know how I could possibly fix this?

    Thanks alot!
     
  2. Wayne Luke

    Wayne Luke Regular Member

    Joined:
    Apr 2, 2009
    Messages:
    992
    Likes Received:
    276
    Really bad unvalidated code there. IE is rendering it correctly according to the code.

    HTML:
    <!-- begin navigation buttons table -->
    <center>
    <table width="30%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    
    
    <a href="index.php?" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
    <img name="image1" src="/forum/bi2/fldbuttons/homesmall.png" border=0></a>
    
    
    
    
    
    
    
    
    
    
    <td id="navbar_search"><a href="search.php?" accesskey="4" rel="nofollow" onmouseover="image9.src=loadImage9.src;"onmouseout="image9.src=staticImage9.src;">
    <img name="image9" src="/forum/bi2/fldbuttons/searchsmall.png" border=0></a><script type="text/javascript"> vbmenu_register("navbar_search",1); </script></td>
    
    
    <a href="search.php?do=getnew" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
    <img name="image4" src="/forum/bi2/fldbuttons/newpostssmall.png" border=0></a>
    
    <a href="http://www.fightlockdown.com" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
    <img name="image5" src="/forum/bi2/fldbuttons/articlessmall.png" border=0></a>
    
    
    
    <a href="vbookie.php" onmouseover="image7.src=loadImage7.src;" onmouseout="image7.src=staticImage7.src;">
    <img name="image7" src="/forum/bi2/fldbuttons/vbookiesmall.png" border=0></a>
    
    <td><a href="competitions.php" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
    <img name="image6" src="/forum/bi2/fldbuttons/competitionssmall.png" border=0></a></td>
    
    <td><a href="casino.php" onmouseover="image8.src=loadImage8.src;" onmouseout="image8.src=staticImage8.src;">
    <img name="image8" src="/forum/bi2/fldbuttons/casinosmall.png" border=0></a></td>
    
    
    <td></td>
    
    
    </tr>
    </table>
    </center>
    <!-- End navigation buttons table -->
    
    IE will render elements nested in a table but outside a table cell first to try and maintain the integrity of the tabular data. First button isn't in a table cell. Then a table cell and three more buttons outside it. Than two more cells and a blank cell. Really bad code here. Even uses center tags which aren't valid in XHTML.

    If you look at the w3c validator, you have 116 errors in the page. You can't use capital letters for tags or attributes. They should always be lower case. No alt attributes on images. Improper Embedding of elements.

    Try this for the above code:

    HTML:
    <div class="navbuttons">
    <a href="index.php?" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
    <img name="image1" src="/forum/bi2/fldbuttons/homesmall.png" border=0></a>
    
    <a href="search.php?do=getnew" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
    <img name="image4" src="/forum/bi2/fldbuttons/newpostssmall.png" border=0></a>
    
    <a href="http://www.fightlockdown.com" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
    <img name="image5" src="/forum/bi2/fldbuttons/articlessmall.png" border=0></a>
    
    <a href="vbookie.php" onmouseover="image7.src=loadImage7.src;" onmouseout="image7.src=staticImage7.src;">
    <img name="image7" src="/forum/bi2/fldbuttons/vbookiesmall.png" border=0></a>
    
    <a href="search.php?" accesskey="4" rel="nofollow" onmouseover="image9.src=loadImage9.src;"onmouseout="image9.src=staticImage9.src;">
    <img name="image9" src="/forum/bi2/fldbuttons/searchsmall.png" border=0></a><script type="text/javascript"> vbmenu_register("navbar_search",1); </script>
    
    <a href="competitions.php" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
    <img name="image6" src="/forum/bi2/fldbuttons/competitionssmall.png" border=0></a>
    
    <a href="casino.php" onmouseover="image8.src=loadImage8.src;" onmouseout="image8.src=staticImage8.src;">
    <img name="image8" src="/forum/bi2/fldbuttons/casinosmall.png" border=0></a>
    
    Than use CSS to center, set the margins and width for navbuttons.
     
    2 people like this.
  3. plazzman

    plazzman Adept

    Joined:
    May 17, 2009
    Messages:
    180
    Likes Received:
    6
    Haha, as you can see I'm new.

    But thank you SOO much for this. I highly appreciate it.
     

Share This Page