Help with site - Rollover menu in IE

Hello everyone,

This is my first post here, and my first experience with coding a website for business use.

Anyways, the rollover menu of my site (www.handytax.ca) has problems with how it renders in IE. It seems to work fine in every other browser, with minor issues in Opera.

Is there any code I can use to mitigate the problem with IE (I know that they are extremely poor when it comes to meeting web standards.)

Thanks in advance and hope to be a productive of this forum.

P.S. here is the CSS code

#container {position:relative;
width: 700px;
height: 30px;
padding: 0;
margin: 25px 0 25px 0;}

#nav {
position: relative;
top: 0px;
left: 0px;
list-style: none;
margin: 0;
height: 50px;
display: inline;
overflow: hidden;
width: 201px;
font-family:Arial, Helvetica, sans-serif; font-size:14px
}

#nav li {
margin-left:6px;
margin-right:6px;
display:inline;
list-style-type: none;
margin
}

#nav .sub {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none}


#nav li:hover {position:relative; z-index:100;}
#nav a:hover {position:relative; white-space:normal; z-index:100;}

#nav :hover ul.sub
{left:0; top:12px; width:170px; height:auto; z-index:100;}
#nav :hover ul.sub li
{display:block; height:46px; position:relative; width:170px; font-weight:normal; background-color:#FFA497; margin:2px; font-size:16px; z-index:10;}

You dont say what your problem is specifically. Please describe what your having issues with and what your desired outcome should be. But after trying to validate your code, you have a few errors which may be causing some problems. One in particular is your naming convention for your div id's. You have one named "nav id" which I think is throwing an error because you have a space in your name. Rather htan use something like "nav id" use something like <div id="navBar"> or some other name with no spaces and ideally without the use of "id" in the name itself. There are other issues you should fix, and you can validate your code here (http://validator.w3.org)to work through them.

The problem should be visible when the site is visited through IE. The submenus show up in the desired spot (dierctly underneath the menu heading) only when the IE window is kept small in relation to Windows (known as restored). When it is maximized, the submenus show up far to the right.

Could have something to do with absolute and relative positioning.

What's your IE version?

The problem should be visible when the site is visited through IE. The submenus show up in the desired spot (dierctly underneath the menu heading) only when the IE window is kept small in relation to Windows (known as restored). When it is maximized, the submenus show up far to the right.

Could have something to do with absolute and relative positioning.

If it was visible, I wouldn't have asked to be more specific...lol At any rate, I viewed your page in IE 8 and firefox with the windows maximized and small. I then viewed your page in IE8 with my screen resolution set at the lowest setting(800x600 i think) and in each case the menus and dropdowns appear correct. The dropdowns appear underneath the navigation link as they should.

You still have coding validation errors in your page that you should still fix first. If you are having some rendering issues, the first thing should always be make sure you have valid code. Please fix the issues and then if you are still having a problem, at least we know its not coming from invalid code. Hope that helps.