I am working on a client’s site and I am having trouble with their menu in IE7. The dropdown works in everything, but that browser and I am sure it is a minor bug I am over looking.
These are the files controlling the Menu
http://www.liteworksms.net/css/default.css
http://www.liteworksms.net/css/style.css
The menu also uses Javascript to control the rollover, but I don’t think that is the issue. Here is the code for it anyway:
http://www.liteworksms.net/js/chrome.js
Thank you in advance
Hi,
You need to fix your html errors first.
You have two doctypes on that page, It looks like you tried to nest a page within a page. 
Major errors are on line 127-139
I have fixed the nest html issue, however the menu problem still persists. Could it be the html doctype I am specifying to the browsers?
The other errors are caused by something that if I remove them or change them, the document doesn’t appear the same.
I have fixed the nest html issue, however the menu problem still persists.
Right, but the extra doctype needed to be removed before going any further.
Let me take another look at IE7 now
Thank you so much for looking into it!
That seems to be a pretty bad menu in general, it may be a script problem with IE7, not sure. It looks like you got it from Dynamic Drive, there stuff is notorious for having problems.
You would be much better off using a true nested list for your dropdowns.
If you wanted the roll out effects you could use the superfish menu. The benefits of using a nested list is that you do not need to rely on js for the menu to work. You can use the [URL=“http://www.css-lab.com/demos/nav/sf-drpdwn.html”]dependable suckerfish method to hide and show your dropdowns.
That superfish menu uses js for the animated effects but it works as a regular suckerfish with li:hover when js is disabled.
Hi again,
The problem with IE7 is twofold. That double relative shift method your using to vertical-align the text (since IE7 has no support for display:table) along with the overflow:hidden on the parent div has caused the problems
Those styles are inline in your html, you have added an ID sign to the properties which is invalid.
Scroll to the right
<div id="navbar"> <div class="middlealign" style="[B]display: table;[/B] height: 36px; #position: relative; [COLOR=Red]overflow: hidden;[/COLOR] width: 100%;">
<div style=" [COLOR=Red][B]#[/B]position: absolute; [B]#[/B]top: 50%[/COLOR];[B]display: table-cell;[/B] vertical-align: middle;">
<div class="middlealign" style=" [COLOR=Red][B]#[/B]position: relative; [B]#[/B]top: -50%[/COLOR]">
When I remove the overflow:hidden I can see the dropdowns in IE7 but the positioning is still off with the 50/-50 shift.
You need to float the anchors left also so they will take on the 36px height.
That is a pretty poor way to set up that menu and I’m not sure if that is how it came from Dynamic Drive or if that was done later. Honestly I would ditch it all and start over without the display:table and stray dropdown divs.
Thank you. I changed everything over to SuperFish and it works beautifully now. I can not say how much I appreciated your help on this!