Menu problem in IE - shocking, I know

[hegbirts]

New to web development so bare with me....

 

I created a lovely header which is coded into all of my pages using:

 

<?php include("header.php"); ?>

 

I of course also have a style sheet in the head of every page that styles the header.

Looks great in FF but the navigation buttons do not align properly in IE (I use IE7 specifically, have not looked at it in other versions yet). In order to make it look good in IE, I must remove the padding-top from the following code in my css:

 

#nav {
   height: 76px;
   width: 1024px;
   padding-top: 220px;
   padding-left: 5px;
}

 

And I also must add the div class=clear code to my header.php:

 

 

So, how do I use these codes for IE and still get it work in other browsers. I know about conditional comments but can I use them for css and my header.php at the same time? Or is there a simpler way?

 

Thanks a million, I am beyond frustration!

[newseed]

I assume that you have a gap in the menu and that removing the padding-top seems to fix itself. Keep in mind that when using padding you have to consider it along with the height (or width) of your div.

 

Example:

 

If you have a div that is 100px high and you give it a padding-top:20px, it will actually end up being 120px high. Same applies to width. So if you use padding-top: 20px then you need to adjust the height from 100px to 80px. 80px + 20px = 100px.

 

Doing it this way will not require you to use Conditional Comments.

[hegbirts]

Tried your suggestion but it didn't work. Here is the code I have that makes the header look correct in FF but not IE, maybe you will see something I have missed. My site is http://www.birtsbags.com

 

CSS:

 

@charset "utf-8";
/* CSS Document */

body {
   margin: 0px;
   padding: 0px;
}

#header-container {
   width: 100%;
   height: 250px;
   background-color: #663300;
}

#header {
   background-image: url(../images/header.png);
   background-repeat: no-repeat;
   width: 1024px;
   height: 250px;
   margin: auto;
}

#logo{
   float: left;
   padding-top: 0px;
   padding-left: 16px;
}


img {
   border: none;
}

#nav {
   height: 76px;
   width: 1024px;
   padding-top: 220px;
   padding-left: 5px;
}

#nav ul
{
   text-align: left;
   margin: auto;
   width: 1024px;
}

#nav ul li
{
   display: inline;
   padding: 0px;
   margin: 0px;
}

 

The header.php code is:

 

 

Thanks again!

[newseed]

Providing the code is ok but since you are using images for your menu it's really hard to vision what you are trying to accomplish exactly but my guess is that you want a horizontal menu that is within the #header in which the #header is set for 250px in height. The problem arises is that the #nav has a height of 76px and a padding-top of 220px; Add those two and the total becomes 296px; That exceeds the #header height.

 

The #logo height is unknown to me and but let's assume it's 100px high and is set for the full width of the #header. That leaves you 150px left to put your #nav in below. If it's going to be 76px in height then the remaining pixels you have left is 74px;

 

You might say; 'But the menu doesn't drop down below the logo', the solution is to add clear: both to the #nav.

 

If this doesn't resolve your problem then you will need to provide a url so we can look at it.

 

One more thing, you have an closing that might cause a problem in which you should remove.

 

• 

• 

• 

[hegbirts]

Thanks, I will try those suggestions later on today. You are correct, I am trying to create a horizontal menu. My url is http://www.birtsbags.com

[hegbirts]

Ok, you're my hero! Here's what I did:

 

#nav {
   height: 76px;
   width: 1024px;
   padding-top: 0px;
   padding-left: 5px;
   clear: both;
}

 

Now it works in FF and IE7.....I'm afraid to check others.

 

Thanks so much.