Drop down menu is out of alignment in Internet Explorer. Works in Firefox.
Have a slight problem with a site that i am building. Our drop down menu is lined up in firefox and in dreamweaver. But is out of alignment in internet explorer 7. Pictures attached. We also have an error in the ddmenuitem line 25 in the html. Code for both below. Would appreciate any help! Thank you.
Code:
#sddm
{ margin: 0px 0px;
padding: 0px 0px;
z-index: 30}
#sddm li
{
list-style: none;
float: left;
width:136px;
padding: 0px 0px;
margin: 0px 0px;
font: bold 13px arial}
#sddm li a
{ display: block;
padding: 6px 0px;
margin: 0px 7px;
background: transparent;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: url(../images/redoverlay.jpg)}
#sddm div
{ position: fixed;
visibility: hidden;
padding: 0px 0px;
margin: 0px 0px;
background: #EAEBD8;
border: 1px solid #000}
#sddm div a
{ position: static;
display: block;
width: 150px;
padding: 0px 0px;
margin: 0px 0px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #FFF;
color: #000;
font: 12px Verdana, Geneva, sans-serif}
#sddm div a:hover
{ background: #666;
margin: 0px 0px;
padding: 0px 0px;
color: #FFF}
HTML:
Code:
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 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>
Probably need to set the list margins. Can't help further without the html.
At least 98% of internet users' DNA is identical to that of chimpanzees
Here is the full html code. Thank you.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Super Deluxe Test Page</title>
<style type="text/css">
<!--
body {
background-color: #D7D7D5;
background-image: url();
background-repeat: repeat-x;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
.style1 {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body,td,th {
font-size: 16px;
font-family: "Comic Sans MS", cursive;
}
-->
</style></head>
<center>
<p><img src="images/april09-4_03.jpg" width="954px" height="89" alt="Wittmeier Ford Honda Chevrolet Chico CA"></p>
<table border="0" align="center" cellpadding="0" cellspacing="0" width="954px" background="images/navbar.jpg">
<tr>
<td>
<ul id="sddm" class="menu">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">New Vehicles</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Ford Vehicles</a>
<a href="#">Chevrolet Vehicles</a>
<a href="#">Lincoln Vehicles</a>
<a href="#">Mercury Vehicles</a>
<a href="#">Search All</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Used Vehicles</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Fleet Department</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Parts/Service</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Ford Parts</a>
<a href="#">Ford Service</a>
<a href="#">Chevrolet Parts</a>
<a href="#">Chevrolet Service</a>
<a href="#">Honda Parts</a>
<a href="#">Honda Service</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Body Shop</a>
</li>
<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">About Us</a>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">About Wittmeier</a>
<a href="#">Employment Application</a>
<a href="#">Meh</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">Contact Us</a>
</div>
</li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>
Code:
#sddm div
{
visibility: hidden;
padding: 0px 0px;
margin: 0px 0px;
background: #EAEBD8;
border: 1px solid #000}
#sddm div a
{
display: block;
padding: 0px 0px;
margin: 0px 0px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #FFF;
color: #000;
font: 12px Verdana, Geneva, sans-serif}
Remove the 3 odd closing div tags and add an opening body tag
At least 98% of internet users' DNA is identical to that of chimpanzees
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks