Navigation bar looks different in Internet Explorer.

I am new to web development. I am in the process of making a website using PHP and MYSQL. I have structured the pages of my website into 3 main divisions.
(1) Header
(2) Content
(3) Footer

The problem that I am facing is in the header portion. Functionality wise my website is working fine. But for some reason it looks very ugly in Internet Explorer(6.0). I have checked it in 3 different browsers. (Chrome, Firefox, and Internet Explorer). In Chrome and Firefox, It looks as expected, but for some reason it looks completely different in Internet Explorer.

Currently This website is in development phase, and not live, so I cannot give you the link of the website, but I can give you the screenshot of the header portion. Following are the two screenshots. The first one is of Mozilla Firefox, and the second screenshot is of Internet Explorer.
[attachment=1]ff.jpg[/attachment]

[attachment=0]ie.jpg[/attachment]

The navigation bar is looking fine in other browsers, but not in Internet explorer. You can see that the height of navigation bar is reduced in Internet Explorer. I am not able to fix this issue. I have been trying a lot to fix this but no success so far.

For you people to get a clear picture of my header.php, I am also including the code I have written for header.php, and its CSS part.

Thanks for the help Jared. I have added "display:block" to my .nav ul li a declaration.
Using the said property resolves the issue of shrinking navigation elements, but it has created one more problem. Instead of displaying all the navigation links horizontally, It is displaying all the navigation links vertically, one on top of the other. I am sending a screenshot of the header after the display:block property is applied.

[attachment=0]display_block.jpg[/attachment]

I tried using display:inline at the end of the .nav ul li a declaration, but this again shrinks all the navigation elements in Internet Explorer. Help Please…

Setting display: block should make them go on new lines, so I don’t think that solution will work. Perhaps I’m just missing it, but I don’t see anywhere where you define a height for your navigation bar and each of the items in it. If this is the case that could be your problem.

Setting display: block should make them go on new lines, so I don’t think that solution will work. Perhaps I’m just missing it, but I don’t see anywhere where you define a height for your navigation bar and each of the items in it. If this is the case that could be your problem.

I have even tried specifying the height of the navigation bar and its elements. But this also does not work. Currently I am using 3 images in the navigation bar.
(1)bak.jpg — For the background.
(2)hov.jpg — For the hover effect
(3)active.jpg — For highlighting the current link (Current Page).

Following are all the 3 images:
[attachment=2]bak.jpg[/attachment] [attachment=1]hov.jpg[/attachment] [attachment=0]active.jpg[/attachment]

All the images are of the size 4px X 50px. All the images repeat in the x-direction.
So I think Mozilla Firefox, and Chrome are taking the height of navigation bar as the height of the image.The navigation bar looks fine in both the browsers. But for some reason It is not getting displayed in Internet Explorer as it should. I have even tried specifying the height of navigation bar elements to 50px. But that also doesnot work. I am not sure, what is causing this.

Hmm, that is strange. Without any height declaration I can see why I might only make the element as high as the text, but with it I’m not sure why it would still be too small. What happens if you declare "line-height: 50px;" for the navigation bar elements?

Okay, the issue is this: In order to go to the proper height the display needs to be set to block. The problem is that by doing this it is just creating another problem. Since block elements have line breaks before and after them they will each go on a new line. The solution is to wrap each block-level element in an inline element. Right now your code is like this:

You can use the "li" as the wrapper and the "a" as the block. Set the li to "display: inline;" and ".nav ul li a" to "display: block;". The background image will have to be on the link as well for this to work properly (so ".nav ul li a { background-image: url(‘yourimg.jpg’); }). If you want an example of this in action you can look at the source of the CSS-Tricks main navigation bar.

Okay, the issue is this: In order to go to the proper height the display needs to be set to block. The problem is that by doing this it is just creating another problem. Since block elements have line breaks before and after them they will each go on a new line. The solution is to wrap each block-level element in an inline element. Right now your code is like this:

You can use the "li" as the wrapper and the "a" as the block. Set the li to "display: inline;" and ".nav ul li a" to "display: block;". The background image will have to be on the link as well for this to work properly (so ".nav ul li a { background-image: url(‘yourimg.jpg’); }). If you want an example of this in action you can look at the source of the CSS-Tricks main navigation bar.

Edit: Also remember to set the height of .nav ul li a to 50px!

I have already tried the suggested step. It is still not working.
Here you have suggested me to use "li" as the wrapper, and "a" as block. I have already done that. I have already set li to display: inline, and .nav ul li a to display: block. But still this does not work. Please check the php and css code that I have sent with the first post. Following is the css part for the header:

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.