Display problems in IE6

[jeremyandrebecca67370]

Hello!

Everything is working perfectly with our menu in Internet Explorer 7 and Firefox 3.

http://www.jeremyandrebecca.com

However, apparently in Internet Explorer 6 everything goes wacky. (Menu items are displaying vertically, each the width of their container div, instead of horizontally.)

Can anyone offer suggestions on what to do to resolve this?

Thanks so much!

Jeremy

[Justin Nemeth]

Not sure this is causing the IE6 problem, but I noticed in your #leftColumn there is what looks like an entire webpage in there. It has a doctype, html tag, etc which is breaking the page and might be the culprit. I would fix that as a first step to see if it fixes IE6 in any way.

[jeremyandrebecca67370]

Thanks for your reply!

Good point. This site got a little out of hand, and I failed to scale that back. :-) I got rid of the doctype and other misc info. Unfortunately, I seem to have to keep the html tags as the flash music player won't work without them. Do you think that will cause a problem?

I'm not at a computer with IE6 right now. Did the changes I made so far seem to fix anything?

I'll await any further advice. Thanks for your help.

Jeremy

[Ray Borduin]

It still appears to have the wide columns in the first level. You may have to specify a width attribute for the first row of the menu. If you don't want them to all be the same you can edit the code by hand and add a style tag to the individual elements to set the width. That is what I would try anyway since the issue seems to be the widths going out of whack on ie6.

[jeremyandrebecca67370]

Thanks guys! OK, I've manually set the width for each top level menu element. Everything checks out in my browsers. However, I still don't have access to IE6 to verify the results.

If someone has access to Internet Explorer 6, could you check to make sure the menu is now fixed. (I would imagine it is.)

Thanks again for all your help!

Jeremy

[Ray Borduin]

Very close. Still has some weird coloring issues with a white space in the submenus but at least the page looks right and is functional now.

Try downloading ietester... it is a great free product that will allow you to test with different versions of IE from your computer.

[Ray Borduin]

I think the current problem may be in the height specified:

ul#cssmw0 ul.level-1 > li > a {menu.css (line 98)
background-image:url(../cssmw0_images/subnavBg.png);
background-repeat:repeat;
border-top:1px solid #FFFFFF;
color:#221F1F;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-style:normal;
font-weight:bold;
height:20px;
line-height:20px;
margin:0;
padding:5px 10px;
text-align:left;
text-decoration:none;
text-transform:lowercase;
width:112px;
}

Try changing the heights from 20 to 30 pixels... I think your lines are larger than the settings and IE is still showing it as 20 pixels.

[jeremyandrebecca67370]

Hmmm... I think I'd rather have the lines be 20px high, if possible. But, for now, I have set them to 30px to see if that changes anything.

I'm downloading ietester right now. Anything new visually on your side?

Thanks!

[Ray Borduin]

No that didn't do it. Maybe update the bg image itself and make it taller:

url(../cssmw0_images/subnavBg.png) is currently 5 x 20... maybe if you made it larger.... get ietester and check it out. It will be easier than me viewing and you debugging (pretty amazing we got this far really)

[jeremyandrebecca67370]

:-) True, true...

Got ietester up and running and... Yikes! The whole page is funky. It took me so long to get Firefox and IE to display everything consistently, it scares me to think about what it's going to take to get IE6 happy.

At any rate, for some reason, the drop-down menus are not even showing up in ietester. I'm downloading an actual, old version of IE6 though to see if that improves things.

I'll report back...

Jeremy

[jeremyandrebecca67370]

Never mind, now they showed up in ietester. I see what you're saying. Yeah, I'll try resizing the background image. I'll be back...

Jeremy