Logo alleen zichtbaar in Chrome

Door Robin S op 11-02-2013 12:28

1.819 views

Beste leden,

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:

<div id="header">
  <img src='images/header.png' />
  <a href="http://hetgooischezwerfdier.nl">
    <img class="logo" src="images/logo.png">
  </a>
</div>

CSS:

#header .logo {
  position: absolute;
  margin-top: -252px;
  margin-left: 13px;
  z-index: 100000;
}

Alvast bedankt!

E Erwin H

11-02-2013 12:31

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.

Robin S

11-02-2013 12:35

Iemand enig idee waarom de margins in Chrome anders gebruikt worden dan Firefox in dit geval?

Frank Nietbelangrijk

11-02-2013 12:36

omdat Chrome uit een andere keuken komt dan Firefox.

Kris Peeters

11-02-2013 12:48

#header staat op position: relative en #logo op position: absolute

Dan is het simpel.

Dan kan je werken met left en top.

Iets als:


#logo {
left: 20px;
top: 60px;
}

R Ramon Bos

11-02-2013 12:51

Ik heb ook problemen met de opmaak vanuit een CSS van een site in de diverse browsers. Het gros gaat goed, maar hier en daar zitten verschillen in. Ik zit erover te denken om browser-specifieke CSS-files te creëren naast de basis.
Beetje Google en dit script kwam naar voren: 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.

Kris Peeters

11-02-2013 13:29

Ik zou aanraden: probeer eerst alternatieven te vinden die wel werken voor alle browsers. Meestal lukt dat wel.

Ozzie PHP

11-02-2013 13:40

En dan meteen nog een goede tip. Als je een website gaat opmaken bent met css, installeer dan van tevoren de belangrijkste browsers en controleer tijdens het opmaken of alles er in alle browsers hetzelfde uitziet in plaats van achteraf. Dit voorkomt een hoop problemen.

Belangrijkste browsers: Internet Explorer, Firefox, Chrome, Opera, Safari

T Tim S

11-02-2013 13:49

Je kan ook eens kijken naar css target, zo kan je in een stylesheet kleine wijzigingen recht zetten per browser.

Reageren

Inloggen om te reageren