Bluehost

My Navigation Bar is Broken in IE7

November 11, 2007 Posted under: Miscellaneous by Caroline Middlebrook

UPDATE – NOW FIXED

Thanks very much to Anna of http://blog.veanndesign.com/ for sending me the code to fix this and thank you also to everybody who replied in the comments. There may have been several solutions; I just happened to check my email before my comments. Thanks again everybody!

This is the code that fixed the problem:

.sidebar { *padding-top:45px;}
#container { *padding-top:45px;}
.topnav { *position:relative; *z-index:90;}

Thanks again to everybody who sent in possible solutions! 

Earlier in the week I discovered that the top navigation bar for this blog does not show up on IE7. Well, technically it does, but then it is quickly overwritten by the content which is supposed to sit underneath it. This is what the top of this blog is supposed to look like:

nav bar working

… and this is how it looks in IE7:

nav bar broken

See? It’s just not there. So, two things then. Firstly if you are viewing this on IE7, go install Firefox! And if that doesn’t work for you here are the links you are missing out on:

Secondly, if anyone knows what the cause might be, or more importantly, how to fix it, please let me know.

I’m not overly worried about it as I intend to get a new theme shortly as I do wish to place some ads / affiliate banners on the blog and this theme really isn’t suited to it. There is a theme that I really want but I am waiting for it to be released which is hopefully happening around the middle of this month.

Still, it’s not good to have broken navigation! And yes I have slapped myself severely for taking two entire months to notice this, especially as I use Firefox on one screen and IE7 on the other!


Want to Make Money Blogging? My free course, The Bloggers Bible contains everything you need to know about building a highly popular and profitable blog from scratch!

Just fill in your email below to get your first lesson immediately:


Post to Twitter Tweet This Post Post to StumbleUpon Stumble This Post


You might also like these similar posts:

Are Your Numbers Dropping? Maybe Somebody Broke the Counter!
Broadband Died, Chain of Daily Postings Broken :(
Become a Blogger $1 Trial & Get FREE Bloggers Bible Course!
Action vs Results Based Goals
Make Money Blogging with The Bloggers Bible

11 Comments:

Alan Hollis
November 11, 2007

Very strange, especially as it displays fine in IE 6. At a guess it is a css display error. Probably not hard to find if you know what your looking for!

Jeff Ballard
November 11, 2007

Hi Caroline!

I am really enjoying your blog posts and I see you soon becoming a blogging success story for us hardcore newbies to emulate.

But, it’s almost as if you’re avoiding making a buck (what’s the phrase in the UK .. do you make a pound?).

Why didn’t you use a FireFox + Google affiliate link through CJ? (Why didn’t I reference you using the FF&G link using MY affiliate link … lazy?)

With the traffic you surely are getting with your wonderful commentary and the notices you are getting in the blogging community you should be making some money almost by accident.

GOOD LUCK & keep it coming,

Jeff
http://www.theflyingpig.ws

Inayaili de Leon
November 11, 2007

It looks like the div that holds your header has a set height of 120px, but the content actually needs more pixels to fit in. You could try and change the css to this:

#header {
height: 165px;
width: 924px;
background-image: url(images/header-bg.gif);
background-repeat: repeat-y;
}

instead of this:

#header {
height: 120px;
width: 924px;
background-image: url(images/header-bg.gif);
background-repeat: repeat-y;
}

And see if it helps… :s

chipseo
November 11, 2007

Caroline, I had the same sort of issue with a nav site on my blog but I fixed it after eliminating various code around the problem area.

I actually had various problems in various browsers, so installed Opera, Netscape, Safari (now in windows format), and of course IE7 and I use FF (all of which show your nav bar fine except IE7, and I assume IE6 and IE5).

It is a good way to take a look at the design.

I had someone even tell me I had a problem with IE4 and IE5, but I can’t even look at it with IE6 since I am using Vista (maybe there is a way).

I will look at the code real quick but I am certainly no programmer, so I probably can’t help much past that, sorry. Scott

Domtan
November 11, 2007

Shot in a dark. Add class=”topnav” to the tag that holds the Top Navigation links.

Domtan
November 11, 2007

That was, add class=”topnav” to ‘ul’ tag. Comment ate it up.

Caroline Middlebrook
November 11, 2007

@Jeff, the answers to all those questions will be revealed in tomorrows blog post!

Anna Vester
November 11, 2007

Thanks for the link. Glad I could help.

:)

Josh Spaulding
November 12, 2007

Firstly if you are viewing this on IE7, go install Firefox

That advice should be printed on every computer in the world ;) IE is slow, bugging and it just sucks!

Glad you got it fixed though.

Ruchir
November 12, 2007

Good to see that you were able to solve the problem. I never use IE, so I wasn’t able to spot the problem. Now that I come to think of it, the last time I used IE was when Firefox was in it’s very early stages — about 2,3 years ago I guess. I don’t know why people use IE. Even Safari is far better than IE…

Mike Huang
November 13, 2007

IE7…you should switch to FIREFOX. I’ve heard nothing but bad things about IE7.

-Mike


Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled


Recommended Services
MyBlogLog Community
Top Commentators
Copyright © Caroline MiddlebrookTheme designed by Design Farmer

Twitter links powered by Tweet This v1.6.1, a WordPress plugin for Twitter.