zooming problem with main menu

[tchoy]

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?

[Wickham]

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.

[virtual]

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.

[tchoy]

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?

[virtual]

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

[Andrea]

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.

[tchoy]

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

[Andrea]

.., what if i want to move it closer to the logo, do i add margin-left? but in the ul or li style

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

[virtual]

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.