✔ Darstellungsfehler IE6: CSS-Werte werden ignoriert

Status
Nicht offen für weitere Antworten.
R

Roland Deschain

Mitglied
Mir ist ein kleines Problem aufgefallen. Und zwar erstelle ich gerade eine Seite, bei der der IE6 (und 5.5) die CSS Formatierungen nicht übernimmt. Mittels http://browsershots.org (zufällig entdeckt) habe ich 27 Browser/Betriebssystemkombinationen getestet - überall stimmt es - nur beim IE6 und darunter nicht.

Ich binde zuerst ein "Master-CSS" ein, um diverse Browserunterschiede auszugleichen. Anschließend (wirklich hinterher ;) ) kommt das folgende Style (davor steht auch noch etwas, die Menüformatierung kommt ganz am Schluss). Die CSS binde ich per @import url(template/style.css) ein.

Wenn man nur diesen unten stehenden Code in eine Seite einbindet, zeigt es der IE6 richtig an, wenn es aber mit dem anderen CSS im Layout steht, werden offenbar sämtliche Formatierungen ignoriert! D.h. der IE6 formatiert die Schrift nicht, hat die standard-blaue Linkfarben und rückt das Untermenü nicht ein.

Kann mir das jemand erklären?! Ich verstehe es einfach nicht...

Ach ja: Es gibt nur eine "important"-Anweisung in beiden CSS, die bezieht sich aber auf eine ganz andere Klasse und lautet nur "text-decoration: none !important;"...

CSS:
HTML: 
.lftmenu {width:100%;display: inline;}
.lftmenu div {margin:0px;padding:0;font:bold 14px Verdana, Helvetica, Arial, sans-serif;}
.lftmenu div a {margin:5px;display:block;text-decoration:none;color:#000;}
.lftmenu div.lv2 a {color:#45901D;}
.lftmenu div.lv3 a {margin-left:15px;}
.lftmenu div.lv4 a {margin-left:25px;}
.lftmenu div.lv5 a {margin-left:35px;}
.lftmenu div.lv6 a {margin-left:45px;}
.lftmenu div#activated {background-color:#E3F2D4;}

Menü
HTML: 
<div class="lftmenu">
 <div class="lv2" id="activated"><a href="index.php?page=16&thisMenuID=7" target="_top" title="Seniors">Seniors</a></div>
 <div class="lv3"><a href="index.php?page=13&thisMenuID=10" target="_top" title="Seminars">Seminars</a></div>
 <div class="lv3"><a href="index.php?page=19&thisMenuID=11" target="_top" title="Workshops">Workshops</a></div>
 <div class="lv3"><a href="index.php?page=21&thisMenuID=12" target="_top" title="Cinema">Cinema</a></div>
 <div class="lv3"><a href="index.php?page=20&thisMenuID=13" target="_top" title="Dancing">Dancing</a></div>
 <div class="lv3"><a href="index.php?page=3&thisMenuID=14" target="_top" title="Crafts">Crafts</a></div>
 <div class="lv2"><a href="index.php?page=18&thisMenuID=8" target="_top" title="Youth">Youth</a></div>
 <div class="lv2"><a href="index.php?page=17&thisMenuID=9" target="_top" title="Child">Child</a></div>
</div>
 
Hi,

zeig bitte mal alle Stylesheets und wie du sie in das Dokument einbindest, wenn es doch mit dem gezeigten Stylesheet keine Probleme im IE gibt.
 
Ok, wenn es hilfreich ist:

Master-Style:
HTML: 
/***** Global Settings *****/

html, body {
 border:0;
}

body {
 font:100%/1.25 Verdana, Arial, Helvetica, sans-serif;
}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {
 padding:0;
 margin:0;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
 font-size:100%; 
 font-weight:normal;
}

h1 {
 padding:30px 0 25px 0;
 letter-spacing:-1px;
 font-size:2em;
}

h2 {
 padding:20px 0;
 letter-spacing:-1px;
 font-size:1.5em;
}

h3 {
 font-size:1em;
 font-weight:strong;
}

/***** Common Formatting *****/

p, ul, ol {
 margin:0;
 padding:0 0 1.25em 0;
}

ul, ol {
 padding:0 0 1.25em 2.5em;
}

blockquote {
 margin:1.25em;
 padding:1.25em 1.25em 0 1.25em;
}

small {
 font-size:0.85em;
}

img {
 border:0;
}

sup {
 position:relative;
 bottom:0.3em;
 vertical-align:baseline;
}

sub {
 position:relative;
 bottom:-0.2em;
 vertical-align:baseline;
}

acronym, abbr {
 cursor:help;
 letter-spacing:1px;
 border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited {
 text-decoration:none;
}

a:hover {
 text-decoration:underline;
}

/***** Forms *****/

form {
 display:inline;
}

input, select, textarea {
 font:1em Verdana, Arial, Helvetica, sans-serif;
}

textarea {
 width:100%;
 line-height:1.25;
}

label {
 cursor:pointer;
}

/***** Tables *****/
table {
 border:0;
 margin:0 0 1.25em 0;
 padding:0;
}

table tr td {
 vertical-align:top;
 border-collapse:collapse;
 border-spacing:0;
}

q:before,q:after { 
  content:'';
}

Spezielle Formatierungen:
HTML: 
/* Allgemein */

body {
  color: #000;
  background-color: #fff;
  font-family: Verdana, Arial, sans-serif;
  text-align: center;
  margin: 12px;
}

/* Textformatierungen */

a {
  text-decoration: none;
}


a:hover {
  text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
}



h1 {
  font-size: 1.3em;
}



h2 {
  font-size: 1.2em;
}



h3, h4, h5, h6 {
  font-size: 1.1em;
}




/* Zwei Tabellenzeilen unterschiedlicher Farbe */

tr.odd td  { background-color: inherit; }
tr.even td { background-color: #eee; }


tr.tabTitle td {
	padding: 0.3em;
	font-weight: bold;
	background-color: #C9E1A8;
	background-repeat: no-repeat;
}



/* Nachrichtbox für Mitteilungen (hauptsächlich im Adminbereich */

.messages {
  background-color: #C9E1A8;
  border: 1px solid #73BD26;
  padding: 0.3em;
  margin-bottom: 1em;
}


/* Nachrichtbox für Fehlermeldungen (hauptsächlich im Adminbereich */


.error {
  background-color: #C9E1A8;
  border: 1px solid red;
  padding: 0.3em;
  margin-bottom: 1em;
}


/* Kleine Schrift (z.B. für Bildunterschrift) */
.smalltext {
  font-size: 11px;
}

/* Bilder */
img {
  margin: 5px 0;
}

/* Flaggen fuer Sprachauswahl */
.langflag {
  margin: 3px;
}


#table1 {
  width: 980px;
}

#table1 td {
  padding: 0 2px;
}

#table2 {
  width: 766px;
}

#table3 {
  width: 100%;
}

#headpic_td {
  text-align: center;
  height: 185px;
}

.headpic {
  margin: 10px 5px;
}

/* Kopfbereich */

.perforation {
  background: url(images/perforation.gif) repeat-x;
  height: 10px;
  width: 100%;
  display: block;
}



/* Linke Seite */
#leftrow {
  padding: 0;
  margin: 0;
  width: 168px;
}


/* Rechte Seite */
#rightrow {
  width: 148px;
}

/*  */
#centerrow {
  width: 630px;
}

/*  */
#sidebar {
  width: 209px;
  font-size: 12px;
  color: #4C4C4C;
  font-style: italic;
}

/*  */
#mainbar {
  width: 421;
}

#sidebar-right-album {
  width: 120px;
}

#sidebar-right p,
#sidebar-right-album p {
	padding: 0 5px 0 5px;
	font-size: 11px;
}


/* Fußbereich */
#footer {
  font-size: 9px;
  border-top: 2px solid #73BD26;
  margin-top: 50px;
}


/* Runde Ecken 1 */

.border_round1 b.bt,
.border_round1 b.bt b,
.border_round1 b.bb,
.border_round1 b.bb b {
  display: block;
  height: 10px;
  font-size: 1px;
  background:url(images/round1.gif) no-repeat;
  position:relative;
}

.border_round1 b.bt b {
  background-position:100% -10px;
}

.border_round1 b.bb {
  background-position:0 -20px;
}
  
.border_round1 b.bb b {
  background-position:100% -30px;
}
  
.border_round1 {
  background-color: #C9E1A8;
}


/* Runde Ecken 2a */

.border_round2a h2 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -1px;
  margin: 5px;
  padding: 0;
  position: relative;
  top: -7px;
}

.border_round2a b.bt,
.border_round2a b.bt b {
  display: block;
  height: 12px;
  font-size: 1px;
  background:url(images/round2.gif) no-repeat;
  position:relative;
}

.border_round2a b.bt {
  top: -3px;
  left: -3px;
}

.border_round2a b.bt b {
  background-position:100% -12px;
  left: 6px;
}
  
.border_round2a {
  background-color: #D0EBB0;
  border: #BCD7AE 3px solid;
  border-bottom: 0;
}


/* Runde Ecken 2b */

.border_round2b b.bb,
.border_round2b b.bb b {
  display: block;
  height: 12px;
  font-size: 1px;
  background:url(images/round2.gif) no-repeat;
  position:relative;
}

.border_round2b b.bt {
  top: -3px;
  left: -3px;
}

.border_round2b b.bb {
  background-position:0 -24px;
  top: 7px;
  left: -7px;
}
  
.border_round2b b.bb b {
  background-position:100% -36px;
  left: 14px;
}
  
.border_round2b {
  background-color: #E5F4D3;
  border: #BCD7AE 3px solid;
  border-top: 0;
  font-size: 11px;
  padding: 4px;
  position: relative;
  top: -5px;
}


#content {
   text-align:left;
   margin:0 auto;
   width: 980px;
}

#main {
  padding: 20px 20px 20px 20px;
  font-size: 0.8em;
}

#attaches {
  font-size: 10px;
}

/* Eingabefelder */

input, textarea {
  color: #000;
  background-color: #E3F2D4;
  border: 1px solid #73BD26;
}



/* Formularbutton */
input.button  {
  color: #FFF;
  font-weight: bold;
  background-color: #73BD26;
  border: 2px solid #C9E1A8;
  text-decoration: none;
}



/* Icons im Adminbereich und Bilder allgemein*/
.icon, img  {
  border: 0;
}




/* A-HREF, soll wie Button aussehen */
.link2button  {
  color: #FFF;
  font-weight: bold;
  background-color: #73BD26;
  border: 2px solid #C9E1A8;
  margin: 4px;
  padding: 1px 10px 1px 10px;
  text-decoration: none !important;
}

.link2button:link {
  color: #FFF;
}

.link2button:visited {
  color: #FFF;
}

.link2button:hover {
  color: #FFF;
}


/* Menü oben */
.menu1_button {
  background: url(images/topbutton_off.gif) #706F70;
  color: #FFF;
  font-family: Verdana, Arial, sans-serif;
  font-size: 15px;
  width: 144px;
  padding: 2px;
  margin: 5px 2px;
  display: block;
  float: left;
}

.menu1_button:link {
  text-decoration: none;
  font-weight: bold;
}

.menu1_button:hover {
  color: #C9E1A8;
  text-decoration: underline;
}

.menu1_button:visited {
  font-weight: bold;
  text-decoration: none;
}

/* Menü unten */
.menuBtm {
  font-size: 11px;
}

#mcc_logo1 {
  margin: 12px 12px;
}


/* Linkes Menü */
.lftmenu {width:100%;display: inline;}
.lftmenu div {margin:0px;padding:0;font:bold 14px Verdana, Helvetica, Arial, sans-serif;}
.lftmenu div a {margin:5px;display:block;text-decoration:none;color:#000;}

.lftmenu div.lv2 a {color:#45901D;}
.lftmenu div.lv3 a {margin-left:15px;}
.lftmenu div.lv4 a {margin-left:25px;}
.lftmenu div.lv5 a {margin-left:35px;}
.lftmenu div.lv6 a {margin-left:45px;}

.lftmenu div#activated {background-color:#E3F2D4;}

Und so wird es eingebunden:
HTML: 
	<style type="text/css">
		@import url(template/master.css);
		@import url(template/style.css);
	</style>
 
Ich denke, dir kommt da einfach nur die text-align:center-Deklaration für das body-Element in die Quere, die im IE alle Elemente im Browserfenster horizontal zentriert, und daher an geeigneter Stelle im HTML-Markup mit text-align:left wieder aufgehoben werden muss.

Ansonsten kann ich keine weiteren Darstellungsfehler im IE (5.5 & 6) entdecken, sprich die Links werden in den definierten Schriftarten und Farben dargestellt.
 
Maik hat gesagt.:
Ich denke, dir kommt da einfach nur die text-align:center-Deklaration für das body-Element in die Quere, die im IE alle Elemente im Browserfenster horizontal zentriert.

Ansonsten kann ich keine weiteren Darstellungsfehler im IE (5.5 & 6) entdecken, sprich die Links werden in den definierten Schriftarten und Farben dargestellt.
Zum Vergrößern anklicken....

Alles innerhalb des Body ist in einem DIV (#content) gekapselt, wo ich alles wieder linksbündig setze. Damit wollte ich eine Zentrierung der Homepage bei fester Breite erreichen.

Dennoch tritt der Fehler ja auf. Ich habe die Seite bei einem Bekannten aufgerufen, der noch den IE6 hat - da ist der Fehler identisch zu der Simulation auf http://browsershots.org.

Na ja, trotzdem danke für die Mühe... vielleicht findet sich ja morgen noch jemand, der mir helfen kann.
 
Und hier nochmal die Seite... damit es komplett ist - wer weiß, wo sich der Fehler verbirgt. (Evtl. im Doctype?!)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<title>Consectetuer lectus justo id tortor</title>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
	<meta name="keywords" content="">
	<meta name="robots" content="index,follow">
	<style type="text/css">
		@import url(master.css);
		@import url(style.css);
	</style>
	<script language="JavaScript1.5" type="text/javascript">

function showbig (pic,text) {
	f1=window.open("bigpic.php?pic="+pic+"&text="+escape(text), "Grossansicht","toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no");
	f1.moveTo(0,0);
	f1.focus();
}

function changePic (pic,text) {
	nextPic     = new Image();
	nextPic.src = pic;
	document.images["albumpicture"].src = nextPic.src;
}

</script>
</head>

<body>

<div id="content">

<table id="table1" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td id="leftrow">
		<div class="border_round1"><b class="bt"><b></b></b><a href="index.php"><img src="template/images/mcc_logo.gif" width="140" height="232" alt="Middleton Community Care Logo" id="mcc_logo1"></a><b class="bb"><b></b></b></div>
		
<div class="lftmenu">
 <div class="lv2" id="activated"><a href="index.php?page=16&thisMenuID=7" target="_top" title="Seniors">Seniors</a></div>
 <div class="lv3"><a href="index.php?page=13&thisMenuID=10" target="_top" title="Seminars">Seminars</a></div>
 <div class="lv3"><a href="index.php?page=19&thisMenuID=11" target="_top" title="Workshops">Workshops</a></div>
 <div class="lv3"><a href="index.php?page=21&thisMenuID=12" target="_top" title="Cinema">Cinema</a></div>
 <div class="lv3"><a href="index.php?page=20&thisMenuID=13" target="_top" title="Dancing">Dancing</a></div>
 <div class="lv3"><a href="index.php?page=3&thisMenuID=14" target="_top" title="Crafts">Crafts</a></div>
 <div class="lv2"><a href="index.php?page=18&thisMenuID=8" target="_top" title="Youth">Youth</a></div>
 <div class="lv2"><a href="index.php?page=17&thisMenuID=9" target="_top" title="Child">Child</a></div>
</div>
		<div id="footer">
			<a href="" class="menuBtm">Login</a><a href="index.php?page=1"><img src="images/flag_gb.gif" alt="Switch to english" width="10" class="langflag" /></a><img src="images/flag_d_off.gif" alt="Gew&auml;hlte Sprache: Deutsch" width="10" class="langflag" /><br />&copy; 2008<br />
		</div>
	</td>
	<td>

		<table id="table2" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2" id="headpic_td">
				<div class="border_round1"><b class="bt"><b></b></b><span class="perforation"></span>
				<img src="template/images/pic1.jpg" width="141" height="115" alt=" " class="headpic"><img src="template/images/pic2.jpg" width="141" height="115" alt=" " class="headpic"><img src="template/images/pic3.jpg" width="141" height="115" alt=" " class="headpic"><img src="template/images/pic4.jpg" width="141" height="115" alt=" " class="headpic"><img src="template/images/pic5.jpg" width="141" height="115" alt=" " class="headpic"><span class="perforation"></span><b class="bb"><b></b></b></div>
				<a href="index.php?page=14&thisMenuID=2" title="" class="menu1_button">About us</a><a href="index.php?page=15&thisMenuID=3" title="" class="menu1_button">Facility</a><a href="index.php?page=12&thisMenuID=4" title="" class="menu1_button">Activities</a><a href="index.php?page=3&thisMenuID=5" title="" class="menu1_button">Partners</a><a href="index.php?page=3&thisMenuID=6" title="" class="menu1_button">Calendar</a>			</td>
		</tr><tr>
			<td id="centerrow">

				<table id="table3" border="0" cellpadding="0" cellspacing="0">
				<tr>
				<td id="sidebar"><p><a href="javascript:showbig('files/Dance1.jpg','');"><img src="inc/image.inc.php?pic=../files/Dance1.jpg&picMaxX=200"></a><br /><br />Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tempus, leo eu consequat ultrices, ante neque consequat diam. Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est.</p></td>
				<td id="mainbar">
					<div id="main">
		
						<h1 class="title">Consectetuer lectus justo id tortor</h1>
		
						<p>Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tempus, leo eu consequat ultrices, ante neque consequat diam. Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est.</p>
<p>Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tempus, leo eu consequat ultrices, ante neque consequat diam. Consectetuer lectus justo id tortor. Phasellus non magna. In magna lacus, semper vitae, eleifend at, commodo sed, sem. Duis sapien augue, adipiscing sit amet, blandit eget, nonummy id, felis. Aenean quis felis. Maecenas ultrices condimentum est.</p>					</div>
				</td>
				</tr>
				</table>

			</td>
			<td id="rightrow">			<img src="template/images/news.gif" alt=" " width="148" height="33" vspace="5" border="0">
			<div class="border_round2a"><b class="bt"><b></b></b>
				<h2>Spring gala dance</h2><b class="bb"><b></b></b></div>
				<div class="border_round2b"><b class="bt"><b></b></b>
				Middleton hall is the venue of choice for several dance groups, including "Line Dancing" and "Scottish Highland...
				more...<b class="bb"><b></b></b></div>
				
				<div class="border_round2a"><b class="bt"><b></b></b>
				<h2>Dummy</h2><b class="bb"><b></b></b></div>
				<div class="border_round2b"><b class="bt"><b></b></b>
				Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
				more...<b class="bb"><b></b></b></div>
				
				<div class="border_round2a"><b class="bt"><b></b></b>
				<h2>Dummy</h2><b class="bb"><b></b></b></div>
				<div class="border_round2b"><b class="bt"><b></b></b>
				Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
				more...<b class="bb"><b></b></b></div>	
			</td>
		</tr>
		</table>

	</td>
</tr>
</table>

</div>


</body>
</html>
 
Roland Deschain hat gesagt.:
Und hier nochmal die Seite... damit es komplett ist - wer weiß, wo sich der Fehler verbirgt. (Evtl. im Doctype?!)
Zum Vergrößern anklicken....
Frag mich jetzt bitte nicht wieso, aber der Grund ist die META-Angabe zur "UTF-8"-Zeichenkodierung:

Code: 
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
Wenn ich sie herausnehme, oder durch "ISO-8859-1" ersetze, nimmt der IE die Formatierungen an.
 
Maik hat gesagt.:
Frag mich jetzt bitte nicht wieso, aber der Grund ist die META-Angabe zur "UTF-8"-Zeichenkodierung:

Code: 
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
Wenn ich sie herausnehme, oder durch "ISO-8859-1" ersetze, nimmt der IE die Formatierungen an.
Zum Vergrößern anklicken....

Das ist ja bekloppt! :eek:
Ein Bekannter von mir kann es mit seinem IE6 immer noch nicht richtig sehen. Aber ich werde mich nachher selber davon überzeugen... nicht, dass es ein Cache-Problem ist...

Bei "Content-Type" fehlen auch die Anführungszeichen, ist mir eben aufgefallen. Ich bleibe dran und melde mich - vielen Dank erst mal! :)
 
Hallo,
bei mir stellt der IE6 das Menü genau so wie der Firefox dar, allerdings müssen die beiden CSS-Dateien ebenfalls in UTF-8-Kodierung ausgeliefert werden. :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück