Web Analytics Made Easy -
StatCounter Menu not appearing correctly on Apple devices - button 'spills over' - CodingForum

Announcement

Collapse
No announcement yet.

Menu not appearing correctly on Apple devices - button 'spills over'

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Menu not appearing correctly on Apple devices - button 'spills over'

    Hi all,

    I've been having this problem for an embarrassing number of months now and can't seem to fix it, really hope someone here can help.

    I have a CSS menu on my site that appears fine in all browsers under Windows, but on an Apple device such as a MacBook or iPad the buttons spill over onto a second row (see attached image).

    At first I thought this may be an issue with anti-aliasing so I took the following code:
    Code:
    #cssmenu > ul > li > a {
    	font-family: 'Oswald', sans-serif;
    	font-size: 1.275em;
    	font-weight: 400;
    	height: 19px;
    	padding: 10px 8px 10px 4px;
    	color: #fff;
    	border-right: solid #fff 1px;
    	text-transform: uppercase;
      	-webkit-transition: color 0.25s ease-out;
      	-moz-transition: color 0.25s ease-out;
      	-ms-transition: color 0.25s ease-out;
      	-o-transition: color 0.25s ease-out;
      	transition: color 0.25s ease-out;
    }
    and added

    Code:
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    Could it be an issue with margins / padding?

    Here is a page with the menu

    Is it better for me to post some of my CSS or can Firebug be used to investigate more thoroughly?

    Many thanks,

    Niall

    Click image for larger version

Name:	menu.jpg
Views:	1
Size:	36.8 KB
ID:	2283609
    Last edited by Demonolith; Sep 18, 2016, 12:30 PM.

  • #2
    Originally posted by Demonolith View Post
    I have a CSS menu on my site that appears fine in all browsers under Windows, but on an Apple device such as a MacBook or iPad the buttons spill over onto a second row (see attached image).

    Could it be an issue with margins / padding?
    It seems strange for someone working on a site for a Catholic church to be using Demonolith as a handle... But I digress.

    The problem is that you're mixing absolute and relative units (i.e., pixels, percentages based on pixels, and ems). You need to use one or the other or accept the potential for wrapping. If you want to pick the most accessible solution, you'll opt for relative units. To address just this particular issue, that entails changing your layout width, image width, and menu borders to be em/rem-based.

    Rems (root element ems) are the preferred relative unit since ems are based on the font size of the parent element and that can result in some tedious math every time you change a font size that a particular em-based value is deriving its value from. However, if you need to support older versions of Internet Explorer, you may end up having to do the math. IE11 fully supports rems. IE9/10 only partially support rems.

    To complicate things, you have a magnifying glass image in there. Making that based on relative units could cause blurring, so you'll probably want to use either a vector (SVG) image that can stretch without quality loss or an oversized raster (PNG) image (at least 200% larger) to account for that.

    Since this is a text based issue, it's unsurprising that your menu is wrapping for me in Firefox 48 on Windows 10. If you right-click the desktop and select "Display settings", there's a slider option to "Change the size of text, apps, and other items". I have my setting at a non-default 125%, which is probably the reason for wrapping. A lot of site owners and app developers don't consider high DPI modes on modern operating systems and their content ends up appearing blurry as a result. (Favicons are one of the biggest offenders for blurry images.)

    Lastly, each menu item should account for font width differences unless you're serving custom fonts and can therefore rely on a given font being present.
    Last edited by Arbitrator; Sep 19, 2016, 04:30 AM. Reason: Clarified how em units work.

    Comment


    • #3
      Originally posted by Arbitrator View Post
      It seems strange for someone working on a site for a Catholic church to be using Demonolith as a handle... But I digress.
      Ha ha, good point - I promised my clients I would invoke any ancient demon from the nether realm during development.

      The problem is that you're mixing absolute and relative units (i.e., pixels, percentages based on pixels, and ems). You need to use one or the other or accept the potential for wrapping. If you want to pick the most accessible solution, you'll opt for relative units. To address just this particular issue, that entails changing your layout width, image width, and menu borders to be em/rem-based.
      I see I have a lot of changes to make (up to the challenge), I didn't realise this was the case though.

      Should I change all units throughout my WordPress site to rem (including font-size, padding etc.) or just anything that directly involves the menu?

      In some cases I used 100% such as the menu width, what is the rem equivalent?

      Thanks,

      Niall

      Comment

      Working...
      X