Logo alleen zichtbaar in Chrome
Ik probeer iets heel simpels te doen, maar het lukt maar niet.
Zie volgende website:
http://hetgooischezwerfdier.nl/
In Google Chrome zie ik het logo, echter in Firefox en IE niet.
Heeft iemand enig idee waar dit aan kan liggen?
HTML:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="header">
<img src='images/header.png' />
<a href="http://hetgooischezwerfdier.nl">
<img class="logo" src="images/logo.png">
</a>
</div>
<img src='images/header.png' />
<a href="http://hetgooischezwerfdier.nl">
<img class="logo" src="images/logo.png">
</a>
</div>
CSS:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#header .logo {
position: absolute;
margin-top: -252px;
margin-left: 13px;
z-index: 100000;
}
position: absolute;
margin-top: -252px;
margin-left: 13px;
z-index: 100000;
}
Alvast bedankt!
In FF ligt het aan je margins. Margin -252px plaatst het ver boven je document zodat je het dus niet ziet. Pas ik het aan naar een positieve waarde (in firebug) dan komt het logo tevoorschijn.
Iemand enig idee waarom de margins in Chrome anders gebruikt worden dan Firefox in dit geval?
omdat Chrome uit een andere keuken komt dan Firefox.
Dan is het simpel.
Dan kan je werken met left en top.
Iets als:
Beetje Google en dit script kwam naar voren: http://bastianallgeier.com/css_browser_selector/ om uit te zoeken met welke browser je te maken hebt.
Dan kun je voor de specifieke div per browser instellen waar deze moet komen te staan.
Ik zou aanraden: probeer eerst alternatieven te vinden die wel werken voor alle browsers. Meestal lukt dat wel.
Belangrijkste browsers: Internet Explorer, Firefox, Chrome, Opera, Safari
Je kan ook eens kijken naar css target, zo kan je in een stylesheet kleine wijzigingen recht zetten per browser.