IE with doctype HTML 3.2 on All Levels Menu

[semmel]

1) Script Title:
All Levels Navigational Menu (v3.0)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

3) Describe problem:
Hi.
I can't send a link to the page since it is password protected :-( So I tried to collect as much information as possible.
Here's the deal:
I have a site that I took over that is using a highly outdated and crappy Table structure that requires the doctype to be HTML 3.2 - otherwise the entire site breaks apart...
If I had months of time and permission from the client, I'd probably reprogram the whole thing, but I don't have that option at this time :-(
So, I tried implementing the menu into the site, and it works great on every browser except the usual - IE. The top menu line is fine, just the sub menus are not

Here's what IE does:
1. While the sub menu scrolls out, everything looks good. Once it stops, the right border of any sub menu just disappears.
2. The left border and bottom border of any sub menu do not meet - there is 1 pixel missing.
3. If a sub menu has another sub menu, then the top and bottom gets messed up. The first entry of the first sub menu is OK, but the one below has issues: There is one or two extra pixels in the left border, so it sticks out below. The rollover effect leaves about 2 pixels above the menu entry - this is between the bottom border of the 1st entry and the rollover of the second entry.

I'm 100% aware that this is definitely not the fault of the script :-)
What I'm hoping for, though, is that someone might be able to help me out in finding a way to make it work with this old doctype. I still don't really know what the differences are between them when it comes down to the visible effects.

Actually, I might be able to post an excerpt of the page on one of my own sites - I'll post a link once I got that done.

[semmel]

There we go, this should demonstrate the issue:

http://www.lunds.us/test/testmenu2.php

Again, this issue will only show on IE, currently using IE9.

Thanks!

[jscheuer1]

Yes post a link. What I think I would try is using IE conditional comments to create a supplemental stylesheet.

One question though. Is it the same in all versions of IE? No matter, just that if it's not, two or more version specific stylesheets for IE may be required.

Basically what you would do is after the stylesheet links, add a conditional one for IE as shown:


<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-ie.css" />
<![endif]-->

Create the ddlevelsfiles/ddlevelsmenu-ie.css file, and in it put all the IE specific styles that are needed to correct the menu's appearance.

If the selectors and the properties are the same but with different values as any in the other css files, these will override those in the other files.

If the selectors and/or the properties are different, they will supplement those in the other css files.

In all cases they will only be used by IE.

Anything in the other css files that's not altered by the IE specific stylesheet will still be used by IE. So, you shouldn't need too many styles in the supplemental stylesheet.

This is not a hack. It's a documented feature of the MSIE browsers from version 5 on up.

[semmel]

Hi, John.

Thanks for your reply. The issue I've had is that I can't figure out what changes to make to get the menu to display properly. I have played with the CSS for quite a while before I finally decided to post here, and I'm still experimenting with it.
Once I know which definitions are the ones that cause the issue, I can implement them.
Sorry, I should have specified that I need to know which definitions are the ones that clash here...

[semmel]

Oh, and I just checked - the issue exists at least for IE9 and IE6, and the issues seem to look identical on both versions.

[semmel]

Got a few steps closer - the missing right border is now back in place, but only because the background I'm using is white to begin with...

Additions (which I'll mark "IE ONLY" later):


.ddsubmenustyle, .ddsubmenustyle div{
background: none;
}

.ddsubmenustyle ul{
width: 172px;
}

Not perfect, but the right line is back then.
Still haven't figured out why the sub menus that have sub menus themselves act up with the space inside, gonna keep working with that next.

FYI, I am not updating the code on the test site I quoted above so you can have a look at the original. There's likely a more elegant way of handling what I did...

[jscheuer1]

Working from the original adding just (in the supplemental stylesheet):


.ddsubmenustyle ul{
border-right: 1px solid #000;
}
.ddsubmenustyle li a{
display: inline-block;
}

Looks right for IE 6 through 9.

[semmel]

Hey, nice!
I keep messing with padding, margin and dimensions, and there's the simple solution :-)
At least on my end, there's still one pixel missing in the lower left corner, but I gotta tell ya that I don't care at this point :-)
IE sucks, we all know it, so I won't go into this any deeper...

Never heard of "inline-block" before, I'll research that one, too.

Thanks so much!

[semmel]

FYI, tried the new code on IE versions 6, 7, 8 and 9, and I have not seen any further issues!
Nice solution - thanks again so much!