Navbar display issues in IE

[johndove]

Hi,

Please see url http://testing.backstageweb.net/. In IE 9, looks fine.

In IE 8, navbar background is missing.

In IE 7, navbar background is missing and the logo is way off to the right.

??

Thanks,

John

[SB65]

Looks like at least part of the problem is here:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You're using HTML5 elements, which IE8 and under don't recognise. The js file here should sort that, but the src attribute is incomplete - missing http: at the start.

Correct that first and give it another go.

[johndove]

SB,

That exact code is already in the header - ?

[SB65]

Yes, but the src attribute looked like it was missing the initial http:.
In fact, that's not the problem, as that URL does work. The problem lies here in nav.css:

.menu#nav-primary {
	background:url(../images/nav_bkgrnd.jpg)no-repeat;
	/*overflow:hidden;*/
	width:1000px;
	height:145px;
	margin:0;
	}

You'll see there's no space between the url and no-repeat. This is causing IE8 to fail parsing the background styling. Shove a space in there and give it another go.

[johndove]

Sorry, I added "http:" at the start of the source, but didn't fix anything.

[johndove]

Okay, IE 8 looks good.

Logo is still off in IE 7.

[johndove]

I see the problem is with the text align...

[SB65]

Yes, have a try adding:

#logo{text-align:left}

to your css.

[johndove]

text-align:left works for IE, but screws it up in other browsers. Absolute positioning works.

#logo a {
    background: url("../images/logo.jpg") no-repeat scroll 0 0 transparent;
    display: block;
	width: 380px;
	height: 67px;
	left:434px;
	top:82px;
    position: absolute;
    text-indent: -999em;
	z-index:100;
}

[johndove]

Thanks very much for your assistance!