Some problems with IE and Navbar

[plazzman]

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!

[Wayne Luke]

Really bad unvalidated code there. IE is rendering it correctly according to the code.

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

<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.

[plazzman]

Haha, as you can see I'm new.

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