I have a problem with the logo on my site, but only in Safari on Apple devices.
This is my site: http://iiointeractive.com/
The big blue "iio" link should be a square. It displays properly in every browser I have tested - including Safari on Windows - but displays as a rectangle in Safari on all Apple devices.
Here is a screenshot of the issue: FILE REMOVED
The HTML looks like this:
<div id='logo_iio'>
<a href="/">iio</a>
</div>
The CSS looks like this:
//reset
html,body,a,p{
padding:0;
margin:0;
}
#logo_iio {
font-family: 'Agency';
font-weight: normal;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
float: left;
}
#logo_wrap a {
font-size: 80px;
color: white;
text-decoration: none;
background-color: #00baff;
padding: 0 25px 10px;
}
I tried using line-height to make the styles consistent, but it didn't influence the height of the blue background. changing height doesn't do anything. I can use padding-top to fix the display in Safari, but this messes up the styles in all other browsers.
The only solution I can think of is to write a php script to detect the user's OS and browser and load an additional CSS file with a different padding value...
Is there an easier solution?
I guess not.
One update - I found that the problems weren't just on Apple devices, but all handheld devices.
Here's that php script - put it at the end of the head element:
function getOS() {
global $user_agent;
$os_platform = "Unknown OS Platform";
$os_array = array(
'/windows nt 6.3/i' => 'Windows 8.1',
'/windows nt 6.2/i' => 'Windows 8',
'/windows nt 6.1/i' => 'Windows 7',
'/windows nt 6.0/i' => 'Windows Vista',
'/windows nt 5.2/i' => 'Windows Server 2003/XP x64',
'/windows nt 5.1/i' => 'Windows XP',
'/windows xp/i' => 'Windows XP',
'/windows nt 5.0/i' => 'Windows 2000',
'/windows me/i' => 'Windows ME',
'/win98/i' => 'Windows 98',
'/win95/i' => 'Windows 95',
'/win16/i' => 'Windows 3.11',
'/macintosh|mac os x/i' => 'Mac OS X',
'/mac_powerpc/i' => 'Mac OS 9',
'/linux/i' => 'Linux',
'/ubuntu/i' => 'Ubuntu',
'/iphone/i' => 'iPhone',
'/ipod/i' => 'iPod',
'/ipad/i' => 'iPad',
'/android/i' => 'Android',
'/blackberry/i' => 'BlackBerry',
'/webos/i' => 'Mobile'
);
foreach ($os_array as $regex => $value)
if (preg_match($regex, $user_agent))
$os_platform = $value;
return $os_platform;
}
function getBrowser() {
global $user_agent;
$browser = "Unknown Browser";
$browser_array = array(
'/msie/i' => 'Internet Explorer',
'/firefox/i' => 'Firefox',
'/safari/i' => 'Safari',
'/chrome/i' => 'Chrome',
'/opera/i' => 'Opera',
'/netscape/i' => 'Netscape',
'/maxthon/i' => 'Maxthon',
'/konqueror/i' => 'Konqueror',
'/mobile/i' => 'Handheld Browser'
);
foreach ($browser_array as $regex => $value)
if (preg_match($regex, $user_agent))
$browser = $value;
return $browser;
}
$OS = getOS();
$browser = getBrowser();
if($browser=='Handheld Browser'
||(($OS=='Mac OS X'||$OS=='Mac OS 9'||$OS=='iPhone'||$OS=='iPod'||$OS=='iPad'||$OS=='Mobile')&&($browser=='Safari'))) : ?>
<style type="text/css">
#logo_wrap a{padding-top:15px !important}
#message{width:355px}
#contactForm input{padding-bottom:10px}
#service h3{margin-bottom: 20px}
</style>
<?php endif; ?>