CSS and Drop Down Menu problems in IE

Does anyone know of a good CSS forum that I could get some help with a site I’m working on. I have a design that is working really well in Firefox 1.5 but NOT in Internet Explorer 6.

Or is there anyone here with a lot of experience in that area?

My temporary design area is http://modx.acgi.org

- Jeff

Hi Jeff

Without looking in detail I can see you have a number of issues in your css.

for example your ul a are set to display block which is fine but your then floating the topnav li left and have no containing width, then you have li a set as block, but also no containing width, and then you have different background positions depending on the a link state (Active, hover etc) and I have no idea why.

I would take a look at the way horizontal menus are positioned here and compare to your own implementation http://www.alistapart.com/articles/slidingdoors/

This site may be useful to you also http://www.positioniseverything.net/

Well, the sliding door example from A List Apart doesn’t have containing width specified for the li or a tags either. The reason for not having a specified width is that it needs to stretch depending on how long the word are inside. Example: [Home] and [North America] buttons.

Actually I had pulled part of my code from their example. However I made changes so that I could have my buttons states inside a single file. Actualy two files, one for left and right side of the sliding door. But then I shift the image up for the rollover and active states.

Ok you have changed your Li’s from bloc I believe.

I think I did not explain myself very well. if you make Li’s block, then as block level elements they would need a width specified, otherwise the next one would be pushed below. e.g (li display block and float left would need a width specified cos if it was 100% the next LI would be below)

Ideally you would be better of specifying float left on the Li as you have done, then making li a block but use padding to get the tab to display as you wish and use left padding on your li which should contain the left rounded part of the tab image. You need to add float:left; to your li a otherwise in IE it will go full width. The following example will work for you and you should make your two images big enough to allow for text expansion



I dont think there should be a need to use negative margins on background images unless I dont know what you are trying to achieve. The only thing to remember with this layout is that if you use the .here class you will need a way to add the main tab image to that link. li.here will allow you to set the alternative (say darker) left tab image but but you need to wrap something else inside the li such as a em tag so you can display the main tab image in the .here class is likely not to be a link. However there are several ways you could deal with this

Hope that helps

Ok. I seem to be getting much better alignment now in both browsers. But...

TOP MENU

In Firefox the left edge of the button will swap without the text area if hovered in that area. When hovering over the text it swaps out both images fine.

In IE something is still not shifting images properly during the hover.


SECONDARY DROP DOWN MENU

In Firefox the only dislike is a thick bar to the left of the drop down menu items. And the highlight doesn’t extend all the way. Presumably the highlight will fix itself when the thick left bar is reduced to 1px.

In IE The first level of this secondary menu seems to be looking good finaly. BUT, I’m not getting the drop downs at all. I’m guessing something about the javascript isn’t correct, but I don’t know the language.