Eurosystem: Zentrierte div in Safari

Hallo,

ich habe ein relativ kleines Problem mit der Zentrierung einer div im Safari Browser. Der Code sieht wie folgt aus:

  
html, body {  
height: 100%;  
width: 100%;  
}  
  
.abstandhalter {  
width:10px;  
height:50%;  
margin-bottom:-260px;  
float:left;  
position:relative;  
}  
  
.zentriertediv {  
clear:left;  
height:540px;  
width:700px;  
position:relative;  
margin:0 auto;  
font-family:verdana;  
font-size:12px;  
}  

  
<div class="abstandhalter"></div>  
<div class="zentriertediv">Zentrierter Inhalt</div>

Die obere div kriegt also die Hälfte des Bildschirms als Höhe und verschiebt sich dann um die Hälfte des unteren div nach oben so das diese mit ihrer Mitte in der Mitte des Bildschirms liegt.
Das Ganze klappt auch super in allen Browsern außer eben Safari und Google Chrome...
Hat jemand eine Idee was diese Browser falsch interpretieren (oder nicht so wie ich es will)?

Vielen Dank im Voraus

Eurosystem

--
Warum braucht man 100 Windows Vista Benutzer um eine Glühbirne zu wechseln?
- Einer wechselt die Birne und 99 klicken die Fehlermeldungen weg...
  1. ich habe ein relativ kleines Problem mit der Zentrierung einer div im Safari Browser. Der Code sieht wie folgt aus:

    html, body {
    height: 100%;
    width: 100%;
    }

      
    Body hat per default ein 'margin' von wenigen Pixeln, in Opera ein 'padding' von einigen Pixeln. Wenn du BODY nun so ohne Weiteres 100% gibst, ist es genau um diese paar Pixel zu groß.  
      
    
    >  ~~~css
      
    
    > .abstandhalter {  
    > width:10px;  
    > height:50%;  
    > margin-bottom:-260px;  
    > float:left;  
    > position:relative;  
    > }  
    >   
    > .zentriertediv {  
    > clear:left;  
    > height:540px;  
    > width:700px;  
    > position:relative;  
    > margin:0 auto;  
    > font-family:verdana;  
    > font-size:12px;  
    > }  
    
    

    Rechne deine Abstände nochmal nach. ;-)

    Grüße
    gaby

    BTW
    Hier ist das Original:

    http://d-graff.de/fricca/center.html

    1. BTW
      Hier ist das Original:

      http://d-graff.de/fricca/center.html

      Und hier diese Technik entsprechend erklärt, damit man auch versteht warum das Ding funktioniert.

      http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css

      1. Erstmal vielen Dank für eure Hilfe!
        Ja, ich weiß das 540/2 eigentlich 270 ist, aber ich wollte die div halt ein bißchen nach unten verschieben :).
        Das Problem habe ich inzwischen auch gelöst, es befanden sich ein paar "Preload"-Bilder vor der Abstand-div mit denen Safari irgendwie nicht zurechtkam.

        Gruß

        Eurosytem

        --
        Warum braucht man 100 Windows Vista Benutzer um eine Glühbirne zu wechseln?
        - Einer wechselt die Birne und 99 klicken die Fehlermeldungen weg...