[CSS] Verschil in image positionering tussen Firefox en IE?

[MaZo]

In m'n top div (welke als background m'n header met logo heeft) wil ik een 2e div nesten. In deze DIV komt een image die als link dient. Op zich geen probleem, ware het niet dat Firefox deze anders rendert dan IE.
Voorbeeld:

HTML:

<div id="bla">[img]"images/bla.gif"[/img]</div>

In m'n CSS positioneer ik de DIV:

Cascading Stylesheet:

div#bla {
    position: absolute;
    top: 40px;
    right: 15px;
    width: 15px;
    height: 9px;
}

Wat er nu gebeurt is dat de image in Firefox niet op de juiste positie (iets te ver van de top af) staat, in IE is deze prima.
Als ik de image echter als background in CSS invoer is de positionering opeens in beide browsers zoals het hoort:

Cascading Stylesheet:

div#bla {
    position: absolute;
    top: 40px;
    right: 15px;
    width: 15px;
    height: 9px;
    background: url("../images/bla.gif") no-repeat;
}

De 2e optie lijkt mij netter, omdat in de DIV niks anders komt te staan dan een clickable image. Met een background DIV kan ik hier echter geen link aan meegeven, of heb ik het mis?

[André]

Staat er nog een padding/margin/border omheen?

[MaZo]

Wat er omheen staat is de top div en m'n container:

Cascading Stylesheet:

div#container {
    position: absolute;
    padding-top: 203px;
    padding-bottom: 8px;
    margin-left: -365px;
    top: 0px;
    left: 50%;
    height: 100%;
    width: 730px;
    box-sizing: border-box; 
    -moz-box-sizing: border-box;
}

div#top {
    position: absolute;
    top: 0px;
    height: 203px;
    width: 100%;
    background: url("../images/topimage.gif") no-repeat;
}

[André]

En je div#bla de padding/margin op 0 zet?

[MaZo]

Nope, helaas.
Om het wat duidelijker te maken, dit is wat er fout gaat:

IE:



Firefox:



Het vreemde is dus dat het wel in beide browsers goed is indien ik de image als background van de DIV zet. Maar goed, hier kan ik dan echter weer geen link aan meegeven.

[ Voor 32% gewijzigd door MaZo op 06-02-2005 13:01 ]

[Blaise]

Misschien lukt het door de line-height aan te passen.

[mrbullet]

Ik heb een soortgelijke probleem met een logo ( letter K in het midden) . IE en Konqueror plaats het netjes in het midden, maar bij firefox gaat het niet zo goed.

[MaZo]

Niet echt een soortgelijk probleem, jij kan het logo gewoon in de background verwerken. Bovendien maak jij gebruik van tabellen.

[Thijsmans]

Misschien niet de netste oplossing, en symantisch niet zo correct

code:

.classname a {
  display: block;
  width: 100%;
  height: 230px;
}

<a href="spef.html" alt="spef"></a>

[Verwijderd]

code:

alt="spef"

eehm

[MaZo]

Waar is Crisp als je em nodig hebt.

[Blaise]

Blaise schreef op zondag 06 februari 2005 @ 13:15:
Misschien lukt het door de line-height aan te passen.

Heb je dat nou al geprobeerd?

Je div is namelijk 9 pixels hoog en dat is meestal lager dan de line-height waardoor kleine plaatjes naar beneden "verschuiven" in sommige browsers. De oplossing is dan om de line-height op ~ 9px te zetten. Het lukt waarschijnlijk ook door de font-size aan te passen.

[ Voor 4% gewijzigd door Blaise op 07-02-2005 14:43 ]

[MaZo]

Krijg nou tieten, dat was de oplossing. Heb er nog wel overheen gelezen ook.

Bedankt Blaise!