Ergebnis 1 bis 8 von 8
  1. #1
    Com783 ist offline Eroberer
    registriert
    06-03-2008
    Ort
    Böblingen, Baden-Würtemberg
    Beiträge
    55

    Safari Problem: top: 50% wirkt nicht im DIV Container

    Hallo,

    derweil arbeite ich an einem DIV Struktur (anna hat mich dazu gebracht ). Nun, normalerweise weist der Internet Explorer immer Fehler in HTML, CSS oder auch JavaScript usw. öfters auf. Nun dies mal ist es, erstaunlicherweise der Safari (benutze den Windows XP Safari; Version 3.1.1).


    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <
    head>
    <
    style type="text/css">
    div#button {
    width50px;
    height350px;
    background-color#F2F2F2;
    }

    div#button a {
    displayblock;
    width100%;
    height100%;
    }

    div#button a img {
    positionrelative;
    top50%;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="button"><a href="#"><img name="button_img" src="pfeil.gif" border="0" alt="" /></a></div>
    </
    body>

    </
    html
    Das Bild hat ungefähr eine Größe von 35x30 Pixel. Es soll mit top: 50%; vertikal zentriert werden. Im IE, FF und Opera funktioniert das alles einwandfrei, nur, im Safari wird das Bild nicht vertikal dargestellt.

    Ich hab es schon mit margin-top: 50% versucht (was aber in allen 4 Browsern nur als 50 Pixel Abstand von oben dargestellt wird), padding-top sowie vertical-align hilft sowieso nicht (alles bei div#button a img).

    Brauche deshalb dringend Hilfe

    Ach ja, @anna55, danke, für deinen CSS Link (obwohl ich viele einzelne Codes schon gewusst habe, aber nur nicht umgesetzt habe).


    Mfg
    Geändert von Com783 (08-08-2008 um 02:06 Uhr)

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Safari hängt sich hier am display:block auf, also weglassen.

    Kann nicht das Ganze entfallen?
    PHP-Code:
    div#button a {
    displayblock;
    width100%;
    height100%;



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Com783 ist offline Eroberer
    registriert
    06-03-2008
    Ort
    Böblingen, Baden-Würtemberg
    Beiträge
    55

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Zitat Zitat von anna55 Beitrag anzeigen
    Safari hängt sich hier am display:block auf, also weglassen.

    Kann nicht das Ganze entfallen?
    PHP-Code:
    div#button a {
    displayblock;
    width100%;
    height100%;

    Nein, weil das ein Button sein soll, und dort soll vertikal mittig ein Pfeil nach links sein. Der ganze DIV Bereich soll anklickbar sein, darum display: block; usw.

  4. #4
    Com783 ist offline Eroberer
    registriert
    06-03-2008
    Ort
    Böblingen, Baden-Würtemberg
    Beiträge
    55

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Ok, mache eine Umleitung für den Safari, indem ich eine andere Methode verwende.

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Zitat Zitat von Com783 Beitrag anzeigen
    Ok, mache eine Umleitung für den Safari, indem ich eine andere Methode verwende.
    Noch eine Idee: Warum packst Du nicht
    Code:
    position: relative;
    top: 50%;
    aus "div#button a img" mit zu "div#button a", sodass die img-Angabe entbehrlich wird? Extra für Safari ne Umleitung zu machen, kommt mir merkwürdig vor.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    Com783 ist offline Eroberer
    registriert
    06-03-2008
    Ort
    Böblingen, Baden-Würtemberg
    Beiträge
    55

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Hehe, nein, dann verschiebt sich der A Bereich nach unten, um 50% der Höhe vom DIV Bereich, dadurch liegt der A Bereich nur noch zu 50% im DIV Bereich

  7. #7
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Zitat Zitat von Com783 Beitrag anzeigen
    Hehe, nein, dann verschiebt sich der A Bereich nach unten, um 50% der Höhe vom DIV Bereich, dadurch liegt der A Bereich nur noch zu 50% im DIV Bereich
    Ist mir heute Nacht nicht aufgefallen. Mehr weiß ich nicht. Ein Safari-Hack direkt unter den Angaben für die anderen Browser könnte so aussehen
    PHP-Code:
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    div#button a img {
    margin-top:350%;
    }

    alternativ auch mit der Angabe
    PHP-Code:
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    div#button a img {
    margin-top:175px;
    }



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  8. #8
    Com783 ist offline Eroberer
    registriert
    06-03-2008
    Ort
    Böblingen, Baden-Würtemberg
    Beiträge
    55

    AW: Safari Problem: top: 50% wirkt nicht im DIV Container

    Ich hab das jetzt so gelöst:

    PHP-Code:
    div#button a img {
    positionrelative;
    top50%;
    }

    @
    media screen and (-webkit-min-device-pixel-ratio:0) {
    div#button a img {
    margin-top:350%;
    }


    Dann klappt es perfekt, außer beim Opera, aber da kann ich GOTT SEI DANK eine Umleitung mittels JS navigator.appName machen.

    Das sieht dann so aus, dass in der Haupt CSS Datei nur das dort drin liegt:

    PHP-Code:
    div#button {
    width50px;
    height350px;
    background-color#F2F2F2;
    }

    div#button a {
    displayblock;
    width100%;
    height100%;
    }

    div#button a img {
    positionrelative;
    top50%;

    Und in einer externen JS Datei liegt dann das hier:

    PHP-Code:
    if(navigator.appName != "Opera") {
    document.write('<style type="text/css">@media screen and (-webkit-min-device-pixel-ratio:0) {div#button a img {margin-top: 350%;}}</style>');

    und wird dann in die HTML Datei eingebunden, und so ist alles schön XHTML treu

    Danke dir


    Mfg Com783
    Geändert von Com783 (12-08-2008 um 18:02 Uhr)

Ähnliche Themen

  1. CSS DIV Problem
    Von invy im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 06-08-2005, 23:58
  2. prob: automatisches nach unten Scrollen im Div container
    Von scorpion4000 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 30-03-2005, 21:43
  3. IE DOM und Problem mit div und class
    Von Atlanx im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-02-2005, 00:15
  4. DIV onClick Problem
    Von alibär im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 03-11-2004, 10:56
  5. Zerschossenes Design
    Von Clausgrm im Forum Allgemeines
    Antworten: 19
    Letzter Beitrag: 26-04-2003, 14:36

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •