CSS help is needed

April 17, 2008 12:25 PM

Can I make this work in IE the same as it does in Firefox? Here is the example i need some CSS help with. This works properly in Firefox, but needs some help in IE. Any suggestions?
posted by joelf to Computers & Internet (2 answers total)

The problem is that IE displays a pixel-wide gap in-between the top tabs and the selected drop-down box. The drop-downs work if you move your mouse fast enough so it "jumps" the gap in a rendering frame. So the hack is to just get rid of that gap. I tried looking for something that might be a bit more aesthetically pleasing, so it still lines up, but no luck. Here's the hack:

Change the margin in
#tabs .select :hover .select_sub,
#tabs .current .show
to
margin:-1px 0 0;

It works for me in IE6. I didn't test IE7.

Looking at the HTML, seems like you're getting tangled in the IE conditional hacks. There's no need to re-invent the wheel. You might want take a look at Suckerfish Dropdowns. I'm a fan of HTML Dog's version that cleans it up a bit.
posted by nemoorange at 2:44 PM on April 17, 2008

Response by poster: Thanks, I've got the gap taken care of now.

What I'm specifically looking for is the ability to make it display in a dropline, like it does in FF and not in a dropdown. I talked to Stu the guy who came up with the original and he said it's because I don't have a PX width on the submenu.

I think that this will be a case where I will have to investigate javascript solutions. Thanks for your help all the same.
posted by joelf at 8:46 AM on April 18, 2008