Mac IE & Div-Tags.. ?

Dieses Thema im Forum "Software" wurde erstellt von affenschwanz, 27. Mai 2005.

  1. affenschwanz

    affenschwanz @ffenschwanzerl

    Wie immer funktionierts in allen anderen Browsern, nur der IE für Mac muckt wieder herum!

    -> ich habe zwei Divs nebeneinander und angeordnet. (float:left; ) darüber noch ein div. Die 3 Divs sind mit CSS formatiert.

    Jetzt möchte ich das ganze in der Mitte zentrieren und hab dazu um die drei divs den tag <div align="center"></div> geschrieben.

    Und wie gesagt, IE for Win und Safari und Netscape und Firefox undundund.. alle stellen das korrekt dar.
    Nur der IE für Mac zeigt mir nur das obere div in der Mitte an, die anderen zwei werden links hingestellt.

    Jemand ne ahnung, wie ich dem IE für Mac sagen kann, er soll auch die zwei nebeneinander gestellten Divs in die Mitte des Browser-Fensters stellen?
    :confused:

    Vielen Dank schon im Voraus!
    Gruss
     
  2. plochi

    plochi New Member

    Zeigst / Schickst Du mir mal den CSS-/Seitenquelltext ?
     
  3. kawi

    kawi Revolution 666

    Vielleicht liegts auch daran das alle anderen von dir genannten browserversionen auf dem neuesten Stand sind - während der IE für Mac so seit mittlerweile 4 Jahren nicht mehr aktuallisiert wurde ?
     
  4. plochi

    plochi New Member

    Sicher nicht. Auch ich hatte schon mit dem Problem gekämpft - und es gelöst. Meist will der IE ein paar "extra"/"anders formulierte" CSS Angaben, zudem interpretiert der IE das Boxmodell falsch, was u sehr unliebsamen Effekten führen kann.
     
  5. affenschwanz

    affenschwanz @ffenschwanzerl

    Genau deshalb frag ich ja hier!

    @kawi. dachte ich auch, aber normale div tags kann er, nur halt nicht floated divs..

    @plochi. werd's heute abend mal schnell reinstellen bzw. die formatierungen der divs..
    danke!
    Gruss
     
  6. plochi

    plochi New Member

    Doch doch, f***ing M$ IE kann auch floaten - und wie !
    Auf meinen 2 Seiten (s. Signatur) sind z.Bsp. 2 bzw. 3 nebeneinander gefloatete (und zentrierte) DIV's zu sehen.
     
  7. affenschwanz

    affenschwanz @ffenschwanzerl

    so, endlich Zeit um den Code mal reinzustellen..

    also: Hab im CSS Doc 3 Div-IDs definiert (top, lefty & righty)
    wie gesagt: Top ist oben und gleich darunter lefty & righty.

    Mit dem Tag <div align=center></div> hab ich die 3 divs eingeschlossen; d.h. das "Center-DIV" ist im StyleSheet nicht vordefiniert. Wozu auch? Gibt nur mehr Code.
    Safari zeigt Korrekt an, IE nicht.

    Zum CSS Doc Code:

    PHP:
    #top {
        
        
    width600px;
        
    height120px;
        
    background-color:#999999
        
    }

    #lefty {
        
        
    width260px;
        
    height500px;
        
    background-color:#CCCC2C;
        
    float:left;

    }

    #righty {
        
    padding:10px;
        
    width300px;
        
    height:490px;
        
    background-color:#FFFFFF;
        
    float:left;


    }
    so.. und der HTML Code sieht wie folgt aus:

    PHP:
    <div align="center">
    <
    div id="top">
    hier kommt ein sinnloser Text
    </div>
    <
    div id="lefty">links</div>
    <
    div id="righty">rechts</div>
    </
    div>
    Jep.. ich glaub das wars.. überprüfen.. jep!
    Gruss
     
  8. affenschwanz

    affenschwanz @ffenschwanzerl

    @plochi:

    Kannst du mit dem Quelltext was anfangen? Wo liegt der Fehler?
    Danke!
    Gruss
     
  9. plochi

    plochi New Member

    @Affenschwanz

    Der folgende CSS und HTML-Code funktioniert ( getestet in Safari, Mac IE, Firefox und Camino ). Einige Sachen habe ich hinzugefügt und kommentiert.
    HTML:
    #top { 
    height:120px;
    background-color:#999;
    } 
    #lefty {
    width:260px;
    height:500px;
    background-color:#CCCC2C;
    float:left;
    margin:0px;
    padding:0px;
    } 
    #righty { 
    padding:10px; /* das bedeutet Ärger */
    margin:0px;
    background-color:#090; 
    float:left; 
    
    /* Box Model Hack	*/
    width:340px;		/* falsche Angabe für den IE */
    height:500px;		/* falsche Angabe für den IE */
    voice-family:"\"}\"";
    voice-family:inherit;
    width:320px;		/* richtige Breite für alle anderen */
    height:480px;		/* richtige Höhe für alle anderen */
    } 
    /* gehört noch zum Box Model Hack */
    html>body #righty {
    width:320px;
    height:480px;
    }
    
    /* neu hinzugekommen */
    #zentrierung {
    margin	:0px auto;
    padding	:0px;
    width	:600px;
    }
    
    Die Lösung liegt hier im alles umschließenden DIV "zentriert", der mittels "margin:0 auto" alles richtig zentriert.
    HTML:
    <div id="zentrierung"> 
    	<div id="top"> 
    	hier kommt ein sinnloser Text 
    	</div> 
    	<div id="lefty">links</div> 
    	<div id="righty">rechts</div> 
    </div>
    
    Die Breite / Höhe habe ich einmal korrigiert.
    Gesamtbreite: 600px-260px = 340px
    Breite rechte Spalte: 340px-10px(links)-10px(rechts)=320px
    Gesamthöhe 500px - 10px(0ben)-10px(unten)=480px;

    Was hier den recht großen Aufwand verursacht, ist die 10px Padding -Angabe der rechten Spalte.. Hier muß das Box Model Hack 'ran, sonst gibt es Ärger. IE 5.x interpretiert die width/height Angabe falsch (zur width-Angabe wird das margin und padding hinzugerechnet, lt. CSS Spezifikation gibt width aber nur die Innenbreite (ohne margin und padding) an) !

    Ich würde für den Aufbau des Seitendesign bei den zuständigen DIV's grundsätzlich immer mit margin:0 und padding:0 arbeiten, das erspart viel Ärger.

    Die hier gezeigte Seite ist für eine Weile unter
    http://www.ploch.de/macwelt/test.htm
    zu sehen.

    Wenn's noch Fragen gibt, fragen !
    Schönes Wochenende !
     
  10. affenschwanz

    affenschwanz @ffenschwanzerl

    danke! schau' mir das heute noch an..
    jetzt aber erstma ans schöne Wetter raus!

    Gruss
     

Diese Seite empfehlen