Menu works in FF, not in IE

Hi I have a quick question. I have a nav menu at http://www.techlimelight.com and it works fine in Firefox but not in IE. The menu in question is the top nav. The submenus do not line up correctly in IE.

Also two minor things that I am sure is easy to fix. First is I would like to have the entire cell be a link and not only the text. For instance if you hover over the "Home" cell the cell will light up but it does not become a link until you hover over the letters Home. Secondly is that the submenus don't line up perfectly to their parent cells. They are offset by a pixel or two to the right (In browsers that display it correctly like Firefox). Minor, I know, but it would look much better properly lined up.

Any help would be much appreciated.
Thanks,
Marc

TOP NAV HTML

<div class="topNavbar">
<div class="topNavHome" align="center">
<p><a class="topNavbar" href="{php}echo SITE_URL;{/php}">Home</a></p>
</div>

<div class="topNavLimelight" align="center">
<p><a class="topNavbar" href="{php}echo SITE_URL;{/php}limelight.php">Limelights</a></p>
<div id="topNav1" class="topNavNormal" align="left">
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight.php">Limelight Home</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Browse</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Search</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight/actions/submit.html">Submit a Limelight</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">What is a Limelight?</a></div>
</div>
</div>
<div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav1', '1');">
<img name="top_nav_limelight1" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg"
onmouseover="flipImage('top_nav_limelight1', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
onmouseout="flipImage('top_nav_limelight1', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
</div>
<div class="topNavNewsContact" align="center">
<p><a class="topNavbar" href="#">News</a></p>
<div id="topNav2" class="topNavNormal" align="left">
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">News Home</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Browse</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Search</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Submit a Story</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">How Does News Work?</a></div>
</div>
</div>
<div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav2', '2');">
<img name="top_nav_limelight2" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg"
onmouseover="flipImage('top_nav_limelight2', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
onmouseout="flipImage('top_nav_limelight2', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
</div>
<div class="topNavNewsContact" align="center">
<p><a class="topNavbar" href="#">Information</a></p>
<div id="topNav3" class="topNavNormal" align="left">
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">About</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Privacy</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Help</a></div>
<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Contact</a></div>
</div>
</div>
<div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav3', '3');">
<img name="top_nav_limelight3" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg"
onmouseover="flipImage('top_nav_limelight3', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
onmouseout="flipImage('top_nav_limelight3', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
</div>
</div>


TOP NAV JAVASCRIPT

// JavaScript Document
function toggleTopNav(id, number) {
var m = 3;
var t = document.getElementById(id);
var f = t.className == 'topNavNormal';
for ( i = 1; i <= m; i++ ) {
document.getElementById('topNav' + i).className = 'topNavNormal';
} // endfor i
if ( f ) {
t.className = 'topNavList' + number;
}
}


TOP NAV CSS

@charset "utf-8";
/* CSS Document */

P
{
padding: 9px;
margin: 0px;
}

a:hover {
cursor: pointer;
}

div.topNavbar
{
font-size: 16px;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;
width: 700px;
font-family: Calibri, "Times New Roman", Arial;
color: #666666;
}

div.topNavNormal
{
display: none;
position: static;
}

div.topNavHome
{
padding: 0px;
font-weight: bold;
vertical-align: top;
width: 115px;
height: 37px;
border-left: 1px #999999 solid;
border-bottom: 1px #999999 solid;
border-right: 1px #999999 solid;
margin-left: 20px;
float: left;
}

div.topNavHome:hover
{
background-color: #F0FBC8;
}

div.topNavLimelight
{
vertical-align: top;
width: 105px;
height: 37px;
border-left: 1px #999999 solid;
border-bottom: 1px #999999 solid;
border-right: 1px #999999 solid;
margin-left: 12px;
float: left;
}

div.topNavLimelight:hover
{
background-color: #F0FBC8;
}

div.topNavNewsContact
{
vertical-align: top;
width: 95px;
height: 37px;
border-left: 1px #999999 solid;
border-bottom: 1px #999999 solid;
border-right: 1px #999999 solid;
margin-left: 12px;
float: left;
}

div.topNavNewsContact:hover
{
background-color: #F0FBC8;
}

div.topNavLimelight_Toggle
{
width: 20px;
float: left;
}

div.topNavLimelight_Toggle:hover
{
background-color: #F0FBC8;
}

div.topNavList1
{
vertical-align: top;
background-color: #FFFFFF;
width: 125px;
height: 120px;
border: 1px solid #5F7709;
position: absolute;
z-index: 10;
padding-left: 8px;
}

div.topNavList2
{
vertical-align: top;
background-color: #FFFFFF;
width: 150px;
height: 120px;
border: 1px solid #5F7709;
position: absolute;
z-index: 10;
padding-left: 8px;
}

div.topNavList3
{
vertical-align: top;
background-color: #FFFFFF;
width: 125px;
height: 95px;
border: 1px solid #5F7709;
position: absolute;
z-index: 10;
padding-left: 8px;
}

div.topNavListItem
{
width: 155px;
margin-top: 5px;
margin-bottom: 5px;
font-size: 14px;
}

a.topNavListItem
{
color: #999999;
}

a.topNavListItem:hover
{
color: #666666;
}

a.topNavbar
{
font-size: 16px;
color: #666666;
font-weight: bold;
}

Try something like the code below to make the div a link
<div class="topNavListItem" onclick="window.location('{php}echo SITE_URL;{/php}limelight.php');" style='cursor:hand;' ><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight.php">Limelight Home</a></div>

As for positioning problems etc its usually a good idea to start your stylesheet with
div{
margin:0;
padding:0;
}
or something along those lines to stop different browsers applying different defaults for padding & margins.

Actually, it would be :

* { margin:0; padding:0; }

to target all elements on the page, and

* html { margin:0; padding:0; }

to target all elements on a page for IE only.

Thanks guys, I tried all the methods outlined above but they didn't change anything. Wrapping the link in a div tag with an onclick event seems like it should work but dosn't change anything. This problem with the IE submenu alignment is killing me. Is the method I used to code the menu a good one? Should I do something differently? Any other ideas?

Thanks again for responding,
Marc

What version of IE do the menus not work in? Also you have some whitespace before you doctype that could be causing your problems. NO whitespace should come before the doctype.

I havn't tested the menu in IE6, but I know they don't work in IE7. I've been fiddling with this for a while and I can't for the life of me figure out what's wrong. Here's the code for the index that declares the doctype:


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$pageTitle}</title>
<link href="{php}echo SITE_URL;{/php}css/style.css" type="text/css" rel="stylesheet" />
<link href="{php}echo SITE_URL;{/php}css/top_nav.css" type="text/css" rel="stylesheet" />
<link href="{php}echo SITE_URL;{/php}css/limelight.css" type="text/css" rel="stylesheet" />
<link href="{php}echo SITE_URL;{/php}css/lert.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/main.js"></script>
<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/ajax.js"></script>
<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/top_nav.js"></script>
<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/lert.js"></script>
</head>
<body>

<div align="center">
<div style="width: 1015px">
<div id="header">{include file="header.tpl"}</div>
<div id="left_Column">{include file="left_column.tpl"}</div>
<div id="body_Content">{include file="body_content.tpl"}</div>
<div id="left_Column_End"></div>
<div id="body_Content_End"></div>
<div id="bottom_Nav">{include file="bottom_nav.tpl"}</div>
</div>
</div>

</body>
</html>


top_nav is included in the body_content. And for some reason I still can't figure out how to make the main menu cells (ie "Home", "Limelight" etc) linkable. I tried the obvious, adding an onclick event to the div tag making up the cell and it didn't work for some reason.

Thanks

Anyone?

My response to this post might shed some light on your problems:

http://www.codingforums.com/showthread.php?t=126059