More Dropdown Menu IE Woes!

Hello!

I’ve been building a website for a client, and as it happens it’s the first website I’ve built using MODx, or any open-source CMS for that matter. The main reason I took this work was for me to boost my portfolio and familiarise myself with using an open-source CMS as I’ve not been building websites for very long. Here’s the site:

www.draindoctorbirmingham.com

The problem is my dropdown menu. It looks great in IE 8, Firefox, Chrome, Safari and Opera but when it comes to the not-so-compliant IE 7 and below, I have problems. I’ve tried implementing fixes, from the CSS pseudo-element hover fix, to increasing padding on the children <li>’s, all to no avail. I’ve attached a screenshot of what it looks like in IE 7.

I am completely stumped, so I have come here, cap in hand to see if any of you geniuses can help me determine and hopefully fix the problem!

Kind regards,
Mike

Greets,
First, the site looks really excellent for a first MODx effort!

This is definitely a CSS question, though. But I happen to be a CSS enthusiast, and I have an idea for you. This is a very common dropdown menu problem, dropdown items not being tall enough to reach each other, so to speak.

When that happens, you need to delicately balance the height, margins, and padding of the links. Inferior IE generally needs to be told what to do moreso than other browsers. I’m thinking that an explicit link height may help. Take a look at the code below, and note the bolded item. That might be a starting point for you.

.menu ul li a {
color:#FFFFFF;
display:block;
height:17px;
padding:3px 15px 5px;
text-decoration:none;
white-space:nowrap;
}

It’s possible that

might need adjusting, but I think probably not. If all that gives no joy, for CSS problems you can try CSS Creator forum, where I hang out and answer questions.
http://csscreator.com/forum

Hope that helps,
Cheers, Dave

Hi Dave, thanks so much for the quick reply and the positive feedback! I tried your first solution, which basically stopped the whole drpdown menu popping up below the parent <li>’s. I forgot to mention that I did fiddle around with the CSS for hours last night but with no good results.

I’m usually a dab hand at CSS, but this one has really got me! I will try over at CSS Creator now. Thanks again,

Mike.

Mike,
Yeah, that sounds tricky. My code worked fine for Firefox, but I didn’t actually get a chance to test in IE. I don’t see any obvious Javascript wild stuff that could be at fault, so that at least reduces that complication.

For any issue like that, I’ve had to slowly chip away. Not fun. When I do dropdowns now, I tend to follow the recommendations from the book CSS Mastery by Andy Budd and Simon Collison. When I’ve started with that from the get-go, I’ve never failed to get one working, even in rotten IE.

I like the way people talk in Birmingham... very cool! We’ll see you at CSS Creator!
Dave