Help with navigation section

nightstick · 11-26-2011, 07:07 PM

I'm working on this site for a class project. Originally, I was using Google Fonts and the font 'Chivo' for the navigation buttons. Different browsers were rendering the font differently making it impossible for me to set a padding that worked for every browser. I decided to switch the font for the nav to Helvetica to bypass that problem. Now everything looks OK to me in Safari and Chrome. In Firefox I still see an extra 1 or 2 pixels to the right of the Contact link (you can see it in hover and active states). I can live with that. The bigger issue now is that the Navigation is too large in Safari on my iPad and iPhone pushing the last navigation link down and messing everything up. Any advice you could give would be appreciated.

Edit: Forgot to include a link
www.jonathangunnell.com/SHS

constanthosting · 11-26-2011, 07:38 PM

If a smaller window is 'crunching' up a menu, the only real option is to make the menu have less links or make the menu 'thinner' You could always have a drop down menu to help condense the number of items in the initial menu that is causing it to be "too wide" for some displays.

I hope this helps.

ronaldroe · 11-26-2011, 07:49 PM

Part of the problem is the Mac. That isn't a dig at Macs, but I've seen way too many of these issues. People develop for what they see on their super high res Macs and don't pay attention to flexibility. If your menu is doing that, it's likely you're using some sort of absolute size for the fonts, not using an absolute size for whatever is containing your nav, and both are huge.

nightstick · 11-26-2011, 08:14 PM

I'm sorry, I forgot to add a link. That would probably help...

www.jonathangunnell.com/SHS

nightstick · 11-27-2011, 02:12 AM

In response to the two posts so far:

Thank you for the responses. The problem is not related to the size of the window. The site was created primarily using a mac, but the resolution used for the website is definitely acceptable compared to the current standards. This is an issue with how the browsers are rendering the site. Hopefully you'll be able to see the issue more clearly now that I've provided a link. Thanks.

Phreaddee · 11-27-2011, 06:40 AM

Align the text to the centre and give each a set width, forget about using padding.
Shrink the font a little and use font-weight. Safari particularly makes bold font bolder, but font-weight usually fixes that problem...

PixelPusher · 11-28-2011, 03:20 PM

Couple comments...
Don't use empty elements to clear floats. It's bad practice and bloats your markup.
Markup in General
Dont do this:

HTML Code:

<div class="clear"></div>

Use the clear css property on the element that follows the float. In your case:

Code:

div#nav {
clear:both;
}

Menu
I checked your site on the ipad and I do see the problem you are having. One key issue is how you are setting your font size. You are using pixels (first declared at the body level, and then on the anchors). The pixel unit sets the font to fixed size, which is helpful in some aspects but it doesn't allow for scaleability. Try using em instead. The "em" unit, just like the "%" unit allow the font size to scale, which is especially helpful on mobile devices.

Also look into "css shorthand". You could reduce down some of your css classes.

nightstick · 11-28-2011, 07:07 PM

Phreaddee, although specifying a width for every <li> might work, it seems like there should be a much easier (and less code-heavy) fix.

PixelPusher, thanks for the advice on cleaning up the code. I generally wait to get everything working before cleaning up css. I don't think em instead of px is what I need in this situation. For the problem I'm trying to fix (the nav section), scalability is something that I do not want in this case.

PixelPusher · 11-29-2011, 04:07 AM

Quote:

Originally Posted by nightstick

...I don't think em instead of px is what I need in this situation. For the problem I'm trying to fix (the nav section), scalability is something that I do not want in this case.

When you get a chance, take a look at our company sub menu on website:

Menu Here

The grey menu bar under the blue banner is styled almost exactly the same as yours, with one exception, it uses "em" units for font size. This menu renders just fine on the iPad.

nightstick · 11-29-2011, 05:06 AM

Hi PixelPusher, thanks again for the help.

With that sub menu, if I zoom in with my browser (Firefox), your sub menu has the same problem I am trying to fix with mine for iPad and iPhone (see screen shot). If the purpose of using em instead of px if for scalability, it seems that the design has to suffer in order to make it scalable in both cases (yours and mine). I would prefer to sacrifice scalability and keep the design accurate across browsers.

I tried converting everything on my site to em early this morning just to test it out but had a lot of trouble getting all the spacing accurate. Would you suggest adjusting everything including line-height etc...?

I tried using this site as a guide http://pxtoem.com/.

11-26-2011, 07:07 PM	#1
nightstick New Member Join Date: Nov 2011 Posts: 10	Help with navigation section - browser compatibility I'm working on this site for a class project. Originally, I was using Google Fonts and the font 'Chivo' for the navigation buttons. Different browsers were rendering the font differently making it impossible for me to set a padding that worked for every browser. I decided to switch the font for the nav to Helvetica to bypass that problem. Now everything looks OK to me in Safari and Chrome. In Firefox I still see an extra 1 or 2 pixels to the right of the Contact link (you can see it in hover and active states). I can live with that. The bigger issue now is that the Navigation is too large in Safari on my iPad and iPhone pushing the last navigation link down and messing everything up. Any advice you could give would be appreciated. Edit: Forgot to include a link www.jonathangunnell.com/SHS Last edited by nightstick; 11-26-2011 at 08:15 PM. Reason: Forgot to include a link

11-26-2011, 07:38 PM	#2
constanthosting Silver Member Join Date: Aug 2008 Location: Atlanta, Georgia Posts: 140	If a smaller window is 'crunching' up a menu, the only real option is to make the menu have less links or make the menu 'thinner' You could always have a drop down menu to help condense the number of items in the initial menu that is causing it to be "too wide" for some displays. I hope this helps. __________________ http://constant-hosting.com Webhosting Improved. You'll love our shared hosting.

11-26-2011, 07:49 PM	#3
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 677	Part of the problem is the Mac. That isn't a dig at Macs, but I've seen way too many of these issues. People develop for what they see on their super high res Macs and don't pay attention to flexibility. If your menu is doing that, it's likely you're using some sort of absolute size for the fonts, not using an absolute size for whatever is containing your nav, and both are huge. __________________ Ronald Roe Small Business Web Design

11-26-2011, 08:14 PM	#4
nightstick New Member Join Date: Nov 2011 Posts: 10	Link I'm sorry, I forgot to add a link. That would probably help... www.jonathangunnell.com/SHS

11-27-2011, 06:40 AM	#6
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	Align the text to the centre and give each a set width, forget about using padding. Shrink the font a little and use font-weight. Safari particularly makes bold font bolder, but font-weight usually fixes that problem... __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

11-27-2011, 02:12 AM	#5
nightstick New Member Join Date: Nov 2011 Posts: 10	In response to the two posts so far: Thank you for the responses. The problem is not related to the size of the window. The site was created primarily using a mac, but the resolution used for the website is definitely acceptable compared to the current standards. This is an issue with how the browsers are rendering the site. Hopefully you'll be able to see the issue more clearly now that I've provided a link. Thanks.

11-28-2011, 03:20 PM	#7
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Couple comments... Don't use empty elements to clear floats. It's bad practice and bloats your markup. Markup in General Dont do this: HTML Code: <div class="clear"></div> Use the clear css property on the element that follows the float. In your case: Code: div#nav { clear:both; } Menu I checked your site on the ipad and I do see the problem you are having. One key issue is how you are setting your font size. You are using pixels (first declared at the body level, and then on the anchors). The pixel unit sets the font to fixed size, which is helpful in some aspects but it doesn't allow for scaleability. Try using em instead. The "em" unit, just like the "%" unit allow the font size to scale, which is especially helpful on mobile devices. Also look into "css shorthand". You could reduce down some of your css classes. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

11-28-2011, 07:07 PM	#8
nightstick New Member Join Date: Nov 2011 Posts: 10	Phreaddee, although specifying a width for every <li> might work, it seems like there should be a much easier (and less code-heavy) fix. PixelPusher, thanks for the advice on cleaning up the code. I generally wait to get everything working before cleaning up css. I don't think em instead of px is what I need in this situation. For the problem I'm trying to fix (the nav section), scalability is something that I do not want in this case.

11-29-2011, 05:06 AM	#10
nightstick New Member Join Date: Nov 2011 Posts: 10	Hi PixelPusher, thanks again for the help. With that sub menu, if I zoom in with my browser (Firefox), your sub menu has the same problem I am trying to fix with mine for iPad and iPhone (see screen shot). If the purpose of using em instead of px if for scalability, it seems that the design has to suffer in order to make it scalable in both cases (yours and mine). I would prefer to sacrifice scalability and keep the design accurate across browsers. I tried converting everything on my site to em early this morning just to test it out but had a lot of trouble getting all the spacing accurate. Would you suggest adjusting everything including line-height etc...? I tried using this site as a guide http://pxtoem.com/. Attached Images

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode