100% bei Gradient
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hi,
Ich hab nochmal eine Frage zu css und zwar mit gradient.
Warum ist der im folgenden Beispiel gezeigte Gradient in Firefox horenzotal 100% breit und vertikal nicht
ohne den Text wird er bei Firefox vertikal ganz zusammengezogen
Bei Crome und IE funktioniert es einwandfrei
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> body{ background: rgb(30,87,153); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgb(30,87,153) 0%, rgb(30,87,153) 35%, rgb(32,124,202) 73%, rgb(125,185,232) 89%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgb(30,87,153)), color-stop(35%,rgb(30,87,153)), color-stop(73%,rgb(32,124,202)), color-stop(89%,rgb(125,185,232))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgb(30,87,153) 0%,rgb(30,87,153) 35%,rgb(32,124,202) 73%,rgb(125,185,232) 89%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgb(30,87,153) 0%,rgb(30,87,153) 35%,rgb(32,124,202) 73%,rgb(125,185,232) 89%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgb(30,87,153) 0%,rgb(30,87,153) 35%,rgb(32,124,202) 73%,rgb(125,185,232) 89%); /* IE10+ */ background: radial-gradient(ellipse at center, rgb(30,87,153) 0%,rgb(30,87,153) 35%,rgb(32,124,202) 73%,rgb(125,185,232) 89%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } h1{ margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; width: 48px; } </style> </head> <body> <h1> Text </h1> </body> </html>
Bitte um hilfe
w3j -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Setze mal
<!DOCTYPE html>
gaaanz an den Anfang. Dann sind alle Browseransichten gleich - aber nicht schön.
Mach mal
html{ background: rgb(30,87,153); /* Old browsers */ ... ... height:100%; }
dann sind alle auch mit DOCTYPE schön. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage