conditional stylesheet

[tomzo]

Hi Kuroi,

As you guessed it's an IE7 problem I'm having or rather I put in a hack to fix IE6 but since ms have jumped on the standards bandwagon, at last, my hack doesn't work in IE7. Basically without it my nav bar gets upset in lower versions of IE. If you have IE7 check it out, http://www.healingharvest.ie . Maybe theres a different work around? I haven't had a lot of time to sit down and work it out.

The hack:

/* IE hack!! */
html>body #navCatTabs ul {
position:relative;
top:4px;
}

Thanks
T

[kuroi]

I suspect that your problem is rather more basic and probably doesn't need a hack at all. I've looked at your site across a range of browsers and the nav bar is in slightly varying positions on all of them.

The reason for this is most likely that standards specs don't define absolutely everything and when they don't the browser manufacturers fill in the gaps. Sometimes they do the same things, sometimes they do radically different things.

One of the things that do differently is work out how much margin to apply to unordered list (i.e. <ul> tags). So a big part of your problem here appears to be that your menu starts in a different place in each browser. Rather than trying to hack them into alignment, I recommend applying a margin-top value to #navCatTabs ul so that they all start in the same place.

A second problem is that the tabs appear to be slightly different heights across the browsers. The problem here would seem to be that you have defined the height of the div that contains them (#navCatTabsWrapper) in pixels (36px) but have then defined their font-size first as a % (in #navCatTabsWrapper) and then in ems (1.2em) in the anchor tag (<a>) definition. As each of the browsers seems to produce slightly different results when they calculate non-px denominated font sizes, mixing the units is producing small but significant variations between browsers. I recommend using a consistent set of units across all the elements that make up your menu bar.

[tomzo]

Thanks for the help, I was able to clean up the css a lot and avoid using any hacks.

[kuroi]

No Hacks = a great result - well done