Jump to content

zooming problem with main menu


tchoy

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by virtual
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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