IE6 bleibt im Quirksmodus trotz Doctype

ThorstenSt · #1 (**permalink**) 11.09.2007, 21:43

ich habe diese Frage schonmal im CSS Board gestellt (http://xhtmlforum.de/47844-ie6-zeigt...ch-ie7-ff.html), aber ich denke mal es wird kein css Problem (mehr oder weniger) sein.

Ich habe schon andere Doctypes ausprobiert, jedoch bleibt die Darstellung im IE6 falsch. Eher wird sie auch im IE7 verkehrt, dann geht der nämlich in den Quirkmodus.

Darstellungen sind im Anhang zu sehen.
Wäre nett, wenn da einer was wüsste, bin schon seit knapp 3 Std. auf der Suche und finde da nichts wirklich passendes zu.
Vielen Dank!

Hier noch mal die Code ausschnitte:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>CD-DVD Web</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" type="text/css" href="css/cdweb_style.css" />
<link rel="stylesheet" type="text/css" href="css/loginBereich.css" />
<link rel="stylesheet" type="text/css" href="css/menue.css" />


</head>
<body>

<div id="header">
			
			<div id="statusMeldung">
				<div id="loadingMessage" style="display: none;width:100%;"></div>
        	</div>	
</div>

<div id="cdwebLogo"></div>
		
		<div id="loginBereich">
			<div id="loginBereichText">
		 <form id="login" action="" onsubmit="return false;">					
		<p>Benutzer: <input class="benutzer" id="login_benutzer" name="login_benutzer" type="text" /> </p>
		<p>Passwort: <input class="passwort" id="login_passwort" name="login_passwort" type="password" /> </p>
	<div id="loginBereichButton"><input class="login_button" type="button" id="login_button" name="login_button" value="LogIn" /></div>	
			</form>
		</div>
			
		
		</div>

		<div id="menue">	
		<ul>
		<li><a href="index.php"><img src="images/menue_start.gif" style="margin-left:2px;" alt="Startseite" />Startseite</a></li>
			<li><a href="administration.php"><img src="images/menue_admin.gif" style="margin-left:2px;" alt="Administrationsbereich" />Administration</a></li>
			<li><a href="musikarchiv.php"><img src="images/menue_musik.gif" style="margin-left:2px;" alt="Musikarchiv"  />Musikarchiv</a></li>
			<li><a href="filmarchiv.php"><img src="images/menue_dvd.gif" style="margin-left:2px;" alt="Filmarchiv"  />Filmarchiv</a></li>
			<li><a href="gaestebuch.php" ><img src="images/menue_gb.gif" style="margin-left:2px;" alt="Gaestebuch"  />G&auml;stebuch</a></li>
			</ul>
			</div>
			
			<div id="seitentitel">

<img class="titelbild" src="images/startseite.gif" alt="Startseite" />  <p class="titel">Startseite</p>

</div>

<div id="hauptBereich">
        
       test
         		</div>
		
		<div id="footer">&copy; 2007 by Thorsten Steinberg</div>
</body>
</html>

cdweb_style.css

Code:

*{
   margin:0px;
   padding:0px;
}

html
{
 	height:100%; 
	width:100%;	 
	margin:0px;
    padding:0px;
}

body
{
	margin:0px;
    padding:0px;
	width:100%;
	height:100%;
	background-color: #666666;
}


#statusMeldung
{
 	position: absolute;
 	padding:0px;
 	top: 10px;
 	left:280px; 
 	height: 28px;
	width: 525px;
	margin:0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
  	font-size: 10pt;
  	color:#ffffff;
	z-index: 4;

}

#statusMeldung p
{
 	margin-top: 5px;
 	margin-left: 33px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
  	font-size: 9pt;
  	color:#ffffff;
}

#statusMeldung img
{
 	float:left;
 	margin:0px;
 	padding:0px;
}

#cdwebLogo
{
	position:absolute;
	top:2px;
	left:0px;
	width:248px;
	height:103px;
	background-image: url('../images/cdWebLogoLeft.jpg');
	background-repeat: no-repeat;
	z-index:1;
}


#hauptBereich
{
	position: absolute;
	overflow: auto;
	left:21px;
	right:85px;
	top: 138px;
	bottom: 30px;
	width: auto;
	height: auto;
	border-right:1px solid #000000;
	background-color: #ffffcc;
	background-image: url('../images/border_left.jpg');
	background-repeat: repeat-y;
	margin-top:0px;
	padding-top:4px;
	padding-left:20px;
	padding-right:20px;
	z-index:0;
}

#footer
{
 	position:absolute;
 	text-align:right;
	width: auto;
	bottom:11px;
	height: 19px;
	background-color: #ffffcc;
	border-right:1px solid #000000;
	left:21px;
	right:85px;
	background-image: url('../images/footer.jpg');
	background-repeat: no-repeat;
	padding-left:20px;
	padding-right:20px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
  	font-size: 7pt;
  	font-weight: bold;
}

#seitentitel .titel{
    
    display:block;
	padding-left:8px;
	margin:0px;
 	text-align:left;
    color: #000000;
	border-bottom: 1px solid #000000;
	font-family: Verdana, Helvetica, Arial, sans-serif;
  	font-size: 16pt;
  	font-weight: bold;
}

#seitentitel img.titelbild{
    
    float:left;
	margin-left: 10px;
	margin-right: 8px;
	margin-top: 3px;
	margin-bottom: 0px;
	padding: 0px;
	border:0px;
}

#seitentitel
{
	position:absolute;
	
	top: 105px;
	left:21px;
	right:85px;
	height:auto;
	border-right:1px solid #000000;
	background-color: #ffffcc;
	background-image: url('../images/border_left.jpg');
	background-repeat: repeat-y;
	margin-top:0px;
	padding-left:20px;
	padding-right:20px;
	z-index:5;
}

menue.css

Code:

/* CSS-Style für die Menüs */

/* Stylesheets für das Hauptmenü der Seite  */

#menue
{
	position: absolute;
	float:left;
	padding:0px;
	right:85px;
	left:242px;
	width: auto;
	height:60px;
	top: 45px;
	border-right:1px solid #000000;
	background-color: #ffffcc;
	background-image: url('../images/border_top.jpg');
	background-repeat: repeat-x;
	z-index:2;
}

#menue img{
 	
 	float:left;
	margin-top: 0px;
	margin-right: 4px;
	margin-bottom:0px;
	border:0px;
}

#menue ul{
  
  margin-top:12px;
  margin-left:0px;
  padding: 0px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 10pt;
  list-style-type: none;
  height: 100%;
  
}

#menue ul li{
 
  display: block;
  float: left;
  text-align: left;
  margin-left:10px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  
}

#menue ul li a{
 
  display: block;
  margin-top:0px;
  border-top: 4px solid #cccccc;
  height: auto;
  width: 130px;
  color:#000000;
  padding-top:2px;
  text-align:center;
 
}

#menue ul li a:link, a:visited{
 
  color: #000000;
  text-decoration: none;
  
}

#menue ul li a:hover{
  
  border-top: 4px solid #666666;
 
  color: #000000;
  font-weight:normal;
  text-decoration: none;

}

und die loginBereich.css

Code:

#loginBereich
{
 	position:absolute;
 	right:15px;
 	top:10px;
	width:223px;
	height:92px;
	background-image: url('../images/loginBereich.jpg');
	background-repeat: no-repeat;	
	z-index:3;
}

#loginBereichText
{
	font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 9pt;
    margin-left:12px;
    margin-top:10px;
}

#loginBereich input.benutzer
{
 	margin-top:10px;
 	background-image: url('../images/user.gif');
	background-position:right;
	background-repeat: no-repeat;
}

#loginBereich input.passwort
{
 	margin-top:2px;
 	margin-left: -2px;
 	background-image: url('../images/key.gif');
	background-position:right;
	background-repeat: no-repeat;
}

#loginBereich input.benutzer, .passwort
{
	font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 8pt;
    border: 1px solid #000000;
    padding-top: 2px;
    padding-left: 2px;
    width: 130px;
	height: 15px;
	background-color: #ffffff;
}

#loginBereichButton input.login_button
{
	background-image: url('../images/go.gif');
}

#loginBereichButton input.logout_button
{
	background-image: url('../images/menue_logout.gif');
}

#loginBereichButton input.logout_button, .login_button
{
	float:left;
	width: 100px;
	height: 21px;
	border: 1px solid #000000;
	background-color: #cccccc;
	background-position:1px 1px;
	background-repeat: no-repeat;
	font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 9pt;
    font-weight: bold;
}

#loginBereichButton
{
	position:absolute;
	right:10px;
	bottom: 6px;
	width: 100px;
	height: 21px;
}

paracelsus · #2 (**permalink**) 11.09.2007, 22:12

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Servus!

So sieht mein xhtml1 strict Doctype aus.
Mit dem hatte ich noch nie ein Problem.

Servus!

ThorstenSt · #3 (**permalink**) 11.09.2007, 22:44

Hallo paracelsus,

diese Doctype angabe hatte ich auch schon drin, eigentlich auch von anfang an. Die die oben im Quellcodes steht habe ich bei der Validierung bei W3C angezeigt bekommen, habe diese dann mal benutzt aber war leider auch nichts. Kannst du das vlt. mal bei dir lokal testen? Aber denke nicht das es klappen wird.

Trotzdem danke!
Vlt. weiß ja noch jmd was, oder mir bleibt nichts anderes über als eine andere CSS für IE6 zu schreiben, was doch eigentlich nicht nötig wäre, wenn der IE6 nicht in den Quirksmodus geht oder?

Gruß
Thorsten

inta · #4 (**permalink**) 11.09.2007, 22:57

Bist du sicher, dass der IE im Quirksmode ist? Hast du das mal getestet?
CSS 4 You - The Finest in Stylesheets: Workshop Doctype-Switch: Teil 1 - Doctype-Switching

Ich würde es ja ausprobieren, aber ich hab hier grad kein Windows/IE.

ThorstenSt · #5 (**permalink**) 12.09.2007, 05:58

Hallo,

Ausgabe war "CSS1Compat",

hmmm, dann geht der wohl echt nicht in den Quirksmodus.
Dann wird es vlt. so sein, das der IE mit den width:auto; Angaben nicht zurecht kommt. Was ein mist.
Dann hat der IE7 bestimmt einen Quirksmodus für die IE6 mit dabei, da wenn ja der Doctype fehlt, es im IE7 genauso aussieht wie im IE6.

Dann bleibt mir nichts anderes über als für den IE6 auch noch eine Css DAtei anzufertigen. Ohhh man.

Danke!

Wenn trotzdem einer noch einen anderen Vorschlag hat, immer her damit, aber im Moment läuft es auf eine andere CSS Datei hinaus.

Gruß
Thorsten

heiko_rs · #6 (**permalink**) 12.09.2007, 12:08

Das Problem ist:

Code:

#hauptBereich
{
	position: absolute;
	overflow: auto;
	left:21px;
	right:85px;
	top: 138px;
	bottom: 30px;
	width: auto;
	height: auto;
	border-right:1px solid #000000;
	background-color: #ffffcc;
	background-image: url('../images/border_left.jpg');
	background-repeat: repeat-y;
	margin-top:0px;
	padding-top:4px;
	padding-left:20px;
	padding-right:20px;
	z-index:0;
}

Sowas läuft nicht im IE < 7.

ThorstenSt · #7 (**permalink**) 12.09.2007, 16:38

Welche möglichkeiten habe ich dann, damit mir das so breit angezeigt wird?

1. Breite in Prozent angeben?
2. Breite nicht auf 100% festlegen, sondern feste angabe, was ich nicht unbedingt möchte.
3. Mit margin-left .. arbeiten.
4. Andere CSS Datei für IE<7 ?

Danke Gruß
Thorsten

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE6 Problem - Menü zumindest bedienbar machen	Ares	CSS	1	11.02.2011 12:33
IE6 ignoriert CSS-Anweisungen	Hallenkicker	CSS	11	27.07.2008 20:58
Text-Zeichen im IE6 wiederholen sich – Problem...	rg69	(X)HTML	2	05.06.2008 14:36
Dropdown-menü ie6 Darstellungsprobleme	Koody	CSS	6	29.08.2007 14:15
mit IE6 IE5.x simulieren?	Sukkulent	CSS	2	25.01.2005 21:00