Jump to content

IE is mucking up my Navigation Bar


Recommended Posts

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:

 

5NGz6.jpg

 

This is what IE does:

 

FQGi3.jpg

 

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...