Perelina: IE6 liest falsche CSS Datei

Beitrag lesen

SELF-Forum

IE6 liest falsche CSS Datei

Perelina
– Informationen zu den Bewertungsregeln

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. 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

Beitrag melden
–
Informationen zu den Bewertungsregeln
0 16

IE6 liest falsche CSS Datei

Perelina
  • html
  1. 0
    Beat
    1. 0
      Perelina
  2. 1
    Gunnar Bittersmann
    1. 0
      Perelina
      1. 0
        Gunnar Bittersmann
        1. 0
          Peter Pan
        2. 0
          Perelina
          1. 0
            ChrisB
            1. 0
              Perelina
              1. 0
                Perelina
    2. 0

      Eine oder doch mehrere CSS Dateien

      Gunther
      • meinung
      1. 0
        Deus Figendi
      2. 0
        Gunnar Bittersmann
        1. 0
          Gunther
          1. 0
            Gunnar Bittersmann