• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

C

Com783

New member
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: 
<!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 {
width: 50px;
height: 350px;
background-color: #F2F2F2;
}

div#button a {
display: block;
width: 100%;
height: 100%;
}

div#button a img {
position: relative;
top: 50%;
}
</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
 
Zuletzt bearbeitet:
Safari hängt sich hier am display:block auf, also weglassen.

Kann nicht das Ganze entfallen?
PHP: 
div#button a {
display: block;
width: 100%;
height: 100%;
}
 
anna55 schrieb:
Safari hängt sich hier am display:block auf, also weglassen.

Kann nicht das Ganze entfallen?
PHP: 
div#button a {
display: block;
width: 100%;
height: 100%;
}
Zum Vergrößern anklicken....

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.
 
Com783 schrieb:
Ok, mache eine Umleitung für den Safari, indem ich eine andere Methode verwende.
Zum Vergrößern anklicken....

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.
 
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 ;)
 
Com783 schrieb:
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 ;)
Zum Vergrößern anklicken....

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: 
@media screen and (-webkit-min-device-pixel-ratio:0) {
div#button a img {
margin-top:350%;
}
}
alternativ auch mit der Angabe
PHP: 
@media screen and (-webkit-min-device-pixel-ratio:0) {
div#button a img {
margin-top:175px;
}
}
 
Ich hab das jetzt so gelöst:

PHP: 
div#button a img {
position: relative;
top: 50%;
}

@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: 
div#button {
width: 50px;
height: 350px;
background-color: #F2F2F2;
}

div#button a {
display: block;
width: 100%;
height: 100%;
}

div#button a img {
position: relative;
top: 50%;
}

Und in einer externen JS Datei liegt dann das hier:

PHP: 
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
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben