Help!! Cross Browser Problems!!

[The Dentist]

Hi All,
I have created a drop down menu bar on my site that I think looks great in IE, however in anything else (Chrome, Safari, etc) it looks awful, with my limited knowledge I have tried and tried to fix this in the code however I have failed

Now I turn to all of you and plead that somone out there can help point me in the right direction

Please find my site:

www.sparesworld.co.uk

Here is the HTML for the bar:
<table width="944" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="6" bgcolor="#2B424A" scope="col"><img src="images/spacer.gif" width="944" height="6" border="0" alt=""></th>
</tr>
</table>
<table width="944" border="0" cellspacing="0" cellpadding="0">
<tr>
<ul id="sddm">
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="10%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_sap.html"onmouseover="mopen('m1')" onmouseout="mclosetime()"><span class="style26">STYLING &amp;<br>PERFORMANCE</a></span>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<ul>
<li><a href='Richbrook_Styling_Products.html' >Richbrook Styling</a>
<a href='PERFORMANCE_LIGHTING.html' >Performance Bulbs</a>
<a href='sap_filters_universal.html' >Universal Fit Filters</a>
<a href='sap_suspension_lowerkits.html' >Lowering Kits</a>
<a href='INTERIOR_STYLING.html' >Interior Styling</a>
<a href='EXTERIOR_STYLING.html' >Exterior Styling</a>
<a href='EXHAUSTS___TRIMS.html' >Exhausts &amp; Trims</a>
<a href='HORNS.html' >Horns</a></li>
</ul>
</div></th>
</li></th></th>

<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="6%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_aw.html"onmouseover="mopen('m2')" onmouseout="mclosetime()"><span class="style26">ALLOY<br>WHEELS</a></span>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='15__WHEELS.html' >15" Wheels</a>
<a href='16__WHEELS.html' >16" Wheels</a>
<a href='17__WHEELS.html' >17" Wheels</a>
<a href='18__WHEELS.html' >18" Wheels</a>
<a href='19__WHEELS.html' >19" Wheels</a>
<a href='away_locking_wheel_bolts.html' >Locking Wheel Bolts</a>
<a href='awat_alloy_wheel_cleaners.html' >Alloy Wheel Cleaners</a>
<a href='ALLOY_WHEEL_ACCESSORIES.html' >Alloy Wheel Accessories</a>
<a href='CALIPER_PAINT.html' >Caliper Paint</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="6%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_ca.html"onmouseover="mopen('m3')" onmouseout="mclosetime()"><span class="style26">CAR<br>AUDIO</a></span>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='ca_in_car_stereos.html' >In Car Stereos</a>
<a href='ca_speakers.html' >Speakers</a>
<a href='ca_amps.html' >Amps</a>
<a href='ca_subs_boxes.html' >Subs And Boxes</a>
<a href='ca_installation_accessories.html' >Installation Accessories</a>
</ul>
</div></th>

</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="9%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_ict.html"onmouseover="mopen('m4')" onmouseout="mclosetime()"><span class="style26">IN CAR<br>TECHNOLOGY</a></span>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='ict_satnav.html' >Sat Nav &amp; Camera Detectors</a>
<a href='ict_parking_sensors.html' >Parking Sensors</a>
<a href='ict_in_car_multimedia.html' >In Car Multimedia</a>
<a href='ict_power_inverters.html' >Power Inverters</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="9%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_tat.html"onmouseover="mopen('m5')" onmouseout="mclosetime()"><span class="style26">TOWING &amp;<br>TRAILERS</a></span>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='tat_trailers.html' >Trailers</a>
<a href='tat_trailers_accessories.html' >Trailer Accessories</a>
<a href='tat_towbars.html' >Tow Bars</a>
<a href='tat_caravan_covers.html' >Caravan Covers</a>
<a href='tat_towing_accessories.html' >Towing Accessories</a>
<a href='copy_of_DRIVING_ABROAD_ESSENTIALS.html' >Driving Abroad Essentials</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">

<li>
<th width="10%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_cycles.html"onmouseover="mopen('m11')" onmouseout="mclosetime()"><span class="style26">CYCLES<br>ACCESSORIES</a></span>
<div id="m11" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='CYCLES.html' >Cycles</a>
<a href='GENERAL_ACCESSORIES.html' >Cycle Accessories</a>
<a href='cyc_LIGHTING.html' >Lighting</a>
<a href='cyc_SERVICING_PRODUCTS.html' >Servicing Products</a>
<a href='cyc_SAFETY_PRODUCTS.html' >Safety And Security</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">

<li>
<th width="10%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="VEHICLE_MAINTENANCE.html"onmouseover="mopen('m12')" onmouseout="mclosetime()"><span class="style26">VEHICLE<br>MAINTENANCE</a></span>
<div id="m12" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='SW_MAINTENANCE.html' >Maintenance</a>
<a href='ga_footpumps_aircompressors.html' >Pumps &amp; Compressors</a>
<a href='ga_liftequip_axlestands.html' >Jacks &amp; Stands</a>
<a href='ga_battchargers_powerpacks.html' >Chargers &amp; Power Packs</a>
<a href='SW_Jump_Leads.html' >Jump Leads</a>
<a href='ga_electrical_accessories.html' >Haynes Manuals</a>
<a href='ga_tools.html' >Draper Tools</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="8%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_sp.html"onmouseover="mopen('m6')" onmouseout="mclosetime()"><span class="style26">SECURITY<br>PRODUCTS</a></span>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='sp_alarms_immobilisers.html' >Alarms &amp; Imobilisers</a>
<a href='sp_in_car_security.html' >In Car Security</a>
<a href='sp_wheel_clamps.html' >Wheel Clamps</a>
<a href='sp_leisure_security.html' >Leisure Security</a>
<a href='sp_cycle_security.html' >Cycle Security</a>
<a href='sp_motorcycle_security.html' >Motorcycle Security</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="10%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_ga.html"onmouseover="mopen('m7')" onmouseout="mclosetime()"><span class="style26">GENERAL<br>ACCESSORIES</a></span>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='Wheel_Trims.html' >Wheel Trims</a>
<a href='heavy_duty_seat_covers.html' >Heavy Duty Seat Covers</a>
<a href='BOOSTER_SEATS.html' >Child Booster Seats</a>
<a href='Seat_Covers.html' >Seat Covers</a>
<a href='CAR_MATS.html' >Car Mats</a>
<a href='HARNESS_PADS.html' >Harness Pads</a>
<a href='STEERING_GLOVES.html' >Steering Gloves</a>
<a href='12V_IN_CAR_ACCESSORIES.html' >12v In Car Accessories</a>
<a href='copy_of_copy_of_copy_of_Dog_Guards.html' >Dog Guards</a>
<a href='ga_spotlights_lighting.html' >Spot Lights &amp; Lighting</a>
<a href='ga_interior_accessories.html' >Interior Accessories</a>
<a href='ga_exterior_accessories.html' >Exterior Accessories</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="7%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_cp.html"onmouseover="mopen('m8')" onmouseout="mclosetime()"><span class="style26">CLEANING<br>PRODUCTS</a></span>
<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='cp_interior_cleaning.html' >Interior Cleaning</a>
<a href='cp_exterior_cleaning.html' >Exterior Cleaning</a>
<a href='SCRATCH_REMOVERS.html' >Scratch Removers</a>
<a href='cp_cleaning_accessories.html' >Cleaning Accessories</a>
<a href='AUTOGLYM_PRODUCTS.html' >Autoglym Products</a>
<a href='MEGUIARS_PRODUCTS.html' >Meguiars Products</a>
<a href='Kent_Products.html' >Kent Products</a>
<a href='DEGREASERS.html' >De Greasers &amp; Hand Cleaners</a>
<a href='SCREENWASH.html' >Screen Wash</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="7%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_oaa.html"onmouseover="mopen('m9')" onmouseout="mclosetime()"><span class="style26">OILS &amp;<br>ADDITIVES</a></span>
<div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='oaa_engine_oils.html' >Engine Oils</a>
<a href='oaa_gearbox_oils.html' >Gearbox Oils</a>
<a href='oaa_oil_products.html' >Other Lubricants</a>
<a href='oaa_oil_additives.html' >Oil Additives</a>
<a href='oaa_fuel_additives.html' >Fuel Additives</a>
<a href='oaa_brake_fluid.html' >Brake Fluid</a>
<a href='ADHESIVES___SELANTS.html' >Adhesives &amp; Sealants</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<li>
<th width="12%" height="15" background="images/sw_bg_nav_repeat.gif" scope="col">
<a href="sw_lp.html"onmouseover="mopen('m10')" onmouseout="mclosetime()"><span class="style26">LEISURE<br>PRODUCTS</a></span>
<div id="m10" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"></li>
<ul>
<a href='lp_handy_racks.html' >Handy Racks</a>
<a href='ROOF_BARS.html' >Roof Bars</a>
<a href='ROOF_BOXES.html' >Roof Boxes</a>
<a href='lp_cycle_carriers.html' >Cycle Carriers</a>
<a href='lp_caravan_accessories.html' >Caravan Accessories</a>
<a href='DOG_GUARDS.html' >Dog Guards</a>
<a href='lp_leisure_batteries.html' >Leisure Batteries</a>
<a href='DRIVING_ABROAD_ESSENTIALS.html' >Driving Abroad Essentials</a>
</ul>
</div></th>
</li></th></th>
<th width="1" background="images/sw_nav_main_vert_div.jpg" scope="col"><img src="images/spacer.gif" width="1" height="15" alt="">
<th bgcolor="#1C2021" scope="col"><img src="images/spacer.gif" width="1" height="15" alt=""></th></th>
</ul>
</tr>
</table>

And the script:
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>

And the CSS
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
z-index: 30}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
z-index: 30;
width: 60px;
background: #2B424A;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #2B424A;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #2B424A;
color: #FFF;
font: 14px Verdana}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}


Please any help would be most greatfully accepted.

[DaveH]

I'm not a css guru, just a beginner, but you are using visibility:hidden, where you may get better results using display:none

Some info here: http://www.w3schools.com/css/css_display_visibility.asp

[IanSaunders]

Sorry Paul, I can't spare the time hunting down rendering bugs with you, but I can tell you that in Firefox/Firebug I hid the top menu (the yellow/orange one) and everything else fell into place and looked pretty close to the IE rendering. Try commenting it out in the code to see what I mean. I also note it's constructed using tables, so I'm rather unfamiliar with the method your're using.

An alternative might be to look up another way of displaying this menu - typically you'd use unordered lists <ul> tags and style using CSS. One of the original implementations of this was called "suckerfish", so that might help with your searches.

It's worth downloading a few browsers so you can check your work. Firefox, Safari, Opera and Chrome are all free downloads, and there are good plugins for them to help with design and development (eg Firebug for Firefox).

Hope this helps.

[Sean Williams]

No expert of course, but the total percentage of table widths in that orange drop-down navbar adds up to 104%.
No idea if that's relevant ....

[The Dentist]

Hi DaveH thanks for the ideas however this did not give the required results. I only get a day a week on the site as I have a shop to run also. Will keep working at it until its cracked.

Thanks to all of you for your suggestions also!