kitster79 Posted October 16, 2009 Report Share Posted October 16, 2009 Hi everyone, My navigation looks fine in all browsers but not in IE6..it looks terrible in IE6...take a look... http://vojodesign.com/proofs/bloomsLearning/ Anyone know the problem and how to fix it? Thanks Kit Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 16, 2009 Report Share Posted October 16, 2009 (edited) 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 October 16, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
kitster79 Posted October 16, 2009 Author Report Share Posted October 16, 2009 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 16, 2009 Report Share Posted October 16, 2009 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? Quote Link to comment Share on other sites More sharing options...
kitster79 Posted October 16, 2009 Author Report Share Posted October 16, 2009 As far as I know, when a div is absolutely positioned it does interfere or take up any of the space of the div in which it is contained. Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 16, 2009 Report Share Posted October 16, 2009 (edited) 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 October 16, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
kitster79 Posted October 16, 2009 Author Report Share Posted October 16, 2009 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 16, 2009 Report Share Posted October 16, 2009 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. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted October 16, 2009 Author Report Share Posted October 16, 2009 Ah!!! Now I understand. Thanks very much for your help. Could you do me a favor and text it for me in IE6 and 7? I dont have either... http://vojodesign.com/proofs/bloomsLearning/ Thanks again Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 16, 2009 Report Share Posted October 16, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.