I'm developing a website that's part DIV and part TABLE structured due to the e-comms software it will be integrated into.
At the top of the page there's a DIV containing several images that are TAB links. I'm just wondering if I have a bug in my mark-up, as without the following:
Code:
div#navigation { clear:both;}
div#navigation img { float:left; width:53px; }
The HTML the CSS controls is:
Code:
<div id="navigation">
<a href="#" target="_self" title="Home Page link"><img src="images/tabs/welcome_but_on.gif" alt="Home Page link" border="0" width="54" height="33" /></a>
<a href="#" target="_self" title="Stands and Brackets link" onmouseover="document.images.stands.src='images/tabs/stands_brackets_but_on.gif';" onmouseout="document.images.stands.src='images/tabs/stands_brackets_but_off.gif';"><img src="images/tabs/stands_brackets_but_off.gif" name="stands" alt="Stands and Brackets link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Cables link" onmouseover="document.images.cables.src='images/tabs/cables_but_on.gif';" onmouseout="document.images.cables.src='images/tabs/cables_but_off.gif';"><img src="images/tabs/cables_but_off.gif" name="cables" alt="Cables link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Mics and Mixers link" onmouseover="document.images.mics.src='images/tabs/mics_mixers_but_on.gif';" onmouseout="document.images.mics.src='images/tabs/mics_mixers_but_off.gif';"><img src="images/tabs/mics_mixers_but_off.gif" name="mics" alt="Mics and Mixers link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="iPod Accessories link" onmouseover="document.images.ipod.src='images/tabs/ipod_but_on.gif';" onmouseout="document.images.ipod.src='images/tabs/ipod_but_off.gif';"><img src="images/tabs/ipod_but_off.gif" name="ipod" alt="iPod Accessories link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Telephone Accessories link" onmouseover="document.images.telephone.src='images/tabs/telephone_but_on.gif';" onmouseout="document.images.telephone.src='images/tabs/telephone_but_off.gif';"><img src="images/tabs/telephone_but_off.gif" name="telephone" alt="Telephone Accessories link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Speakers link" onmouseover="document.images.speakers.src='images/tabs/speakers_but_on.gif';" onmouseout="document.images.speakers.src='images/tabs/speakers_but_off.gif';"><img src="images/tabs/speakers_but_off.gif" name="speakers" alt="Speakers link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Headphones link" onmouseover="document.images.headphones.src='images/tabs/headphones_but_on.gif';" onmouseout="document.images.headphones.src='images/tabs/headphones_but_off.gif';"><img src="images/tabs/headphones_but_off.gif" name="headphones" alt="Headphones link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="PC Accessories link" onmouseover="document.images.pc.src='images/tabs/pc_but_on.gif';" onmouseout="document.images.pc.src='images/tabs/pc_but_off.gif';"><img src="images/tabs/pc_but_off.gif" name="pc" alt="PC Accessories link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="White Goods link" onmouseover="document.images.wgoods.src='images/tabs/white_goods_but_on.gif';" onmouseout="document.images.wgoods.src='images/tabs/white_goods_but_off.gif';"><img src="images/tabs/white_goods_but_off.gif" name="wgoods" alt="White Goods link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Remote Controls link" onmouseover="document.images.remotes.src='images/tabs/remote_controls_but_on.gif';" onmouseout="document.images.remotes.src='images/tabs/remote_controls_but_off.gif';"><img src="images/tabs/remote_controls_but_off.gif" name="remotes" alt="Remote Controls link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Aerials link" onmouseover="document.images.aerials.src='images/tabs/aerials_but_on.gif';" onmouseout="document.images.aerials.src='images/tabs/aerials_but_off.gif';"><img src="images/tabs/aerials_but_off.gif" name="aerials" alt="Aerials link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="AV Switching link" onmouseover="document.images.av.src='images/tabs/av_switching_but_on.gif';" onmouseout="document.images.av.src='images/tabs/av_switching_but_off.gif';"><img src="images/tabs/av_switching_but_off.gif" name="av" alt="AV Switching link" border="0" width="53" height="33" /></a>
<a href="#" target="_self" title="Misc link" onmouseover="document.images.misc.src='images/tabs/misc_but_on.gif';" onmouseout="document.images.misc.src='images/tabs/misc_but_off.gif';"><img src="images/tabs/misc_but_off.gif" name="misc" alt="Misc link" border="0" width="53" height="33" /></a>
</div>
All the images in the DIV have space around them and don't display close-up as they currently do (and need to) in the design.
Is it ok to use the above? or am I hiding a potential display problem for older broswers?
The site can be viewed at:
http://www.mediamole.net/vivanco/mastertemp/index.html
Gaz
DIV nav problem
