Wie bekomme ich meine css-Farbverlauf funktioniert im IE?
http://www.10thplanetjjchicago.com/
Alles scheint gut zu funktionieren, im Firefox/Chrome/Safari/Opera. Aber ich kann nicht scheinen, um meinen content-div auf display ordnungsgemäß in Internet Explorer. Die Steigung will einfach nicht anzeigen, oder schneidet noch der text und der Inhalt wird angezeigt. Ich habe das Spiel mit der Neuordnung von Elementen und so weiter, aber ich kann nicht herausfinden :/
Sehen mein code nur "Quelltext Anzeigen".
CSS minimiert, also hier ist der CSS:
body {
background: #080808;
margin: 0;
padding: 0;
}
#bg {
background: linear-gradient(to bottom,#232323,#080808);
background: -moz-linear-gradient(top,#232323,#080808);
background: -ms-linear-gradient(top,#232323,#080808);
background: -o-linear-gradient(top,#232323,#080808);
background: -webkit-linear-gradient(top,#232323,#080808);
background: -webkit-gradient(linear,left top,left bottom,from(#232323),to(#080808));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#232323',endColorstr='#080808',GradientType=0);
position: absolute;
top: 0;
width: 100%;
height: 531px;
}
.header {
background: #282828;
background: linear-gradient(to bottom,#040404,#282828);
background: -moz-linear-gradient(top,#040404,#282828);
background: -ms-linear-gradient(top,#040404,#282828);
background: -o-linear-gradient(top,#040404,#282828);
background: -webkit-linear-gradient(top,#040404,#282828);
background: -webkit-gradient(linear,left top,left bottom,from(#040404),to(#282828));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#040404',endColorstr='#282828',GradientType=0);
border: 1px solid #7ba145;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
margin: 50px auto;
width: 900px;
height: 85px;
}
.logo {
border: 0;
opacity: .9;
}
.logo: hover {
opacity: 1;
}
.nav-left,.nav-right {
float: left;
margin-top: 32px;
text-align: center;
width: 338px;
word-spacing: 40px;
}
.nav-middle {
float: left;
margin-top: -48px;
position: relative;
z-index: 2;
}
a.nav-link: link,a.nav-link: visited {
color: #b5ed46;
font: 18px impact,tahoma,arial;
text-decoration: none;
opacity: .8;
}
a.nav-link: hover {
color: #eee;
border-bottom: 2px solid #96c34b;
opacity: .9;
}
.background {
text-align: center;
}
.bg-img {
border-left: 1px solid #96c34b;
border-right: 1px solid #96c34b;
margin-top: -50px;
opacity: .9;
}
.bg-img: hover {
opacity: 1;
}
.main {
background: #303030;
background: linear-gradient(to bottom,#171717,#303030);
background: -moz-linear-gradient(top,#171717,#303030);
background: -ms-linear-gradient(top,#171717,#303030);
background: -o-linear-gradient(top,#171717,#303030);
background: -webkit-linear-gradient(top,#171717,#303030);
background: -webkit-gradient(linear,left top,left bottom,from(#171717),to(#303030));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#171717',endColorstr='#303030',GradientType=0);
border: 1px solid #96c34b;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
margin: -4px auto;
padding: 32px 32px 16px;
width: 836px;
}
.content {
float: left;
}
.title {
color: #96c34b;
font: 18px impact,tahoma,arial;
opacity: .9;
word-spacing: 3px;
}
.title: hover {
color: #eee;
border-bottom: 2px solid #96c34b;
}
a: link,a: visited {
color: #b5ed46;
text-decoration: none;
}
a: hover {
text-decoration: underline;
}
p {
color: #eee;
font: 12px tahoma,arial;
line-height: 15px;
margin-bottom: 20px;
opacity: .8;
text-align: justify;
width: 550px;
word-spacing: 3px;
}
.side-panel {
color: #efefef;
float: right;
font: 11px tahoma,arial;
line-height: 14px;
margin-bottom: 20px;
opacity: .9;
text-align: justify;
width: 250px;
word-spacing: 3px;
}
p: hover {
color: #efefef;
opacity: .9;
}
.side-panel: hover {
color: #fff;
}
.copyright {
color: #ddd;
clear: both;
font: 10px tahoma,arial;
text-align: center;
opacity: .8;
}
.copyright: hover {
color: #efefef;
opacity: .9;
}
- Es wäre einfacher zu helfen, wenn Sie konnte machen a jsfiddle demo (etwas, das Menschen können leicht Bearbeiten und damit Experimentieren).
Du musst angemeldet sein, um einen Kommentar abzugeben.
CSS ist sehr schwer zu Lesen (versuchen Sie neue Zeilen mindestens, wenn es mal etwas lang), aber auf den 1. Blick sieht es aus wie Sie bedeckt alle Grundlagen. Hier ist ein Beispiel-gradient (höherer Kontrast grey AKA schwarz-Glas), können Sie einen Blick auf:
Ich versuche nicht zu hand-code-Gradienten, da es immer entpuppt sich als ein Schmerz zu ändern, dass alle diese Werte bei der gleichen Zeit. Versuchen Sie dies: http://www.colorzilla.com/gradient-editor/ (das ist, wo ich geklaut, gradient aus)