CSS Probleme in vielen Browsern mit linearem Farbverlauf im Hintergrund

[M.a.x_Mustermann]

Hallo zusammen,

zuerst eine Warnung: ich bin blutiger Anfänger - also bitte nicht verprügeln, wenn in meinem Code Anarchie herrscht. Höre in diesem Semester eine Webprogrammiervl. Die erste Aufgabe war eine Seite in XHTML zu erstellen. Das war auch mein erster Schritt mit HTML - hat aber soweit geklappt. Jetzt soll das ganze mit HTML5 und CSS gemacht werden und ein bißchen hübscher aussehen.
Ich bin fast durch, allerdings habe ich noch Probleme mit der Darstellung in verschiedenen Browsern. Denn die Aufgabenstellung gibt vor, dass wir das auch überprüfen müssen (FF, IE, Opera, Chrome, Safari). Vielleicht könnt ihr mir ja helfen? Macht euch aber bitte keinen Stress, wenn euch nicht gleich eine Lösung einfällt, geb ich das ganze einfach so ab.

Nun zu meinen Problemen:
Ich habe in der CSS-Datei für den Body einen linearen Farbverlauf definiert. Der wird im Opera und im IE erstmal gar nicht angezeigt.
Dann gibt es auf den Seiten, die von der Startseite abgehen schiefe Banner, die ich "über den Rest" gelegt habe. Dem Firefox macht das nichts aus, allerdings verursachen diese auf all den Seiten mit den Bannern in Chrome und Safari fiese Querstreifen:

Bekomm ich das irgendwie geregelt?

Achja, hier noch mein Auszug aus der CSS-Datei:

Hintergrund:
body {
color: rgb(50, 50, 150);
text-align: center;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: auto;
padding: auto;
border: solid;
border-color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(50,50,150,.75)));
background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,150,.75));
}

Banner (der andere natürlich analog)
.rotationlinks {
color: rgb(50,50,150);
background-color: rgb(255,255,255);
-ms-box-shadow: 2px 2px 20px rgb(50,50,150);
-ms-transform:rotate(-45deg);
-moz-box-shadow: 2px 2px 20px rgb(50,50,150);
-moz-transform:rotate(-45deg);
-webkit-box-shadow: 5px 5px 20px rgb(50,50,150);
-webkit-transform:rotate(-45deg);
-o-box-shadow: 2px 2px 20px rgb(50,50,150);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
box-shadow: 2px 2px 20px rgb(50,50,150);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}



Schonmal vielen Dank!
Viele Grüße,
Max

 

[threadi]

Die gradient-Eigenschaften werden momentan nicht einheitlich unterstützt. Wie es auch für den IE geht steht z.B. hier:
Cross-Browser CSS Gradient

Unabhängig davon würde ich dir jedoch dazu raten ein Hintergrundbild mit dem Farbverlauf zu verwenden. Das erspart dir die browserspezifischen Schreibweisen und ggfs. spätere Probleme sobald die Unterstützung mal einheitlich sein sollte.

 

[M.a.x_Mustermann]

Vielen Dank für die Hilfe. Dann steige ich lieber auf eine Hintergrundgraphik um.
Ist es möglich diese dann automatisch auf Seitenhöhe zu skalieren? Ich hätte nämlich gerne, dass der Farbverlauf von oben bis ganz unten geht. Da ich dazu keine Eigentschaften gefunden habe, ist mir als einzige Möglichkeit eingefallen einen sehr hohen Streifen zu erstellen, diesen vertikal nicht zu wiederholen und die Zielfarbe als Hintergrund einzurichten. Geht das noch eleganter?

 

[threadi]

Nein, Hintergrundgrafiken können nicht skaliert werden. Wenn Du sowas willst, müsstest Du das Bild als Bild einfügen und per absoluter Positionierung und z-index hinter den Inhalt der Webseite legen. Das hat jedoch den immensen Nachteil, dass Du eine riesige Datei erstellen und hochladen müsstest und alle Besucher diese auch erst Laden müssten um sie zu sehen.

Die von dir gewählte Variante ist schon die optimale für sowas. Nur, dass man das Bild eben nicht skalieren kann.

 

[M.a.x_Mustermann]

Dann weiß ich Bescheid. Nochmal vielen Dank und ein schönes Wochenende