Any idea why this dropdown menu doesn't display properly in IE 6?

webbcity posted this at 00:00 — 18th March 2010.

Joined: May 2009

I am totally stumped. Just launched this site and the menu displays correctly in Firefox and Chrome, and newer versions of IE, but not version 6. In IE 6, it's totally out of whack-- the menu items are extremely wide, stacked vertically instead of displayed horizontally, and the dropdowns don't work at all. Here is the link:

http://triumphcenter.net/

It's a WordPress-based site, but I figured this was really more of a CSS/HTML question since it's an all-CSS dropdown menu plugin. I've attached the CSS file for the menu here. I modified the original CSS file that came with the plugin and I'm guessing I went wrong somewhere in doing that.

Any ideas?

Many thanks,
Tim

Attachment	Size
menu.css	8.55 KB

webwiz posted this at 00:57 — 18th March 2010.

He has: 629 posts

Joined: May 2007

The main problem is the height set in this rule:
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; height:30px; background:#28903a; padding-left:10px; padding-right:10px; line-height:29px; font-weight:bold;}
(menu.css line 19)

This gives "layout" to the link - a "feature" that creates as many bugs as it fixes, in my experience. You don't need this height as far as I can tell.

Congratulations on the markup. The only error seems to be a spurious <ul> at line 57 of the HTML.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

webbcity posted this at 15:46 — 18th March 2010.

They have: 19 posts

Joined: May 2009

Hi David-

Thanks so much for your response! I'll check this out and see if it solves the problem.

Best,
Tim

webbcity posted this at 16:07 — 18th March 2010.

They have: 19 posts

Joined: May 2009

Interesting...removing the height definitely did fix the issue with the position of the menu items, but now there are some additional issues (well, I'm sure they were there before but just weren't visible because of the height issue):

- The background of each top menu item is now showing as blue instead of green...until you visit the link, then it changes to green (?!)

- There is now a small gap between the bottom of each top menu item and the dropdown, making it difficult to select an item from the dropdown menu.

- The dropdown items are all centered.

I have some thoughts on these and will get to work, but would love any additional suggestions/ideas.

Thanks!
Tim

webbcity posted this at 18:18 — 18th March 2010.

They have: 19 posts

Joined: May 2009

Well, now the site is having database issues, so anyone going there won't be able to see it, and I can't work on it. Hopefully it will be resolved soon...

webwiz posted this at 21:01 — 18th March 2010.

He has: 629 posts

Joined: May 2007

Because the drop-down links are generated by the script, I cannot see what styles are being applied by IE 6. However, there seems to be something missing from the menu.css style sheet. I see some "* html" selectors - targeting IE 5 and 6 - that have a missing declaration block after them. There are too many IE 6 hacks to follow, but I do see one rule that sets the background-color to blue in one of them.

That drop-down menu design looks outdated, with all the hacks for IE 5.5 - do you really need to support that? The drop-downs are inaccessible from the keyboard, and visitors cannot even use the top level link, making the site as a whole inaccessible to a whole lot of users. You may like to use a more modern script. Just a suggestion...

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Empress posted this at 10:39 — 19th March 2010.

They have: 6 posts

Joined: Mar 2010

hi...
according to my view, height and width you should mention the correct manner and check it out all the browsers for your coding step by step.you can rectify easily which step you are doing error on the site. this is best way to find out the error immediately.mention the HTML coding for width and height.then its shows good... better choose IE8 and Firefox and some other browsers.in my suggestion don't use IE6. All the best!
{links removed}

web design

webwiz posted this at 15:28 — 19th March 2010.

He has: 629 posts

Joined: May 2007

Empress wrote:

in my suggestion don't use IE6

I don't think Tim has any control over which browser visitors to his site use...

webbcity posted this at 14:59 — 31st March 2010.

They have: 19 posts

Joined: May 2009

Hi David & Empress - thanks for the additional suggestions & sorry for the disappearing act! I got sidelined by another project, but I hope to get back into this soon & sort it all out. I did work out the issue of the gap between the main menu items and the drop-down menu items, that was pretty simple.

Will report back here when I get a chance to jump back into this...

Thanks again!
Tim