Help with navigation section - browser compatibility

[nightstick]

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]

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]

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]

Link

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

www.jonathangunnell.com/SHS

 

[nightstick]

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]

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]

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

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

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

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]

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]

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

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

 

[nightstick]

http://jonathangunnell.com/SHS

UPDATE: Per PixelPusher's suggestion, I converted all font-sizes to em. Unfortunately his did not solve the problem with mobile browsers.

I also tried this: http://www.campaignmonitor.com/blog...ding-the-minimum-font-size-on-the-iphone-and/
That made it impossible to re-size the navigation section in Safari, but still didn't solve the problem.

I have also discovered that the navigation section shows the same problem on other non-apple smart phones.

 

[nightstick]

Problem Solved. http://jonathangunnell.com/SHS

I had changed all font sizes to ems as suggested by PixelPusher. That didn't help.

I tried this: http://www.campaignmonitor.com/blog...ding-the-minimum-font-size-on-the-iphone-and/ That didn't help.

Then I tried this: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/ Good to go now.

Thanks.

 

[PixelPusher]

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

Yes this will happen when you zoom the browser, something you cannot do in an iPad. The iPad was your original problem. Switching to em will solve your issue...if done correctly. As per our menu wrapping in FF when a user "zooms", I was aware of this, however it is not really related to your original issue..."my menu is breaking on the iPad"

Using media-queries is also an excellent solution for fixing the mobile devices problems, but will not fix the zoom issue.

 

[nightstick]

Out of curiosity, would you be able to take a look at the site again and explain to me where I went wrong with switching to em? I have all font sizes in em now. Before adding the media-queries, the issue was still there on all mobile devices.
http://jonathangunnell.com/SHS