Jump to content

Navigation Issue in IE6


kitster79

Recommended Posts

Your navbar with six items is not displaying horizontally in IE6.

 

Your #headerinner is 900px wide. Your #bloomslogo div is 220 + 16 = 236px wide, leaving 664px for the #nav.

 

Each #navinner li style has 15px right and left padding x 6 = 180px leaving 484px for the actual li tags / 6 = 80px each and IE6 needs a width when there is a float, so I edited:-

 

#nav {                                
   color: #4C4D4F;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: normal;
   position: absolute;
   right: 0px;
   width: 664px;/*618px;*/
   bottom: 0px;
}
#navInner {
}
#navInner ul {
   list-style-type: none;
}
#navInner li { width: 80px;
   display: block;
   float: left;
   height: 24px;
   text-align: center;
   padding-top: 5px;
   padding-right: 15px;
   padding-left: 15px;
}

 

which makes IE6, IE7 and Firefox display the same but the 80px is not enough for the width of the longer titles like REVISION COURSES so I suggest you increase the width of #navinner li and decrease the padding-right and padding-left.

Edited by Wickham
Link to comment
Share on other sites

No it doesn't interfere but unless you allow room, the nav items will slide under or over the logo.

 

In IE7 and Firefox the menu titles appear closer together because the li tag has no width,, so the 15px side padding is from the edges of the text like HOME which is short, but IE6 needs a width with the float, so you need to give the li tag a width, either the same for all or individually with a class or you could leave the styles the same for IE7 and Firefox and include a conditional comment making different padding with a width just for IE6.

 

Because IE6 needs a width for the li tag, I had to work out what was available on the right of the logo and make them fit, rather than just allowing each one to have its text width plus side padding..

Edited by Wickham
Link to comment
Share on other sites

Yes, I know exactly what you mean. It's all because IE6 won't work without a width, so what I sometimes do is to create several classes all with different widths for each menu item, making sure the total plus padding, margins, borders does not exceed the available width (664px for #nav). Then you can size them to suit the text width.

Link to comment
Share on other sites

That's OK now in IE6, IE7 and Firefox; in fact you have space to spare because the total width of the classes is 476px plus 6*2*12px padding = 144 = total 620px.

 

You probably don't need the width: 80px in #navInner li now because #navInner li has the float: left and the classes have the widths.

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...