My test site is at www.vigsm.net , my theme uses ATCK and the top menu looks fine in Firefox, not as good in IE7 (solvable with a smaller font) and absolutely terrible in IE6 - for some reason each li takes up all the room. (I'll deal with the png transparency on the icons later)
I just have no clue what and where the problem is. I can't even find anything relevant when searching (probably because I'm not using the right phrases)

I'd really appreciate any pointer... Thank you!

Comments

Jeff Burnz’s picture

In the page-layout.css file, on "#main_menu li" the width is commented out, if you uncomment that they will display inline again for ie6. You will have to play with the widths to get it right.

You could take a look at the Zen way of doing horizontal tab menus, there's some nice CSS there you can use as pointers, specifically a few IE work arounds such as setting "_width: auto" and "display: inline-block", to help over come issues similar to what you are seeing in your site & ie6.

Athaclena’s picture

I'd rather not have the li in a fixed length, because the contents aren't uniform: "shop" is twice as long as "my account", and there's no room to make it really big enough.
If there's not way to get an "auto" length (as in FF) I'll find the optimal length or even target each li separately . But I'm wondering if there's an answer or just workarounds.

Thanks!

Jeff Burnz’s picture

You can target IE6 using seperate style sheet (with conditional statements), I wrote about recently on this site.

Take a look at how the Zen theme works around this problem.