Help with navigation section - browser compatibility

nightstick · 11-29-2011, 03:29 PM

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/...he-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 · 11-29-2011, 04:00 PM

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/...he-iphone-and/ That didn't help.

Then I tried this: http://perishablepress.com/press/201...media-queries/ Good to go now.

Thanks.

PixelPusher · 11-30-2011, 02:15 PM

Quote:

Originally Posted by 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/.

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 · 11-30-2011, 02:28 PM

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

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

11-29-2011, 03:29 PM	#11
nightstick New Member Join Date: Nov 2011 Posts: 10	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/...he-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.

11-29-2011, 04:00 PM	#12
nightstick New Member Join Date: Nov 2011 Posts: 10	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/...he-iphone-and/ That didn't help. Then I tried this: http://perishablepress.com/press/201...media-queries/ Good to go now. Thanks.

11-30-2011, 02:28 PM	#14
nightstick New Member Join Date: Nov 2011 Posts: 10	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