Ergebnis 1 bis 8 von 8
LinkBack URL
About LinkBacks-
08-08-2008, 01:58 #1
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).
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.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 {
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>
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).
MfgGeändert von Com783 (08-08-2008 um 02:06 Uhr)
-
09-08-2008, 02:04 #2
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 {
display: block;
width: 100%;
height: 100%;
}
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
10-08-2008, 19:59 #3
Eroberer
- registriert
- 06-03-2008
- Ort
- Böblingen, Baden-Würtemberg
- Beiträge
- 55
AW: Safari Problem: top: 50% wirkt nicht im DIV Container
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.
Zitat von anna55
-
10-08-2008, 20:03 #4
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.
-
10-08-2008, 22:06 #5
Moderator
- registriert
- 06-02-2006
- Ort
- Taunusstein
- Beiträge
- 3.430
AW: Safari Problem: top: 50% wirkt nicht im DIV Container
Noch eine Idee: Warum packst Du nicht Zitat von Com783
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.Code:position: relative; top: 50%;
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
11-08-2008, 12:36 #6
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
-
11-08-2008, 14:07 #7
Moderator
- registriert
- 06-02-2006
- Ort
- Taunusstein
- Beiträge
- 3.430
AW: Safari Problem: top: 50% wirkt nicht im DIV Container
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 Zitat von Com783
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
alternativ auch mit der AngabePHP-Code:@media screen and (-webkit-min-device-pixel-ratio:0) {
div#button a img {
margin-top:350%;
}
}
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)
-
11-08-2008, 20:16 #8
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 {
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:
Und in einer externen JS Datei liegt dann das hier:PHP-Code: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 wird dann in die HTML Datei eingebunden, und so ist alles schön XHTML treuPHP-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>');
}
Danke dir
Mfg Com783Geändert von Com783 (12-08-2008 um 18:02 Uhr)
ZitierenÄhnliche Themen
-
CSS DIV Problem
Von invy im Forum CSS und (X)HTMLAntworten: 8Letzter Beitrag: 06-08-2005, 23:58 -
prob: automatisches nach unten Scrollen im Div container
Von scorpion4000 im Forum JavaScriptAntworten: 5Letzter Beitrag: 30-03-2005, 21:43 -
IE DOM und Problem mit div und class
Von Atlanx im Forum JavaScriptAntworten: 1Letzter Beitrag: 08-02-2005, 00:15 -
DIV onClick Problem
Von alibär im Forum JavaScriptAntworten: 2Letzter Beitrag: 03-11-2004, 10:56 -
Zerschossenes Design
Von Clausgrm im Forum AllgemeinesAntworten: 19Letzter Beitrag: 26-04-2003, 14:36
Lesezeichen