Tableless wiicked - hovermenu issue

[inlinewout]

Hi there,

I am working over the Wiicked skin to be tableless. I've come a long way, but keep stumbling on one big issue.

The subcategories of the hovermenu keeps getiing behind behind the images (or more exactly the next div's) in Firefox and IE6. In IE7 everything works smoothly.

What have I done so far:

Placed the menu within a div tag that has a z-index value that's lower than the one of the images. No result.
I've also added z-index values to it's styles in the menu.css but without result.
Tried to move the images in de Wiicked_1 file, above the menu. Then placing the menu physically above the images by using a margin-top:minusxxx value. This puts the menu back in the right place, but the subcategories still dissapear behind the images.


Does anyone know how to get this menu properly working a tableless design?

Best regards,

Wout

[Robert_J_Ellis]

this might help:
display:block;

[inlinewout]

No, tried it, but it doesn't do the trick.

Here's the css I used. It's online for testing at www.skeeler.info.

#body_menu {display:block;height: 21px; vertical-align:middle; white-space:nowrap; text-align:center; width:810px; text-align:justify; z-index:10;}

/*-- below is where the css of the pictures start (tjis line was added for the forum post only)--*/

#groene_balk {width:810px; position: relative; margin-top:6px; height:6px; z-index:3; background-image:url(http://www.skeeler.info/skins/wiicked/images/wii_header_1.jpg);}
#body_logopanel {width:810px; position: relative; height: 116px; border:0; z-index:12; background-image:url(http://www.inline-skate.nl/skins/wiicked/images/wii_banner.jpg);}


The thing is that I want to keep the coding simple and clean. I could always start the skin with one or two tables, but the outdated tables are exactly what I want to get rid of.

Suggestions welcome!

Wout

[Robert_J_Ellis]

You need one table, there is no substitute. The reason being is placement, and interactivity with both menu items and content.

Take a look at my menu here for pointers, I built it, and it is original.
http://www.sddepot.com/sharkmv1/

Though you could use float:left; you will ultimately be left with triggering issues in early versions of opera, and mac ie 5. The amount of users using mac ie 5 is rediculous.

You see the thing is ie5 (win) and ie5(mac) require a little bit of javascript, though I think divs are great they have their uses, but I believe most times in unison with tables. The finest quality of a skilled web designer, or for most things is comprimise, except that of workmanship.

ie7 does not like css hacks, ie5 does, ie5 mac has problem with float techniques, mozilla needs adjustment. As you can see, in my menu system In no way have I discounted divs, yet I have worked around their limitations.

[inlinewout]

Robert,

Thanks for the info and the example.

For now I put this one table back in place, which I close again at the top of the document. However I will look at it later again, as I aim at getting the design tablefree. I see the idea working in the recipe skin, although I don't know why yet.

To be continued at my end...