CSS Conditional CSS Seitenbreite - IE8 und abwärts

Psycho · 11. Dezember 2011

Ok, ich bekomme langsam die Krise

.

Ich bastle gerade an einem neuen Design für eine Homepage.
Die Breite beträgt (bisher) 1200 px und 1.5 em Schrift für Auflösungen über 1920.
Für alles drunter wir das Ganze mit "media queries" angepasst.

Da der IE8 und abwärts dies unter anderem ja nicht unterstützt habe ich ein separates css stylesheet angefertigt und mit

Code:

<!--[if lt IE 9]><link rel='stylesheet' type='text/css' href='css/ie8anddown.css' /><![endif]-->

in die html Dateien eingebunden.

Das Problem ist nur das der IE die Breite und die Schriftgröße ignoriert und ich weiß nicht warum.

Die Ränder die ich als Ersatz für "box-shadow" eingefügt habe werden jedoch problemlos dargestellt...

PS: wenn der CSS Code nicht Professionell ausschaut liegt es daran das ich mir meine Kenntnisse nur ergoogelt habe

Das ie8 usw. css ist

Code:

*{
	margin:0;
	padding:0;
}

body {
	background-color: rgb(242,239,234);
	font-size: 1.2em;
	color: rgb(40,40,40);
	font-family: "Times New Roman", Times, Georgia;
}

#page{
	padding: 2%;
	width: 1021px;
	margin: 0 auto;
}

a:link, a:visited {
	color: rgb(200,20,20);
	text-decoration: none;
}

a:hover, a:focus, a:active {
	text-decoration: underline;
}

a img{
	border: none;
}

a.phone{
	color: rgb(40,40,40);
	cursor: default;
	text-decoration: none;
}

.clear{
	clear:both;
}

h1{
	color: rgb(96,66,44);
	font-size: 1.083em;
	text-align: center;
	line-height: 2.0;
	text-transform: uppercase;
}

h2{
	color: rgb(96,66,44);
	margin-bottom: 0.625em;
	font-size: 1.166em;
	text-transform: uppercase;
	border-bottom: solid;
	border-width: 1px;
	border-color: rgb(96,66,44);
}

h3{
	margin-bottom: 0.208em;
	font-size: 1.083em;
}

h4{
	margin-bottom: 0.208em;
	font-size: 1.0em;
	text-decoration: underline;
}

p{
	line-height: 1.2;
	margin-bottom: 0.416em;
}

#footnote{
	margin-top: 0.625em;
	font-size: 0.75em;
	color: rgb(60,60,60);
}

#browser{
	font-size: 0.833em;
	list-style: none;
	margin-bottom: 1%;
}

.firmen{
	list-style:inside;
	margin-bottom: 1%;
}

.firmen a{
	font-size: 0.833em;
	font-weight: bold;
	color: rgb(40,40,40);
	text-decoration: none;
}

.hyphenate{
	text-align: justify;
}

.gab{
	font-size: 2.0em;
	color: rgb(44,167,219);
	float: left;
	margin-right: 0.0833em;
	line-height: 0.35em;
}

.back{
	font-size: 0.833em;
}

#header {
	height: auto;
	margin-bottom: 2%;
}

#logo{
	width: 25.0%;
	float: left;
}

#slogan{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	font-weight: bold;
	color: rgb(44,167,219);
	float: right;
	display: block;
	margin-right: 28%;
	margin-top: 7%;
}

#main_content{
	margin-top: 2%;
	width: 98%;
	padding: 1%;
	float: left;
	border: 0.1em rgb(150,150,150) solid;
	clear: left;

}

.navbutton{
	margin: 1.0%;
	background-color: rgb(248,246,244);
	width: 23.0%;
	height: 255px;
	float: left;
	border: 0.1em rgb(140,140,140) solid;
}

.navbutton:hover{
	border: 0.1em rgb(180,180,180) solid;
}

.nav_text{
	padding: 5%;
}

.nav_ico{
	width: 44.0%;
	display: block;
	margin-left: auto;
    margin-right: auto;
}

#navwrap{
	width: auto;
}

.section{
	width: auto;
	margin: 1.0%;
	padding: 1.0%;
	background-color: rgb(255,255,255);
	border: 0.1em rgb(140,140,140) solid;
}

.figure{
	float:left;
}

.firmenlogo{
	margin: 2%;
	float:left;
}

.produktbild{
	float: right;
	margin-left: 2%;
	margin-bottom: 2%;
}

.validator{
	height: 31px;
	width: 88px;
}

iframe{
	border:none;
	margin-bottom: 1%;
	width: 800px;
	height: 450px;
}

#karte{
	margin-bottom: 1%;
}

.news h3 p{
	float: left;
}

.linie{
	border-bottom: solid;
	border-width: 1px;
	border-color: rgb(200,200,200);
	margin-bottom: 4%;
}

#footer {
	padding-top: 2%;
	padding-bottom: 2%;
	clear: both;
	font-size: 0.75em;
}


#contact-form-list{
	list-style: none;
}

#contact-form{
	display: block;
	margin-left: 29%;
	margin-top: 4%;
	margin-bottom: 4%;
}

form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea {
	width: 380px;
	height: 30px;
	border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
}

form#contact textarea {
	width: 380px;
	height: 150px;
}

form#contact label {
	display: block;
	margin-top: 10px;
}

form#contact .button {
	display: inline-block;
	margin-top: 20px;
	margin-left: 124px;
	padding: 5px 15px 5px 15px;
	background-color: rgb(37, 158, 218);
	border: none;
	color: rgb(255, 255, 255);
}

form#contact .button:hover, .button:active{
	background-color: rgb(59, 167, 222);
	cursor: pointer;
}

.

Das reguläre CSS

Code:

*{
	margin:0;
	padding:0;
}

body {
	background-color: hsl(240, 40%, 94%);
	background: -moz-linear-gradient(bottom, hsl(230,58%,80%) 0%, hsl(0,0%,99%) 100%) fixed;
	background: -o-linear-gradient(bottom, hsl(230,58%,80%) 0%, hsl(0,0%,99%) 100%) fixed;
	background: -webkit-gradient(linear, left bottom, left top, from(hsl(230,58%,80%)), to(hsl(0,0%,99%))) fixed; /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(bottom, hsl(230,58%,80%) 0%, hsl(0,0%,99%) 100%) fixed; /* ab Safari 5.1 neu und Chrome 10+*/
	background: -ms-linear-gradient(bottom, hsl(230,58%,80%) 0%, hsl(0,0%,99%) 100%) fixed;
	background: linear-gradient(bottom, hsl(230,58%,80%) 0%, hsl(0,0%,99%) 100%) fixed;
	font-size: 1.5em;
	color: hsl(0,0%,16%);
	font-family: "Times New Roman", Times, Georgia;
	text-shadow: 1px 1px 1px hsl(0, 0%, 60%);
}

#page{
	padding: 2%;
	width: 1200px;
	margin: 0 auto;
	min-width: 240px;
}

a:link, a:visited {
	color: hsl(0,82%,43%);
	text-decoration: none;
}

a:hover, a:focus, a:active {
	text-decoration: underline;
}

a img{
	border: none;
}

a.phone{
	color: hsl(0,0%,16%);
	cursor: default;
	text-decoration: none;
}

.clear{
	clear:both;
}

h1{
	color: hsl(25,37%,27%);
	font-size: 1.083em;
	text-align: center;
	line-height: 2.0;
	text-transform: uppercase;
}

h2{
	color: hsl(25,37%,27%);
	margin-bottom: 0.625em;
	font-size: 1.166em;
	text-transform: uppercase;
	border-bottom: solid;
	border-width: 1px;
	border-color: hsl(25,37%,27%);
}

h3{
	margin-bottom: 0.208em;
	font-size: 1.083em;
}

h4{
	margin-bottom: 0.208em;
	font-size: 1.0em;
	text-decoration: underline;
}

p{
	line-height: 1.2;
	margin-bottom: 0.416em;
}

#footnote{
	margin-top: 0.625em;
	font-size: 0.75em;
	color: hsl(0,0%,24%);
}

#browser{
	font-size: 0.833em;
	list-style: none;
	margin-bottom: 1%;
}

.firmen{
	list-style:inside;
	margin-bottom: 1%;
}

.firmen a{
	font-size: 0.833em;
	font-weight: bold;
	color: hsl(0,0%,16%);
	text-decoration: none;
}

.hyphenate{
	text-align: justify;
}

.gab{
	font-size: 2.0em;
	color: hsl(200,71%,50%);
	float: left;
	margin-right: 0.05em;
	line-height: 0.40em;
}

.back{
	font-size: 0.833em;
}

#header {
	height: auto;
	margin-bottom: 2%;
}

#logo{
	width: 25.0%;
	min-width: 240px;
	float: left;
}

#slogan{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	font-weight: bold;
	color: hsl(200,71%,50%);
	float: right;
	display: block;
	margin-right: 25%;
	margin-top: 7%;
	text-shadow: -1px -1px 1px hsl(38,24%,80%), 1px 1px 1px hsl(38,24%,97%);
}

#main_content{
	background-color: hsla(0,0%,100%,0.5);
	margin-top: 2%;
	width: 98%;
	padding: 1%;
	float: left;
	border-radius: 0.2em;
	box-shadow: 0px 0px 4px hsl(0,0%,59%);
	clear: left;
}

.navbutton{
	margin: 1.0%;
	background-color: hsl(30,22%,97%);
	width: 23.0%;
	height: 314px;
	min-width: 230px;
	float: left;
	border-radius: 0.25em;
	box-shadow: 0px 0px 10px hsl(0,0%,55%);
}

.navbutton:hover{
	box-shadow: 0px 0px 4px hsl(0,0%,55%);
}

.nav_text{
	padding: 5%;
}

.nav_ico{
	width: 44.0%;
	max-width: 126px;
	display: block;
	margin-left: auto;
    margin-right: auto;
    opacity: 0.60;
}

#navwrap{
	width: auto;
}

.section{
	width: auto;
	margin: 1.0%;
	padding: 1.0%;
	background-color: hsl(30,22%,97%);
	border-radius: 0.25em;
	box-shadow: 0px 0px 4px hsl(0,0%,55%);
}

.firmenlogo{
	margin: 2%;
	float:left;
}

.produktbild{
	float: right;
	margin-left: 2%;
	margin-bottom: 2%;
}

.validator{
	height: 31px;
	width: 88px;
}

iframe{
	border:none;
	margin-bottom: 1%;
	width: 800px;
	height: 450px;
}

#karte{
	margin-bottom: 1%;
}

.news h3 p{
	float: left;
}

.linie{
	border-bottom: solid;
	border-width: 1px;
	border-color: hsl(0,0%,78%);
	margin-bottom: 4%;
}

#footer {
	padding-top: 2%;
	padding-bottom: 2%;
	clear: both;
	font-size: 0.75em;
}

#contact-form-list{
	list-style: none;
}

#contact-form{
	display: block;
	margin-left: 31%;
	margin-top: 4%;
	margin-bottom: 4%;
}

form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea {
	width: 380px;
	height: 30px;
	border: 1px solid hsl(0,0%,80%);
    background-color: hsl(0,100%,100%);
    box-shadow: inset 0 2px 4px hsla(0,0%,0%,0.3);
}

form#contact textarea {
	width: 380px;
	height: 150px;
}

form#contact label {
	display: block;
	margin-top: 10px;
}

form#contact .button {
	display: inline-block;
	margin-top: 20px;
	margin-left: 124px;
	padding: 5px 15px 5px 15px;
	background-color: hsl(200,71%,50%);
	border: none;
	color: hsl(0,100%,100%);
	border-radius: 4em;
}

form#contact .button:hover, .button:active{
	background-color: hsl(200,71%,55%);
	cursor: pointer;
}

#gesendet{
	margin-top: 3%;
	text-align: center;
}

@media only screen and (max-width: 1920px) {
	
body {
	font-size: 1.2em;
}

#page{
  	width: 1021px;
}

#slogan{
	margin-right: 28%;
}

.navbutton{
	height: 255px;
}

#contact-form{
	margin-left: 29%;
	margin-top: 4%;
	margin-bottom: 4%;
}
}

@media only screen and (max-width: 1063px) {

#page{
	padding: 1%;
  	width: 750px;
}

iframe{
	width: 100%;
}

#slogan{ 
	margin-right: 6%;
	margin-top: 9%;
}

#contact-form{
	margin-left: 22%;
	margin-top: 5%;
	margin-bottom: 5%;
}
}

@media only screen and (max-width: 781px) { 
	
#page{
  	width: 489px;
}

#logo{
	margin-top: 2%;
	display: block;
	margin-left: auto;
    margin-right: auto;
    float: none;
}

#slogan{ 
	margin-top: 1%;
	margin-left: auto;
    margin-right: auto;
    float:none;
    text-align: center;
}

#karte{
	width: 100%;
}

#contact-form{
	margin-left: 6.5%;
	margin-top: 10%;
	margin-bottom: 10%;
}
}

@media only screen and (max-width: 514px) { 	

#page{
	padding: 1%;
  	width: 240px;
}

#slogan{ 
	display: none;
}

iframe{
	height: 190px;
}

.produktbild{
	width: 100%;
}

#contact-form{
	margin-left: 0%;
	margin-top: 14%;
	margin-bottom: 14%;
}

form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea {
	width: 99%;
}

form#contact textarea {
	width: 99%;
}
form#contact .button {
	margin-left: 46px;
}
}

Crizzo · 11. Dezember 2011

Du musst in die IE-CSS nur das eintragen, was in der normalen CSS-Datei nicht schon steht und wenn das IE-CSS die Normale-CSS überschreiben soll, muss es danach mit der gleichen oder mit einer höheren Spezifität geschrieben werden.

Psycho · 11. Dezember 2011

Ah ok. Vielen Dank.
Ich hatte das IE-Css vor meinem normalen eingefügt...
Blöder Fehler

Jetzt klappts

Die nicht benötigen Teile werde ich dann auch noch entfernen.

Daaron · 11. Dezember 2011

alternativ gibts ja immer noch das !important - Statement. Eine höhere Gewichtung geht nicht, da ist es echt egal, wann es gelesen wird.

Crizzo · 11. Dezember 2011

Daaron schrieb:
alternativ gibts ja immer noch das !important - Statement. Eine höhere Gewichtung geht nicht, da ist es echt egal, wann es gelesen wird.

Das meinte ich ja mit Spezifität. Aber "!important" sollte man möglichst vermeiden, da dies für die Benutzer gedacht ist.

Suche

CSS Conditional CSS Seitenbreite - IE8 und abwärts

Psycho

Lt. Junior Grade

Crizzo

Redakteur

Psycho

Lt. Junior Grade

Daaron

Fleet Admiral

Crizzo

Redakteur

Ähnliche Themen