CSS drop menu

[oracle128]

Attached is a site I'm working on. The CSS drop menu works fine, except with the drop menu under "Products", the items have a varying width (instead of the 150px specified in menu.css->table.menu), and the left and right parts of the tab image are cut off. As soon as you scroll over an item, it appears fine, even after mouse out - until the menu is closed and opened again. Tested with IE7 and Firefox 2.0, this error only occurs in FF, and I'll be buggered if I can find out what's causing it.

[Buzz]

There's even bigger issues in FF and Safari on the Mac.

You've got a lot of code that you really don't need. And with CSS you don't need the javascript either.

Check this thread for helpful tips on CSS dropdown menus

http://www.cybertechhelp.com/forums/showthread.php?t=140574&highlight=CSS+Menu

[oracle128]

Well, it looks like I'm going to be rewriting the whole menu. So's I steal the code from here (http://www.seoconsultants.com/css/menus/tutorial/) and put it in a page, just to test it out, and lo, it works fine in FF but not at all in IE7. If it's stuffing up now, I dread to think what might happen once I add more menu items and try to give them the 'tab' background images...

EDIT: It's broken in FF too. The writing on the horizontal menu extends past the button's width.

EDIT2: And also, how would I center this one on the page, like the first version? It seems to be ignoring my calls for auto-size left and right margins (except IE, where it all goes to crap).

[Buzz]

It's just a lot of positioning stuff. You've got to figure the width of the items and use padding to allow enough vertical space to display an image.

Here's your HTML (well I edited the IE stuff in the header, but that's it) and with a new style sheet completely

http://www.weichertcreative.com/test/menu3/

I really find it easier to code for Safari/Firefox first, then adjust for IE7, then for IE6.

As for centering the menu, thats got to be done with margins or positioning of the main div because the menu items are all set to float.

zip includes psd for background image.

[oracle128]

Thanks, I'll have to take a look at it tomorrow. I have been coding for FF with IE secondary, but my boss only uses IE, so I need to constantly keep it working there or he sees no progress. Also, your example doesn't work in IE either, the menu's not centered (far left) and the popups don't work. Maybe that .htc doesn't work in IE7? And yet, it works on the tutorial site...

Mine's even worse in IE, it has each menu item on a new line, not horizontal. I think that maybe because of the tables I'm using for the tab effect, which I can't avoid - the main menu items have to be individually expandable, but the drop down menu and sub-menu popout have tobe fixed size, 150px and 100px respectively.

[Buzz]

hmm it works in IE6, FF/Win, FF/Mac, & Safari here. I didn't test IE7

The positioning is to the left in IE6 because, as I posted, you need to sue specific positioning or margins for the containing div in order to position it. I didn't bother filtering for IE6 positioning.

Wasn't trying to do it for you.. just show you an example of how it can be done.

[oracle128]

The positioning is to the left in IE6 because, as I posted, you need to sue specific positioning or margins for the containing div in order to position it. I didn't bother filtering for IE6 positioning.That's the thing, it needs to be centered in the middle of the page, but it needs to be expandable, and it needs to be in he middle of a screen-wide border (see attached layout image). I can get most of that working cross-browser, and that's without making the header (including navigation bar) and footer fixed, which was a preference - once it's fixed, the header/footer don't expand further than the text within them, and don't center. And of course, it needs to work in both IE6 & 7, as well as Firefox and popular Mac browsers.

[Buzz]

You cancenter it with a surrounding div, a la:

<div id="menu">
<div id="nav">
<ul>
<li> etc.....
</div>
</div>


Then set the div#menu to center via margin and text alignment properties.
You could use percentages rather than pixels or ems to allow the menu items to expand, but with images as well, you're asking a great deal. Not that it can't be done. it'll just take a lot or trial and error.

Off the top of my head...

<ul>
<li><div class="rside"></div><div class="lside"><a href="#">Menu Item</a></li>
</ul>


then add an image to the rside and lside divs and float them right and left.

[oracle128]

You cancenter it with a surrounding div, a la:Tried that. Didn't work in IE7.Then set the div#menu to center via margin and text alignment properties.Tried that too. Unless I specify a margin size (ie. not auto), it doesn't work. I'm trying to avoid specifying a pixel/em-size border, but when using percentages it doesn't seem to match up to the body's margin border edges properly, and the definition of just what it's a percentage of seems to differ between browsers (if I recall, FF is taking the width of the parent element as 100%, whereas IE is taking the width of the document).

You could use percentages rather than pixels or ems to allow the menu items to expand, but with images as well, you're asking a great deal. Not that it can't be done. it'll just take a lot or trial and error.I'll try a few things out. One thing that did come to mind was to use the :before and :after pseudo-classes, which would have worked superbly, had they been supported at all by IE, so that was that idea out.

[oracle128]

OK, here's where I'm at at the moment. The general layout is doing ok, but there are a couple of issues.

1) The requirements have changed, I now need to span the nav bar across the whole area it's been given. It doesn't matter if the individual items on the bar are the same size or not, but the menu and submenu have to stay 150px/100px as they are. No matter what I do, I can't get it to stretch this way. I've tried using width in pixels, ems, percentages and auto, as well as using margins with the same variance of measurements. I've tried applying them to the LIs, the H2s, the TABLE, the middle TD, the DIV #menu and making DIVs specifically for stretching. Mostly they don't do anything at all, the times they do, the result is unexpected and disasterous. But I'm guessing this is an improvement over the many vain attempts to get it centered.

2) It sort of works in IE7. I had to use conditional CSS and JavaScript to get it to work. But, the menu appears as a block element and stretches the bar it's in, and several attempts to use inline or inline-table or a few other displays managed to fix it for the popout sub-menu, but proved futile for fixing the drop menu. Also, it spaces out the items too far, meaning some options are imposible to get to without the menu being closed. I don't know what's causing this, because applying margin:0;padding:0 to the tables, H2s or LIs doesn't fix it.

[oracle128]

Update: I couldn't get any of the CSS-driven drop menus to work while using tables for constructing the tabs. So, I rewrote the whole menu from scratch, using tables for the tabs as well as the general menu layout, positioning with CSS (display:inline-table), driving it with nothing but JavaScript onmouseover/onmouseout events to show/hide the menus/submenus. Yes, I had to resort to JavaScript. Tested it on IE6/7, FF2/Win and Opera9/Win, they all display and animate the menu perfectly, so I'm assuming Konqueror or Safari shouldn't have any trouble with it either. Otherwise, the site is fully navigable without the JS.