I thought I had this nailed, but I haven't. So I'm hoping that it is something really simple that I have overlooked, but I don't think it is.

If you go to the site I am working on, in particular these pages:
http://www.johncarrolldesigns.co.uk/new … nates.html
http://www.johncarrolldesigns.co.uk/new … edmdf.html
http://www.johncarrolldesigns.co.uk/newsite/shaker.html
http://www.johncarrolldesigns.co.uk/new … eneer.html

In Firefox, Chrome, IE9 and 10 there is a secondary nav bar (named nav1) that is a red colour below the main nav bar which is the mustard colour. But, If I go onto the site on IE8 on XP or IE10 in developer mode with IE8 standards it is just a normal list. The red nav bar disappears. Is there any reason why this should just vanish?

I have used this snippet of code:<meta http-equiv="X-UA-Compatible" content="IE=edge"> which has sorted all other display issues that I have had in IE8 just not this one.

Also, as a side note, is there a way I can get the list of colours on this page http://www.johncarrolldesigns.co.uk/new … nates.html to appear like it does, but with out a table. I can't figure out the CSS coding to do that.

Thank you

Did you define "nav1" as an element, or was that part of a theme you are using?

You may need to define nav1 as a class in a <nav> element rather than as an element in itself, for it to be recognized as intended by the workaround code you are using for IE.
The <nav1> element does throw an error in the HTML validation.

I'm looking at it, just opened it now. Tried validating, but w3c html validator seems not available for me right now.

The css file has some 20 odd errors, among them saying this is a css 2.1 file and you have used some css3 rules.

That's what I've noticed so far. And I have a wise little programme called IEtester, and the second nav seems wonky in IE7 and 8, but different in those two.

Well, my hunch is this: In css3 there are bunch of new divs and classes which don't have to have the # and the . in front of them. One of those is 'nav', but not 'nav1'. You need to call it .nav1 and refer to it in the html as e.g. div class="nav1". I haven't actually tried this, though, but the browsers that don't understand css3 will of course not display css3 correctly.

If you want to make your site backwards compatible with earlier IE versions, you'll have to go back to the #'s and .'s.

Tested it now, with those changes I suggested, and it works in IE 8, 7 and 6.

All those other css3 styles, like transitions, rounded corners and alpha of course don't work in the mentioned browsers, but that shouldn't bother you as long as you have a working nav bar.

Nice looking site, BTW.

So, Inger, I take it we are in agreement then?

Yep, looks like it! I didn't read your reply properly at first, but I see now that you actually nailed it!

Thank you very much. It is indeed sorted. Still learning CSS and this has helped a lot!

Any idea on what I can do about my side note?

Side note... (looking)... hmmm, can't find what you might call a side note. URL please