In IE6 (on Win 98) the bottom border of the tabbed menu on this page vanishes. I basically haven’t a clue why… the CSS is right afaik… the HTML validates…
The box for your DIV with the #menu rule is not being rendered because MSIE isn’t computing a height for it and you don’t specify one. MSIE is picky about nested DIVs.
I haven’t tried making design that has the appearance of tabs myself yet, wish I could be more helpful.
thank you – I think I can fix it now that I know what’s wrong
Good luck, this won’t be easy. Even if you do manage to make something that works in more than one browser, it will mostly like break the layout if the user scales (zoom) the text size. I use a similar layout on my site, http://openvein.org/ and if you change the text size, the layout still looks fine - in both IE 6 and Mozilla. Of course thats only because I gave up trying to get horizontal borders to overlap.
I managed to come up with a version of your page that did look right in both IE and Mozilla, but it relies on pixel-perfect positioning and if you scale the font size the menu items go all over the place. The idea was to shift the menu DIV to being the first child of the main DIV, and absolute position the menu DIV to render in the margin of the main DIV. Besides the text scaling problem, I had to specify a transparent border on the menu DIV to get Gecko to render it.
I did get it fixed mostly – the lines about 1-2 px higher than it should be on Mos/NS but it looks ok /and/ resizes pretty well (at least for a couple sizes larger – the words start to get cut off in the tabs) I gave upon the neatly nested uls though which drops the text browser ease of understanding
I’m not sure how it looks on a Mac, but 93% of my hits are Windows and 2.7% are Mac…
(the test URL above is defunct – the live version of the page is now at:
with the new layout though the rest of the site isn’t all converted yet)