nicht angemeldet
IE6 liest falsche CSS Datei
Gunnar BittersmannHallo zusammen...
Zunächst versuche ich mein Problem, hoffentlich verständlich, zu formulieren: Ich habe eine Seite erstellt, die in den Browsern Firefox, IE 7, IE 8 und Opera optimal dargestellt wird. Wie üblich funktioniert das allgemeine CSS nicht für den IE 6, sodass ich für diesen Browser eine separate CSS Datei erstellt habe. Das Problem ist nun, dass der Browser IE 6 auf dieses CSS nicht zugreift, also immer die falsche Datei einliest. Ich vermute, dass der Fehler in der Deklaration des Doctype liegt und hoffe, dass mir jemand von euch helfen kann.
Ich löse Probleme am liebsten selbst und habe mich auf unzähligen Seiten informiert und die unterschiedlichsten Browserweichen und Möglichkeiten wie z.b. CSS Filter ausprobiert und finde einfach den Fehler nicht. Javascript (Browsererkennung) will ich auf keinen Fall einsetzen. Vielleicht sitze ich nun einfach schon zulange daran und sehe den Wald vor lauter Bäumen nicht mehr. Ich würde mich sehr freuen, wenn ich hier Hilfe bekommen könnte.
Hier geht es zur Seite (für Firefox, IE7, IE8 und Opera)
Hier geht es zur Seite (optimale Darstellung mit IE6)
So sieht der aktuelle Header aus, der den IE6 leider nicht anzusprechen scheint:
<!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>
<title>Startseite</title>
<link href="css/layout.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<!--[if IE 7]>
<style type="text/css" media="all">@import "/css/ie.css";</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all">@import "/css/ie6.css";</style>
<![endif]-->
</head>
Am liebsten wäre mir natürlich eine Lösung, bei der ich nur eine CSS Datei für alle Browser nutzen könnte. Vielleicht kann man die unterschiedlichen Anweisungen auch in einer Datei zusammenfassen.
CSS für moderne Browser:
* {margin: 0; padding: 0;}
/********** STRUKTUR **********/
body {
background:#FFFFFF url(../images/body_textur.png) repeat;
font-family: verdana,arial, Times, serif;
font-size:62.5%;
}
#container {
width:950px;
margin:auto;
font-size:12px;
}
#header {
background-image:url(../images/header.png);
height:154px;
}
#contentwrapper {
float: left;
width: 950px;
margin-left: 5px;
background-image:url(../images/content_blank.png);
background-repeat:repeat-y;
}
#sidebar_left {
background-image:url(../images/menue.png);
background-repeat:no-repeat;
min-height: 100%;
float:left;
width:255px;
min-height: 350px;
margin-left:-4px!important;
margin-left:-4px;
font-size:11px;
}
#content {
margin-left:251px;
min-height: 360px;
background-image:url(../images/inhalt.png);
background-repeat:repeat-y;
padding:15px 0;
}
#footer {
clear:both;
background-image:url(../images/footer.png);
height:104px;
margin-left: 0;
text-align:left;
padding-top:20px;
}
/********** ENDE Struktur **********/
#inhalt {
width: 540px;
padding-left: 58px;
font-family: tahoma, sans-serif;
font-size: 12px;
color: #343538;
letter-spacing: 1px;
}
/*********** FORMATE **********/
.image {
float:left;
margin:2px 2px 2px 2px;
}
h1 {
margin-left: -15px;
margin-bottom: 3px;
color:#3f92d2;
font: small-caps bold 16px tahoma,verdana,sans-serif;
text-decoration: none;
text-indent:12px;
color: #3f92d2;
letter-spacing: 2px;
}
/*********** ENDE FORMATE **********/
/*********** NAVIGATION OBEN **********/
#header_nav {
margin-left: 330px;
padding-top: 32px;
padding-left: 10px;
}
#header_nav ul {
list-style-type: none;
}
#header_nav ul li {
display: inline;
}
#header_nav ul li a {
font: small-caps bold 16px tahoma,verdana,sans-serif;
color: #808080;
letter-spacing: 2px;
float: left;
padding: 0.2em 1em;
text-decoration: none;
}
#header_nav ul li a:hover {
font: small-caps bold 16px tahoma,verdana,sans-serif;
color: #ff4900;
}
#current_nav {
font: small-caps bold 16px tahoma,verdana,sans-serif;
letter-spacing: 2px;
float: left;
padding: 0.2em 1em;
text-decoration: none;
color: #ff4900;
}
/*********** ENDE NAVIGATION OBEN **********/
/********** NAVIGATION LINKS **********/
#navigation_menu {
width:173px;
padding:0 0 0 0;
margin-left:60px;
margin-top: 50px;
font-size:11px;
font-weight:normal;
font-family:Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color:#000000;
color:#000000;
}
#navigation_menu ul {
list-style: none;
padding: 0;
border: none;
width: 173px;
}
#navigation_menu li {
border-bottom:1px solid #90bade;
width: 173px;
}
#navigation_menu li a {
display:block;
padding:3px 0px 3px 0px;
background-color:#E3E1E2;
color:#000000;
text-decoration: none;
width: 173px;
}
#navigation_menu li a:hover {
background-color: #ff4900;
color: #fff;
width:173px;
}
#navigation_menu {
width:173px;
padding:0 0 0 0;
margin-bottom:1em;
}
/********** ENDE NAVIGATION **********/
/*********** HOVER IMAGES **********/
#t_home {
margin-left: 70px;
margin-top: 30px;
}
#news {
position:relative;
list-style:none;
width:100px;
height:100px;
}
#news li a {
position:absolute;
text-indent:-9999px;
display:block;
text-decoration:none;
width:100px;
height:100px;
}
#news_img a {
margin-left: 815px;
margin-top: -96px;
}
#news_img a:hover {
margin-left: 815px;
margin-top: -96px;
background:url(../images/news.png);
}
#home {
position:relative;
list-style:none;
width:70px;
height:70px;
}
#home li a {
position:absolute;
text-indent:-9999px;
display:block;
text-decoration:none;
width:70px;
height:70px;
}
#home_img a {
margin-left: 249px;
margin-top:0;
}
#home_img a:hover{
margin-left: 249px;
margin-top:0px;
background:url(../images/home.png);
}
/*********** ENDE HOVER IMAGES **********/
.ht1 {
font-size : 14px;
font-weight: bold;
color : #000;
font-family : Tahoma, Arial, Helvetica, sans-serif;
text-decoration : none;
}
.hw2 {
font-size : 11px;
font-weight : bold;
color : #ffffff;
font-family : tahoma,verdana, arial, helvetica, sans-serif;
text-decoration : none;
}
/********** STYLE FOOTER **********/
#current_footer {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #ff4900;
}
.footer
{
margin-left: 370px;
padding-top: 33px;
padding-left: 153px;
min-height: 40px;
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #808080;
letter-spacing: 1px;
}
.footer a {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #808080;
}
.footer a:hover {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #ff4900;
}
Separate CSS Datei für IE6
* {margin: 0; padding: 0;}
/********** STRUKTUR **********/
body {
font-family:tahoma,arial, Times, serif;
font-size:62.5%;
background: #c8d0d4;
}
#container {
width:950px;
margin:auto;
height: 100%;
font-size:12px;
}
#header {
width: 950px;
margin-left: 5px;
margin-top: 0px;
height:150px;
background-image:url(../images/header.png);
}
#sidebar_left {
background-image:url(../images/menue.png);
background-repeat:no-repeat;
float:left;
width:252px;
height: 359px;
margin-left:3px;
font-size:11px;
}
#content {
margin-left: -2px;
height: 359px;
background-image:url(../images/inhalt.png);
background-repeat:repeat-y;
}
#inhalt {
margin-left: 50px;
margin-top: 5px;
width: 545px;
font: tahoma, hevetica, sans-serif 10px;
color: #343538;
letter-spacing: 1px;
}
#footer {
clear:both;
background-image:url(../images/footer.png);
height:124px;
width: 950px;
margin-left: 5px;
text-align:left;
}
/*********** FORMATE **********/
.image {
float:left;
margin:2px 2px 2px 2px;
}
h1 {
margin-left:-12px;
margin-bottom: 3px;
color:#3f92d2;
font: small-caps bold 16px tahoma,verdana,sans-serif;
text-decoration: none;
text-indent:12px;
color: #3f92d2;
letter-spacing: 2px;
}
/*********** NAVIGATION OBEN **********/
#header_nav
{
margin-left: 330px;
padding-top: 32px;
padding-left: 10px;
}
#header_nav ul {
list-style-type: none;
}
#header_nav ul li {
display: inline;
}
#header_nav ul li a {
font: small-caps bold 16px tahoma,verdana,sans-serif;
color: #808080;
letter-spacing: 2px;
float: left;
padding: 0.2em 1em;
text-decoration: none;
}
#header_nav ul li a:hover {
font: small-caps bold 16px tahoma,verdana,sans-serif;
color: #ff4900;
}
#current_nav {
font: small-caps bold 16px tahoma,verdana,sans-serif;
letter-spacing: 2px;
float: left;
padding: 0.2em 1em;
text-decoration: none;
color: #ff4900;
}
/********** NAVIGATION LINKS**********/
#navigation_menu {
width:173px;
padding:0 0 0 0;
margin-left:60px;
margin-top: 50px;
font-size:11px;
font-weight:normal;
font-family:Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color:#000000;
color:#000000;
}
#navigation_menu ul {
list-style: none;
border: none;
width: 173px;
}
#navigation_menu li {
border-bottom:1px solid #90bade;
width: 173px;
}
#navigation_menu li a {
display:block;
padding:3px 0px 3px 0px;
background-color:#E3E1E2;
color:#000000;
text-decoration: none;
width: 173px;
}
#navigation_menu li a:hover {
background-color: #ff4900;
color: #fff;
width:173px;
}
#navigation_menu {
width:173px;
padding:0 0 0 0;
margin-bottom:1em;
font: small-caps bold 12px tahoma,verdana,sans-serif;
text-decoration: none;
text-indent:10px;
color: #ffffff;
letter-spacing: 2px;
}
/*********** HOVER IMAGES **********/
#t_home {
margin-left: 70px;
margin-top: 30px;
}
#news {
list-style:none;
}
#news li a {
position:absolute;
text-indent:-99999px;
display:block;
text-decoration:none;
width:92px;
height:78px;
}
#news_img a {
margin-left: 819px;
margin-top: -76px;
}
#news_img a:hover {
margin-left: 819px;
margin-top: -76px;
background:url(../images/news.gif);
}
#home {
list-style:none;
width:62px;
height:61px;
}
#home li a {
position:absolute;
text-indent:-8888px;
display:block;
text-decoration:none;
width:62px;
height:61px;
}
#home_img a {
margin-left: -457px;
margin-top:7px;
}
#home_img a:hover{
margin-left: -457px;
margin-top:7px;
background:url(../images/home.gif);
}
.ht1 {
font-size : 14px;
font-weight: bold;
color : #000;
font-family : Tahoma, Arial, Helvetica, sans-serif;
text-decoration : none;
}
.hw2 {
font-size : 11px;
font-weight : bold;
color : #ffffff;
font-family : tahoma,verdana, arial, helvetica, sans-serif;
text-decoration : none;
}
/********** STYLE FOOTER **********/
#current_footer {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #ff4900;
}
.footer {
margin-left: 520px;
margin-top: 50px;
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #808080;
letter-spacing: 1px;
}
.footer a {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #808080;
}
.footer a:hover {
font: small-caps bold 13px tahoma,verdana,sans-serif;
color: #ff4900;
}
Ich würde mich wahnsinnig freuen, wenn mir jemand schnellstmöglich weiterhelfen könnte oder mir zumindest einen Hinweis geben kann, wo ich ansetzen muss.
Vielen Dank im Voraus Beste Grüße Perelina
-
Hier geht es zur Seite (für Firefox, IE7, IE8 und Opera)
Hier geht es zur Seite (optimale Darstellung mit IE6)
So sieht der aktuelle Header aus, der den IE6 leider nicht anzusprechen scheint:
Falsch. Online hast du etwas anderes:
...
<!--[if IE 7]>
<style type="text/css" media="all">@import "/css/ie.css";</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all">@import "/css/ie6.css";</style>-------------------------------------------------^ Slash fehlt bei Online Version
<![endif]-->
...
mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
Du hast recht. Mittlerweile habe ich aber heraus gefunden, dass es daran nicht liegt. Die online Version css/ie6.css ist korrekt und wird vom IE6 auch eingelesen. Leider nur dann, wenn ich keine anderen CSS Dateien einbinde, also ausschließlich die Anweisung:
<title>Startseite</title> <!--[if IE 6]> <style type="text/css" media="all">@import "css/ie6.css";</style> <![endif]--> </head>Scheint so, als würde der IE6 mit den Standartansweisungen durcheinander kommen. Wie muss ich die Datei ie6.css gestalten bzw. was ist fehlerhaft daran?
-
-
@@Perelina:
nuqneH
<link href="css/layout.css" media="screen, projection" rel="stylesheet" type="text/css"/>
Und beim Ausdrucken sollen deine Stile nicht gelten?
Am besten in HTML keine Medientypen angeben; dies gehört ins Stylesheet.
<!--[if IE 7]>
<style type="text/css" media="all">@import "/css/ie.css";</style>Warum hier nicht auch '
<link href="css/layout.css" rel="stylesheet" type="text/css"/>'?Am liebsten wäre mir natürlich eine Lösung, bei der ich nur eine CSS Datei für alle Browser nutzen könnte.
JA!!!11einself
Es ist sinnvoll, Stilangaben für verschiedene Browser nicht im HTML zu trennen, sondern im Stylesheet – in dem einen Stylesheet für alle Browser.
Dazu nutzt du Hacks:
foo { bar: baz } * html foo { bar: quz }Setzt für alle 'foo'-Elemente die Eigenschaft 'bar' auf den Wert "baz"; im IE < 7 auf den Wert "quz".
'
* html foo' selektiert alle 'foo'-Elemente innerhalb des 'html'-Elements, welches Nachfahre eines beliebigen Elements ('*') ist. Da das 'html'-Element aber das Wurzelelement ist, also nicht Nachfahre eines anderen, gibt es solche Elemente nicht. Deshalb tut diese Regel gar nichts – in vernünftigen Browsern.Nicht so im IE 6: Der tut so als wäre der '
*' gar nicht da und liest 'html foo { bar: quz }', wendet die Regel also an.*:first-child+html foo { bar: quz }tut dasselbe für IE 7.
Leider kann man das nicht zusammenfassen: '
* html foo, *:first-child+html foo { bar: quz }' funktioniert nicht, weil der IE 6 weder ':first-child' noch '+' kennt und deshalb die ganze Regel ignoriert.Dies lässt sich für einen Hack ausnutzen, mit dem man Regeln nur für Mozilla (Firefox) angeben kann:
foo, x:-moz-any-link { bar: quz }Da andere Browser die proprietäre Pseudoklasse '-moz-any-link' nicht kennen, ignorieren sie die Regel.
Auf die Art kommt man mit einem Stylesheet für alle Browser aus. Der große Vorteil daran ist, dass man die für die Browser verschiedenen Stilangaben für ein Element direkt untereinander notieren kann und sie damit immer in einem Blick hat.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Vielen lieben Dank für deine umfassende Antwort. Leider scheinen meine Kenntnisse hierfür nicht ausreichend zu sein. Würdest du mir anhand eines Beispiels mal zeigen, wie ich deine Anweisungen anwenden kann?
Wie kann ich mein Standart CSS optimieren, damit die Anweisungen auch für den IE6 lesbar werden?
Auszug aus CSS standart:
#news { position:relative; list-style:none; width:100px; height:100px; } #news li a { position:absolute; text-indent:-9999px; display:block; text-decoration:none; width:100px; height:100px; } #news_img a { margin-left: 815px; margin-top: -96px; } #news_img a:hover { margin-left: 815px; margin-top: -96px; background:url(../images/news.png); }CSS optimiert für IE6
#news { list-style:none; } #news li a { position:absolute; text-indent:-99999px; display:block; text-decoration:none; width:92px; height:78px; } #news_img a { margin-left: 819px; margin-top: -76px; } #news_img a:hover { margin-left: 819px; margin-top: -76px; background:url(../images/news.gif); }Ich wäre dir sehr dankbar, wenn du mir für diesen Teil die Änderungen notieren würdest, damit ich einen Ansatz habe und auch nachvollziehen kann, wieso es so sein muss.
-
@@Perelina:
nuqneH
Auszug aus CSS standart:
Du hast dir CSS auf deine Fahnen geschrieben?
#news {
position:relative;
list-style:none;
width:100px;
height:100px;
}Davon soll nur 'list-style:none;' für IE 6 gelten. Deshalb die anderen Daklarationen vor ihm verstecken:
#news { list-style:none; } html>body #news { position:relative; width:100px; height:100px; }'
html>body #news' selektiert das Element mit der ID "news" innerhalb des 'body', der Kind von 'html'. Da 'body' immer Kind von 'html' ist und sich alle anderen Elemente innerhalb des 'body' befinden*, selektiert das dasselbe wie '#news'. IE 6 kennt aber '>' nicht und ignoriert die Regel.#news li a {
position:absolute;
text-indent:-9999px;
display:block;
text-decoration:none;
width:100px;
height:100px;
}Das willst du 'width' und 'height' für IE 6 überschreiben:
#news li a { position:absolute; text-indent:-9999px; display:block; text-decoration:none; width:100px; height:100px; } * html #news li a { width:92px; height:78px; }Für die anderen beiden Regeln für '
#news_img a' und '#news_img a:hover' entsprechend.Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Hi!
Auszug aus CSS standart:
Du hast dir CSS auf deine Fahnen geschrieben?
Dat war jemein! Frau||Mann kann sich ja mal vertippern;)
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Du hast mir bereits sehr geholfen und ich habe mittlerweile meine allgemeine CSS Datei ein gutes Stück verbessert. Ein Problem gibt es noch immer und ich finde einfach den Fehler nicht. Ich weiß einfach nicht, wo dieser Abstand herkommt, der nun zwischen Header und Content entstanden ist.
Alles andere passt soweit, es geht also lediglich noch um diesen Abstand. Hast du hierfür eine Erklärung? Ich wäre überglücklich, wenn ich das Problem heute noch lösen könnte. Ich sitze schon seit heute morgen um 8 und bin eigentlich ganz stolz darauf, dass ich soweit gekommen bin. Nun will ich dieses letzte Darstellungsproblem aber auch noch lösen.
Schau doch bitte mit dem IE6 noch einmal auf die Seite. Vielleicht ist es nur eine Kleinigkeit. Ansonsten muss ich mich morgen wieder dran setzen. Aufgeben werde ich nicht. Habe auch weitere interessante Beiträge hier im Forum gefunden, die mir auch sehr geholfen haben.
-
Hi,
Ein Problem gibt es noch immer und ich finde einfach den Fehler nicht. Ich weiß einfach nicht, wo dieser Abstand herkommt, der nun zwischen Header und Content entstanden ist.
Von der Liste #news, die zwar nicht sichtbar ist, aber trotzdem #header ausdehnt.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Von der Liste #news, die zwar nicht sichtbar ist, aber trotzdem #header ausdehnt.
Ja, darauf bin ich nun auch gekommen, nachdem ich alle anderen Anweisungen ausgeblendet hatte. Trotzdem erkenne ich meinen Fehler nicht. Ich habe es nun mittlerweile soweit geschafft, dass ich mit einer CSS Datei auskomme. Lediglich diesen Fehler bekomme ich einfach nicht in den Griff.
Bitte, was erkenne ich denn nicht? Wie kann ich dieses Problem lösen?
-
Ich konnte das Problem lösen. Habe die Bilder in einem Div zusammengefasst und nun funktioniert es auch. Vielen Dank für die tolle Unterstützung. Wünsche euch noch ein schönes Wochenende.
-
-
-
-
-
-
@@Gunnar:
nuqneH
Am liebsten wäre mir natürlich eine Lösung, bei der ich nur eine CSS Datei für alle Browser nutzen könnte.
JA!!!11einself
Das wäre die "ideal world".
Es ist sinnvoll, Stilangaben für verschiedene Browser nicht im HTML zu trennen, sondern im Stylesheet – in dem einen Stylesheet für alle Browser.
Wenn das anders ginge als mit ...
Dazu nutzt du Hacks:
Ich persönlich bin kein Freund von Hacks. Schon alleine deswegen nicht, weil sie eben von ihrer "Wirkungsweise" her nicht zum Standard gehören. Und man muss ggf. über Monate und Jahre "im Kopf behalten", welcher Hack denn nun von welchem Browser und welchen Versionen verstanden wird und von welchen nicht.
Auf die Art kommt man mit einem Stylesheet für alle Browser aus. Der große Vorteil daran ist, dass man die für die Browser verschiedenen Stilangaben für ein Element direkt untereinander notieren kann und sie damit immer in einem Blick hat.
Und einer der Nachteile daran ist, dass man permanent in einer "riesigen" CSS-Datei rumwerkeln muss und auch jedem Browser eine unnötig große Datei liefert.
Ich bin sehr davon überzeugt, dass diese Frage u.a. auch etwas mit der persönlichen Gewohnheit, Vorlieben und nicht zuletzt auch mit dem jeweiligen Layout & Design zu tun hat, und dass es dabei auch nicht den "Holy Grail" gibt.
Insbesondere wenn es nur um unterschiedliche Styles für die IEs geht, bevorzuge ich auf jeden Fall die Verwendung von Conditional Comments.
Warum man dieses "System" nicht für alle Browser und auch für CSS-Dateien übernommen hat, ist mir bis heute ein Rätsel! Stattdessen guckt man sich seit fast 10 Jahren mit an, wie sich Webdesigner immer wieder mit irgendwelchen Hacks behelfen müssen. Klassisches Beispiel für "an den Anforderungen/ Erfordernissen der Praxis vorbei entwickelt"!
Just my 2 cents!
Gruß Gunther
-
Warum man dieses "System" nicht für alle Browser und auch für CSS-Dateien übernommen hat, ist mir bis heute ein Rätsel! Stattdessen guckt man sich seit fast 10 Jahren mit an, wie sich Webdesigner immer wieder mit irgendwelchen Hacks behelfen müssen. Klassisches Beispiel für "an den Anforderungen/ Erfordernissen der Praxis vorbei entwickelt"!
Volle Zustimmung, schöner Gedanke!
#foobar { font-weight:bold; /* IF Mozilla > 5 left:2px; */ /* IF IE < 7 left:-2px; */ /* IF GECKO >= 20090101 left:1em; */ /* IF KHTML left:0; */ /* IF FireFox < 3 right:0; */ }Wäre ein Traum und das seltsame: Eigentlich ist das 'ne recht miese Lösung, was sind wir / bin ich anspruchslos ^^
(Bevor jemand fragt: Eine gute Lösung wäre, wenn man alle Browser gleich beliefern könnte)--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:( -
@@Gunther:
nuqneH
Ich persönlich bin kein Freund von Hacks.
Von sowas wie '
foo { _bar: baz }' oder 'foo { ba\r: baz }' lasse ich auch die Finger. '* html' considered harmless.Schon alleine deswegen nicht, weil sie eben von ihrer "Wirkungsweise" her nicht zum Standard gehören.
Das wäre ja auch ein innerer Widerspruch. Der Standard sagt, wie UAs CSS zu interpretieren haben. In einer idealen Welt hielten sie sich dran.
Und man muss ggf. über Monate und Jahre "im Kopf behalten", welcher Hack denn nun von welchem Browser und welchen Versionen verstanden wird und von welchen nicht.
Wenn man nicht dem Irrglauben Nr. 1 verfallen ist, eine Webseite müsse in allen Browsern völlig identisch aussehen, braucht man außer '
* html' für IE < 7 und '*:first-child+html' für IE 7 kaum andere Hacks. Und die beiden wird man sich ja gerade so noch merken können.Auf die Art kommt man mit einem Stylesheet für alle Browser aus. Der große Vorteil daran ist, dass man die für die Browser verschiedenen Stilangaben für ein Element direkt untereinander notieren kann und sie damit immer in einem Blick hat.
Und einer der Nachteile daran ist, dass man permanent in einer "riesigen" CSS-Datei rumwerkeln muss und auch jedem Browser eine unnötig große Datei liefert.Wenn man nicht dem Irrglauben Nr. 1 verfallen ist, werden es nur wenige Anpassungen sein. Riesig wird das Stylesheet dadurch nicht. Ich hab noch nicht erlebt, dass ein Browser mit dem Rendern einer Seite nicht hinterherkäme, weil ein paar für ihn irrelevante Regeln im Stylesheet stehen.
Und für die Übertragungszeit sind die zusätzlichen Regeln in dem einen Stylesheet für alle Browser irrelevant. Im Gegenteil: Bei einem zusätzlichen Stylesheet für IEs müssten diese auf zwei Ressourcen warten.
Insbesondere wenn es nur um unuserterschiedliche Styles für die IEs geht, bevorzuge ich auf jeden Fall die Verwendung von Conditional Comments.
Warum man dieses "System" nicht für alle Browser und auch für CSS-Dateien übernommen hat, ist mir bis heute ein Rätsel!Weil conditional comments im HTML stehen, die Darstellungsangaben aber nicht dorthin gehören. Warum Microsoft conditional comments in HTML und conditional compiling in JavaScript eingefüht hat, aber nichts dergleichen in CSS, ist mir ein Rätsel.
Und wenn man’s in CSS richtig[tm] machen will, dann nicht per Kommentar, sondern per At-Regel:
foo { bar: baz} @user-agent IE 6 { foo { bar: quz } }Das wäre sauber und mir auch lieber als Hacks.
Stattdessen guckt man sich seit fast 10 Jahren mit an, wie sich Webdesigner immer wieder mit irgendwelchen Hacks behelfen müssen. Klassisches Beispiel für "an den Anforderungen/ Erfordernissen der Praxis vorbei entwickelt"!
Richte deine Rufe gen Redmond.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
@@Gunnar:
nuqneH
Insbesondere wenn es nur um unuserterschiedliche Styles für die IEs geht, bevorzuge ich auf jeden Fall die Verwendung von Conditional Comments.
Warum man dieses "System" nicht für alle Browser und auch für CSS-Dateien übernommen hat, ist mir bis heute ein Rätsel!Weil conditional comments im HTML stehen, die Darstellungsangaben aber nicht dorthin gehören.
Das ist eines deiner bei diesem Thema immer wieder angeführten Argumente. Ich sehe das als falsch/ unrichtig/ unzutreffend an. Conditional Comments zur Einbindung (oder auch nicht Einbindung) spezieller Stylesheets stehen zwar in der HTML-Datei, aber im <head>. Also genau da, wo dein <link> zur Einbindung des Stylesheets auch steht. Und für alle nicht IEs handelt es sich dabei um Kommentare, die unabhängig davon wo sie stehen nie stören (dürfen).
Insofern kann ich deiner Argumentation "Weil conditional comments im HTML stehen, die Darstellungsangaben aber nicht dorthin gehören." nicht folgen. CCs sind imo auch keine 'Darstellungsangaben', sondern wenn überhaupt eine Art 'Filter'.
BTW: Meine gängige Verwendung sieht übrigens so aus, dass ich CCs in der Form nutze, jedem (unterstützten) Browser auch nur eine CSS-Datei zu servieren, auch wenn das den Aufwand beim Erstellen, Ändern und der Wartung etwas erhöht. So halte ich u.a. bestimmte IE Versionen bspw. per CCs davon ab, erst das Standard-Stylesheet zu laden und dann anschließend das spezielle, welches die Hälfte davon wieder überschreibt. Das hat in meinen Augen zumindest auch den Vorteil, dass es nicht zu ungewollten Effekten kommen kann, weil man vergessen/ übersehen hat, eine zuvor gesetzte Eigenschaft zu überschreiben.
Gruß Gunther
-
@@Gunther:
nuqneH
Conditional Comments zur Einbindung (oder auch nicht Einbindung) spezieller Stylesheets stehen zwar in der HTML-Datei, aber im <head>. Also genau da, wo dein <link> zur Einbindung des Stylesheets auch steht.
Dass dies eigentlich nicht die richtige Stelle ist, das Stylesheet einzubinden, hatte ich letztens erwähnt.
CCs sind imo auch keine 'Darstellungsangaben'
ACK. Mit ihnen kann man beliebigen HTML-Code für IEs einbinden oder vor ihnen verstecken.
sondern wenn überhaupt eine Art 'Filter'.
Wenn CCs dazu dienen, Links zu Stylesheets für IEs einbinden oder vor ihnen verstecken, dienen sie als Filter für Darstellungsangaben. Solch ein Filter gehört aber IMHO eben zu den Darstellungsangaben, also ins Stylesheet.
BTW: Meine gängige Verwendung sieht übrigens so aus, dass ich CCs in der Form nutze, jedem (unterstützten) Browser auch nur eine CSS-Datei zu servieren, auch wenn das den Aufwand beim Erstellen, Ändern und der Wartung etwas erhöht.
Ja, doppelter Aufwand – bei jeder Änderung. Das kannst du für dich gerne so tun; eine Empfehlung für andere sollte anders lauten.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-