Jump to content
Stef's Coding Community
kitster79

Navigation Issue in IE6

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

Share this post


Link to post
Share on other sites
Thanks for your help Wickham. I'll give that a go. However, #bloomsLogo is absolutely positioned - this should not take up any space inside the 900 px right?

 

Well, it's on the left of the #nav so you have to allow for it, don't you?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

hmmm, tried what you suggested but giving the width to the li large enough so that "Revision Courses" stays on one line is also creating way too much space between the other links!

 

Do you know what I mean?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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...