Demo Chrome SVG bug
If the logo doesn't appear misformed right away, hover the menu item that says 'Aanbod'.
HTML
<body>
<div class="header" id="header">
<div class="placeCenter">
<a class="logo" href="/">
<iframe src="http://www.ncode.nl/test/Travelhome.svg">
<!-- fallback here -->
</iframe>
</a>
<div class="menu">
<ul>
<li><a href="/" title="">Home</a>
</li>
<li><a href="/alle-vakanties" title="">Aanbod</a>
<ul>
<li><a href="/amerika/camperhuur-aanbod" title="Camperhuur in Amerika">Amerika</a>
</li>
<li><a href="/argentinie/camperhuur-aanbod" title="Camperhuur in Argentinië">Argentinië</a>
</li>
<li><a href="/australie/camperhuur-aanbod" title="Camperhuur in Australië">Australië</a>
</li>
<li><a href="/canada/camperhuur-aanbod" title="Camperhuur in Canada">Canada</a>
</li>
<li><a href="/chili/camperhuur-aanbod" title="Camperhuur in Chili">Chili</a>
</li>
<li><a href="/finland/camperhuur-aanbod" title="Camperhuur in Finland">Finland</a>
</li>
<li><a href="/ijsland/camperhuur-aanbod" title="Camperhuur in IJsland">IJsland</a>
</li>
<li><a href="/namibie/camperhuur-aanbod" title="Camperhuur in Namibië">Namibië</a>
</li>
<li><a href="/nieuw-zeeland/camperhuur-aanbod" title="Camperhuur in Nieuw-Zeeland">Nieuw-Zeeland</a>
</li>
<li><a href="/noorwegen/camperhuur-aanbod" title="Camperhuur in Noorwegen">Noorwegen</a>
</li>
...
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400, 700);
:root {
overflow-y:scroll !important;
/* does not work for IE8 */
}
html {
font-family:'Open Sans', sans-serif;
}
body {
background-repeat: repeat-y;
background-position: center 0;
border:0;
color:#091840;
font-size:0.8em;
/* 12px */
line-height:1.3em;
/* 17px for font-size:0.8em */
margin:0;
padding:0;
text-align:center;
width: 100%;
}
img {
border:0;
vertical-align:bottom;
}
a {
color:#f78e1f;
text-decoration:underline;
}
a:hover {
color:#f78e1f;
text-decoration:none;
}
a:focus {
outline:none;
}
/** Header **/
.header {
/*linear-gradient(to right, #5094df 0%,#5094df 50%,#1d61d0 50%,#1d61d0 100%);*/
background: #5094df;
height:148px;
left:0;
position:absolute;
top:0;
width:100%;
border-bottom: 1px solid #FFF;
z-index: 100;
}
.header .placeCenter {
height: 148px;
}
.header .logo {
height: 105px;
width: 423px;
display: block;
}
iframe {
border: none;
}
.header .menu {
height: 40px;
right: 0;
line-height: 40px;
position: absolute;
bottom: 0;
z-index: 2;
font-size: 1.05em;
}
.header .menu a {
text-decoration: none;
}
.header .menu ul {
list-style-type:none;
text-align: right;
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.header .menu a {
font-weight: bold;
display: inline-block;
padding: 0 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #FFF;
margin-left: 1px;
}
.header .menu ul li a[href="/"] {
background: #FFF;
color: #f78e1f;
}
.header .menu ul li a:hover {
background: #294399;
}
.header .menu ul li ul {
display: none;
background: rgba(41, 67, 153, 0.8);
width: 150px;
position: absolute;
text-align: left;
}
.header .menu ul li:hover ul, .header .menu ul li.open ul {
...