You put a height of 40px on .logo a when the height of the logo is 120px x 147px. Try matching the height of the .logo a with the img instead or remove the height from the .logo a
Safari overlaps header logo with body
Question
I use Tao theme http://themeforest.net/item/tao-retina-responsive-wordpress-portfolio-theme/5913809
The website I have issue with is this http://www.thamon.co.uk/ If you open the page with Safari, it overlaps the logo with the body of all pages.
In styles.css I have he following code associated with the header that I believe is somewhat relevant to the problem
.header {
position: relative;
}
.header .header-primary-content {
display: table;
width: 100%;
position: relative;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
/* Border shadow */
.header .header-primary-content:after {
content: " ";
position: relative;
z-index: -1;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, .5);
}
.logo, .header-buttons {
display: table-cell;
vertical-align: middle;
}
/**
* Logo
*/
.logo {
width: 70%;
}
.logo a {
display: inline-block;
position: relative;
width: 120px;
height: 40px;
margin-left: 410px;
vertical-align: middle
color: #444652;
text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
}
.no-touch .logo a:hover {
animation: tinywiggle 220ms ease-out;
}
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow