tchoy Posted January 3, 2010 Report Share Posted January 3, 2010 in my website - http://www.ohka.org/index-new.html I have the menu items - home, about ohka, events, media, join ohka when someone zooms to 125% or 150%, it looks funny, they are smushed together. when you depress the 'events' menu item it still wants about ohka, and now when 'media' is clicked, events i brought up and likewise with join ohka brings up media and a blank next to join ohka brings ups join ohka. how can you fix this problem? Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 3, 2010 Report Share Posted January 3, 2010 I think it helps if you add float: left; #navigation li { list-style: none; margin: 0 7px; display: inline; float: left; } But I haven't done a full test. Your menu links are coded as if they are supposed to be on one line, but there isn't enough width for them so some have gone down to a lower line and this may be part of the problem. Float: left; would try to put them on the same line, but the lack of width is again a problem, but the zoom with float: left; seems to make the links work properly in IE7 and Firefox. Quote Link to comment Share on other sites More sharing options...
virtual Posted January 3, 2010 Report Share Posted January 3, 2010 You can also delete margin-left in the #navigation ul and replace with float: right; However you will need to add some padding to the #navigation tag as the menu hides under the logo when you zoom in. The #navigation tag has no css styling only the margin, padding 0 inherited from the body tag. Tested only in Firefox. Quote Link to comment Share on other sites More sharing options...
tchoy Posted January 6, 2010 Author Report Share Posted January 6, 2010 You can also delete margin-left in the #navigation ul and replace with float: right;However you will need to add some padding to the #navigation tag as the menu hides under the logo when you zoom in. The #navigation tag has no css styling only the margin, padding 0 inherited from the body tag. Tested only in Firefox. Okay, I tried what you and Wickham said and I had adding the padding to the #navigation tag and I can't see the menu item using IE 8. What did I do wrong? Quote Link to comment Share on other sites More sharing options...
virtual Posted January 6, 2010 Report Share Posted January 6, 2010 (edited) Do the following: #navigation { padding-bottom:20px; } #navigation ul { float:right; font-family:Verdana,helvetica,Arial,sans-serif; font-size:12px; } #navigation li { float:left; list-style-type:none; padding:0 7px; } Edited January 6, 2010 by virtual Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 6, 2010 Report Share Posted January 6, 2010 You cannot see it in Firefox, either - because the font is the same color as the background (highlight the area, and you'll see your menu appear. This works #navigation { float: right; list-style: none; margin-top: -30px; } You should probably review your entire CSS for logic. Right now, you have #navigation { float:right; list-style-image:none; list-style-position:outside; list-style-type:none; } You're saying 'list-style-type: none;' - once you say you want none, there's no point it also saying where you don't want one or what image you don't want. Quote Link to comment Share on other sites More sharing options...
tchoy Posted January 7, 2010 Author Report Share Posted January 7, 2010 Do the following: #navigation { padding-bottom:20px; } #navigation ul { float:right; font-family:Verdana,helvetica,Arial,sans-serif; font-size:12px; } #navigation li { float:left; list-style-type:none; padding:0 7px; } thanks that worked, what if i want to move it closer to the logo, do i add margin-left? but in the ul or li style Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 7, 2010 Report Share Posted January 7, 2010 .., what if i want to move it closer to the logo, do i add margin-left? but in the ul or li styleI wasn't sure either - but I quickly found out, via the Firefox Web Developer Add-on - CSS - Edit CSS. I just tried them both. If you don't have this yet, you should really get it - it'll help you big time. That's what I used the other day to figure out why your board page wasn't lining up. Quote Link to comment Share on other sites More sharing options...
virtual Posted January 7, 2010 Report Share Posted January 7, 2010 You add margin-right to the ul tag to move the whole thing nearer to the logo, it will still have room to expand with the zoom. 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.