zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden IE 6 erkennt seine CSS Datei nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.08.2009, 15:06
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 20.07.2009
Beiträge: 3
Perelina befindet sich auf einem aufstrebenden Ast
Standard IE 6 erkennt seine CSS Datei nicht
Hallo 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. 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:
HTML-Code:
<!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:
Code:
* {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

Code:
* {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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.08.2009, 15:36
{ display: random;}
XHTMLforum-Kenner
  
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard
Ich meine mal gelesen zu haben, dass der IE6 ( oder alle IE?) Problem mit einer Media angabe UND der @import Anweisung haben.

Schreibs doch mal so:
Code:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie6.css" /><![endif]-->
"Media all" halte ich in den meisten Fällen für sowieso überflüssig. Ein Print-Stylesheet ließe sich noch prima dranhängen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.08.2009, 15:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von Perelina Beitrag anzeigen
sodass ich für diesen Browser eine separate CSS Datei erstellt habe.
Wieso wiederholst Du darin alles? Ins IE-CSS gehören nur die benötigten Hacks, jedoch keinerlei Wiederholung des Standard-CSS'.

Zitat:
Zitat von Perelina Beitrag anzeigen
dass der Browser IE 6 auf dieses CSS nicht zugreift, also immer die falsche Datei einliest.
Sieht nicht danach aus - entferne auf der Hauptseite doch mal layout.css, wenn die Darstellung dann stimmt, liest der IE 6 seine Datei sehr wohl und sie kommt sich einfach nur mit dem Standard-CSS in die Quere. Andere einfache Möglichkeit: Ändere im ie6.css die HG-Farbe von body mal zu rot, dann siehst Du sofort, ob er die Datei liest oder nicht.

Zitat:
Zitat von andir Beitrag anzeigen
Ich meine mal gelesen zu haben, dass der IE6 ( oder alle IE?) Problem mit einer Media angabe UND der @import Anweisung haben.
Seine Einbindung ist okay für alle IEs (inkl. 5.0), Du meinst diese Variante der Medientyp-Angabe (und deren Einschränkungen betreffen auch nur den IE < 6).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Geändert von heiko_rs (07.08.2009 um 15:55 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.08.2009, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 20.07.2009
Beiträge: 3
Perelina befindet sich auf einem aufstrebenden Ast
Standard
Hallo Heiko,

vielen Dank für deine rasche Unterstützung. Du hast mit allem Recht. Nach dem ich ausschließlich
HTML-Code:
<!--[if IE  6]>
  <style type="text/css" media="all">@import  "css/ie6.css";</style>
  <![endif]-->
angegeben habe, hat IE6 alles richtig interpretiert, also auch die ihm zugewiesene Datei eingelesen.

Wieso greift er nicht darauf zu, wenn ich die anderen Dateien einfüge?
Kannst du mir ein Beispiel geben, wie ich die Datei für IE6 abspecken muss, damit er nicht mit den anderen Anweisungen durcheinander kommt?
Mit Zitat antworten
  #5 (permalink)  
Alt 07.08.2009, 18:56
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Das findest Du leicht selber heraus:

1. lösche alle Regeln bzw. Deklarationen, die im IE-CSS 1:1 wiederholt werden
2. schau Dir die verbleibenden IE-Regeln an und überlege, warum sie von den entsprechenden Regeln im Standard-CSS "gestört" werden (und passe das IE-CSS entsprechend an)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
2 css codes in externer stylesheet Datei netster Knowledge Base 3 15.08.2006 11:44
probleme beim ändern einer css datei! snoopie CSS 17 09.09.2004 10:00
in einer rss datei auf ein css verlinken? new user CSS 3 25.02.2004 18:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:25 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023