Menu bar invisible in Internet Explorer

Jontmusic — Tue, 03 Nov 2009 17:00:09 +0000

Hi all

I'm using Underground Media's free Minimal store template on our shop at http://jontmusic.myshopify.com/ and are having a design problem:

Whilst the black navigation bar dispays correctly in Safari and Firefox, for some reason it's invisible in all versions of IE, meaning the white menu text is against the white background.

If someone could advise as to what the problem might be I'd be very grateful!

Many thanks,

Lee

Jamie commented

Jamie — Tue, 03 Nov 2009 17:06:49 +0000

My guess is the single error in your page is making ie barf:

<div id="header" class="clearfix">
	<div id="logo">
			<a href=""><img src="http://cdn.shopify.com/s/files/1/0037/4762/assets/logo.png?1256662854" alt=""</a>
		</div>

Your image tag for your logo is not closed.

Jontmusic commented

Jontmusic — Tue, 03 Nov 2009 18:26:11 +0000

Thanks for your suggestion, but having amended the code to

<div id="header" class="clearfix">
	<div id="logo">
			<a href=""><img src="{{ 'logo.png' | asset_url }}" alt="logo" /></a>
		</div>

...this doesn't seem to have fixed the problem...any other thoughts gratefully recieved!

Lee

Caroline Schnapp commented

Caroline Schnapp — Tue, 03 Nov 2009 20:09:23 +0000

Seems like IE requires a bit more specificity here. Some info set for #main overrides with displaying a white background.

Change this:

#main {
	background: #fff;	
	clear:both;
	width: 960px;
	}

To this:

#main {
	background-color: #fff;	
	clear:both;
	width: 960px;
	}

Caroline Schnapp commented

Caroline Schnapp — Tue, 03 Nov 2009 20:11:30 +0000

Also, change this:

#navigate {
	padding: 5px;
	background: url(navbg.jpg);
        height: 42px;
	background-repeat: repeat-x;
        border-bottom: 1px solid #eee;
	text-align: left;
	}

To this:

div#navigate {
	padding: 5px;
	background: black url(navbg.jpg) repeat-x;
        height: 42px;
        border-bottom: 1px solid #eee;
	text-align: left;
	}

Jontmusic commented

Jontmusic — Tue, 03 Nov 2009 20:41:13 +0000

Thanks Caroline, that second change fixed the problem!

And thanks Jamie for trying, you guys are the best :)

Lee

Caroline Schnapp commented

Caroline Schnapp — Tue, 03 Nov 2009 20:50:26 +0000

And thanks Jamie for trying, you guys are the best :)

Yep, and we are not getting paid a cent by Shopify (just FYI). So thanks for the appreciation, Lee.

Jamie commented

Jamie — Tue, 03 Nov 2009 21:22:08 +0000

Good! I see Caroline Gotcha. Glad you got it working!