IE plaatst DIV niet juist, andere browsers wel

[Pctraverse]

Ik ben met een ontwerpje bezig.

http://www.pctraverse.nl/Lammert/index.html

Er zit bovenaan een script voor een fotoboek.
Dit kan naar wens veranderd worden in een enkele foto.

Het zijn 2 Div's..de foto div, en de Boek div.

#Boek
{
position: relative;
width: 940px;
text-align: center;
overflow: hidden;
float: left;
visibility: visible;
}

#foto
{
position: absolute;
width: 940px;
text-align: center;
overflow: hidden;
display: none;
}

var q=0;

function onoff()
{
if (q==0)
{
document.getElementById("Boek").style.visibility="hidden";
document.getElementById("foto").style.display="block";
q=1;
}
else
{
document.getElementById("foto").style.display="none";
document.getElementById("Boek").style.visibility="visible";
q=0;
}
}

De meeste browsers doen precies wat ik verwacht.
n.l de foto over het boek heen zetten.
Alleen IE zit hem rechtsonder...

Iemand een idee hoe dit op te lossen?

[MoietyMe]

Cascading Stylesheet:

top: 0;
left: 0;

Toevoegen

[Pctraverse]

Dank je wel voor je oplossing...
Maar als het zo eenvoudig was had ik de vraag niet gesteld.
Safari, Chrome, Firefox, zetten de foto netjes waar hij hoort.
Als ik de absolute 0, 0 zou invoeren bij een absolute gedim. Div dan komt hij
helemaal links boven te staan.

[Verwijderd]

Verklein de plaatjes die je gebruikt op de site: 2.048px × 1.536px (scaled to 470px × 352px) maakt de site erg langzaam.

[Pctraverse]

dank je Blackspot...dat had ik al aan klant doorgegeven....komt goed.

[Pctraverse]

Vreemde is als ik beide Div's relatief maak en een z-index meegeef, en dan een negatieve margin-top geef bij foto, dat dan wel werkt bij IE, maar de andere browsers verschuiven dan de foto helemaal omhoog.

[Pctraverse]

Ik heb het opgelost door specifiek voor IE wat te wijzigen in de style.

<!--[if IE]>
<style type="text/css">
#foto
{
position: relative;
z-index: 800;
width: 940px;
text-align: center;
overflow: hidden;
visibility: hidden;
top: 0px;
left: 0px;
margin-top:-355px;
}
</style>
<![endif]-->

[NNF]

En als je zowel #boek als #foto een width en een height geeft?

Je oplossing werkt misschien, maar mooi is anders

[MoietyMe]

Pctraverse schreef op zaterdag 07 december 2013 @ 16:13:
Dank je wel voor je oplossing...
Maar als het zo eenvoudig was had ik de vraag niet gesteld.
Safari, Chrome, Firefox, zetten de foto netjes waar hij hoort.
Als ik de absolute 0, 0 zou invoeren bij een absolute gedim. Div dan komt hij
helemaal links boven te staan.

Je moet top: 0; en left: 0; toevoegen aan #foto, hoe weet de browser anders waar hij het element absoluut moet positioneren?

[R4gnax]

Good Fella schreef op zondag 08 december 2013 @ 19:45:
[...]

Je moet top: 0; en left: 0; toevoegen aan #foto, hoe weet de browser anders waar hij het element absoluut moet positioneren?

Op de plek waar het element had gestaan als het static gepositioneerd was geweest. Dat staat trouwens al best lang zo beschreven in de CSS specificatie, zie het hoofdstuk "Visual formatting model details" van CSS2.

[ Voor 5% gewijzigd door R4gnax op 08-12-2013 19:57 ]

[MoietyMe]

R4gnax schreef op zondag 08 december 2013 @ 19:56:
[...]


Op de plek waar het element had gestaan als het static gepositioneerd was geweest. Dat staat trouwens al best lang zo beschreven in de CSS specificatie, zie het hoofdstuk "Visual formatting model details" van CSS2.

I know, daarom wordt de div ook onder de andere geplaatst; omdat er geen positie is opgegeven.