The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Drop Down pushes menu over

skip this to get to the issue I'm having ------>
I have this drop down menu that uses two transparent PNG's for the background of the drop down menu. Since they have alpha channels I applied some workarounds to make them work with IE5 and 6. This made it so that the links weren't working. So to fix that I made sure that no positioning was applied to any ul or li except for the links themselves. that means that the position for the drop down list is applied to the containing div.

The issue I'm having ------>
Long story short. My drop down has one problem now. when you scroll over the first set of links the related links drop down but push the menu over to the right. I can't seem to figure out how to make them stay put.

I remember something about having to set position: relative where the filter is applied, but I don't recall where exactly as far as the style rule goes. Have you tried searching the forum (especially Paul O'B's posts on the subject) by any chance?

Yes I've applied that, and it did work. But in doing so I inherited a new problem. that of the drop down list pushing the other menu items over when it drops down. I don't know why this happens and I'm hoping someone can shed some lite on a fix.

Oh brother, I'm noticing a LOT of problems here. Such as mixing unit types, using fractions of unit type values (sorry, but 8.5pt is not a valid unit measurement the last I checked)... hang on. I'm re-writing this bad boy.

Ok, here's a rough "sketch" of how I'd do it. I haven't added the bullets (would be best as background images on the anchors, not separate list items) or the PNG alpha transparency, but this should serve as a solid framework for what you need to do.

There are a couple accessibility issues though. You need to declare a background color on either the list itself or the links so they match the orangish color on the main background image for the menu (I served the huge image as a background on the list rather than as a separate file). Same with the dropdown anchors. And of course, people will not be able to resize the text since you're using points (which I've reproduced here).

Personally, I'd have used CSS sprites for this menu, but that's just me. Let's take a look at the code, shall we?

You'll notice that I inlined the stylesheet, but this was only for demonstration purposes. You'll want to put the stylesheet in an external file, and then set the media type to screen,presentation since Opera will use the projection stylesheet (in this case, the same thing if you declare it) when in "full screen" mode.

For your IE 5/6 stylesheet, it'll be better to declare the conditional check as lt IE 7, rather than lte IE 6. You might be able to get away with removing the conditional comment (and the additional stylesheet and the extra HTTP ping request) by inlining the styles with the * html hack, but I'm not sure if it'll work or not since I didn't try it (I try to avoid PNG filters whenever possible). But since this is a dropdown menu using alpha-transparency PNG images, I'd go ahead and keep the stylesheet in there, but also move the JavaScript file there as well since IE 5 and 6 are the only ones that need it.

Looking at the stylesheet, you'll notice a bunch of HTML elements at the top that have been given properties of "zero margins, and zero padding". I use this instead of the universal selector nowadays (and no I don't type it all out, I just copy/paste from a base template file) since the universal selector will target EVERYTHING, including form controls, which have problems when their margins and padding are stripped from them.

Your body had the various font properties declared via the font shorthand property, which meant having to include the leading (line-height) as well. Since you had it set up for 8pt, I figured 11 should provide good enough contrast for those who can see well enough or are using a real browser capable of actual page zooming (such as Opera - sorry, but I consider IE 7's page zoom to be a half-finished job). Again, I wouldn't use points here (since they're best used for printing) but since I wasn't about to slice up that image and create some sprites for you to use, I decided to strike a deal with the Devil for once.

The menu UL has the ID of "menu" (since that's what it is). It's a menu, doesn't matter what type of course, since it's "just" a menu - it would be nice to just say that's what it is, so I did. The image you were using in the original HTML was served here as a background image, which meant having to give the container a stated height and width. I reduced the declared height and width so I could use padding on the list to push the list items down to where they appeared on your example (gotta love an additive box model, afterall).

Your list items were floated, and given a relative position, so they could contain the nested lists to be positioned absolutely (rather than using display: none; and display: block, which can cause accessibililty problems when used in this manner).

I declared the links in the menus to be display: block; so they'd take up all of the available space in their parents (the floated list items). IE 6 may require setting a height of 1% to cure "hasLayout" but I didn't check - if it does, feel free to just put it in there (in the first instance of the links should suffice).

The submenus have a min-height of 1% declared to get around an IE 7 hasLayout bug as well. I've also declared an explicit height for the submenus as well, but IIRC mixing height and min-height in the same style rule can cause some serious problems. I'm sure there are other ways to force hasLayout, but I'm not going to go looking for them. If there are any, they'll be in the CSS FAQ at the top of this board, and I strongly suggest you use them instead.

Other than that, don't forget to add in the centered bullets (the home page link may require a class to make this work in IE 6), along with active and focus states for the dropdown (you had active in your version, but I omitted it in mine), as well as either an external JavaScript file or a .htc file in your IE 6 stylesheet.

Anything else I may have forgotten or omitted I'll glady accept responsibility for.

You're talking about copying the code I gave you 100&#37; and then not having it work in IE 6? I'm perfectly aware of that. As I said, the menu needs to have the script you were using added (along with the PNG filter). If it's still not working after that, then use the * html hack to apply a 1% height to the dropdown lists.

You also shouldn't mix position: absolute and display: none; in this manner etiher. The positioning simply removes the element from the flow (and positions it off-screen in this case), while display: none; prevents it from being rendered at all - even to screen readers. Use one or the other, but not both (for reasons I've already stated earlier, I'd go with the absolute positioning).

I have learned a lot from you. Thanks for that. But I think I'm going to apply your tips to the current code instead of doing a recode. Hopefully when I clean up my code with your tips the solution will become clear. Clarity through simplification and all.