Hi there fellow members!
I need a bit of help. I am building a website and am using a row of horizontal images and this script as a dropdown menu for each image: http://javascript-array.com/scripts/...rop_down_menu/
Here's the problem:
On FF, it drops down below the image just I want it to; on IE8, it floats to the right of the image, covering the neighboring image up. I am using the exact same CSS and Javascript that they include, but here is my code:
Code:
<!-- Begin Cascade Nav -->
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="780px" bgcolor="001d47">
<ul id="sddm" style="height: 1px">
<li><img src="images/audi.png" border="0" width="50" height="39" alt="Audi Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
<a href="minicooper.html">Mini Cooper</a>
<a href="z3.html">Z3</a>
<a href="z4.html">Z4</a>
<a href="z8.html">Z8</a>
</div>
</li>
<li><img src="images/bmw.png" border="0" width="50" height="39" alt="BMW Windscreens" onmouseover="mopen('m2')" onmouseout="mclosetime()">
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="minicooper.html">Mini Cooper</a>
<a href="z3.html">Z3</a>
<a href="z4.html">Z4</a>
<a href="z8.html">Z8</a>
</div>
</li>
<li><img src="images/cadillac.png" border="0" width="50" height="39" alt="Cadillac Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/ford.png" border="0" width="50" height="39" alt="Ford Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/jeep.png" border="0" width="50" height="39" alt="Jeep Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/mazda.png" border="0" width="50" height="39" alt="Mazda Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/opel.png" border="0" width="50" height="39" alt="Opel Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/pontiac.png" border="0" width="50" height="39" alt="Pontiac Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/saab.png" border="0" width="50" height="39" alt="Saab Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/toyota.png" border="0" width="50" height="39" alt="Toyota Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
<li><img src="images/volvo.png" border="0" width="50" height="39" alt="Volvo Windscreens" onmouseover="mopen('m1')" onmouseout="mclosetime()">
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="audi4.html">Audi 4</a>
</div>
</li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>
</td>
<td width="100%" bgcolor="001d47"></td>
</tr>
<!-- End Cascade Nav -->
I've also attached screenshots to show how it looks on both FF and IE. Please take a look and make recommendations on how I can get the menu to float below the images in IE8, too. Thank you so much!  |
