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

niallasd · Member · Sep 18, 2016 at 6:15 pm
Copy link

Add topic to favorites
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 as you can see here.

At first I thought this may be an issue with anti-aliasing so I took the following 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
```
-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

The blog I need help with is: (visible only to logged in users)
niallasd · Member · Sep 18, 2016 at 6:16 pm
Copy link
Apologies that my WordPress site is not at the main domain address.

No items found.