IE is mucking up my Navigation Bar

[gingermonkey17]

Hello,

 

I'm new to web design and have an opportunity to create a website for my company, things started off well but internet explorer is mucking things up for me, I'm hopeful that someone can point me in the right direction.

 

I think it would be easier if I just post a screenshot and the accompanying code and someone might see the obvious that is avoiding me.

 

This is how all the other browsers look:

 

 

This is what IE does:

 

 

And this is my CSS code:

 

#header #logo {

width: 346px;

height: 110px;

float:left;

}

 

#header #navbar {

width:560px; /*Sets the overall width of the navbar*/

float:right;

padding-top:71px;

}

 

#header #navbar #holder {

height:42px; /*Sets the height of the navbar*/

width: 560px; /*Sets width of holder div*/

}

 

#header #navbar #holder ul {

list-style:none; /*By setting to none gets rid of the bullet points*/

margin:0; /*Makes the horizontal menu flush with the side of the holder div*/

padding:0; /*Makes the horizontal menu flush with the side of the holder div*/

}

 

#header #navbar #holder ul li a {

text-decoration:none;

float:left;

margin-right:5px; /*Creates space between the links*/

line-height:11px;

font-family:Verdana, Geneva, sans-serif; /*Sets the font to be used*/

color:#000; /*Colour of the font*/

border:1px solid #000; /*Sets a border around each list item*/

border-bottom:none; /*Removes the bottom portion of the border*/

padding:15px; /*Inflates the tabs all around the links*/

width:75px; /*Sets standard width of link to 75 pixels*/

text-align:center; /*Link alignement to centre of tab*/

display:block; /*Allows rollover link to cover the hold tab not just the text*/

background:#069; /*Sets background colour of the tab*/

}

 

Thanks in advance!

[Andrea]

Do you have a link to the page? If not, please provide the entire CSS and the entire HTML.

[Andrea]

But without seeing what you have - try to float the li, not the a. (It's a guess)

[gingermonkey17]

Hi Andrea,

 

Here is my html and my css sheet, thanks for the suggestion so far I will see if it makes any difference. Otherwise I await your analysis!

Template.html

main.css

[Andrea]

I have IE9, and it looks fine there, so I can't play around to see what may be causing it. And I'm just not that good that I can figure it out by looking at the code alone - I have to try. What I would try is what I already said, float the li not the a, and if that doesn't do it, adjust the width of the LIs or margins down a bit to see if it's a width issue.

 

Another good approach is to add

* {
margin: 0;
padding: 0;
}

 

to the top of your CSS to remove any browser default margins and paddings that may be causing issues. Actually, try that first, then the float thing, and then mess with the li width or the space between the li's - and check after each thing you tried.

[gingermonkey17]

Thanks Andrea,

 

You have been a great help, once I've finished my lunch break I'll get on to the testing.

 

Thanks again

[benjaminmorgan]

ooh, i had a similar problem. Andrea is right. You have to float the li tag. It should work.

 

#header #navbar #holder ul li {
   float: left;
}

[DanExcel]

But without seeing what you have - try to float the li, not the a. (It's a guess)

 

You are good, that fixed the problem without you having to look at the code...