✔ Probleme mit Textanzeige in IE6

dwex · 12. April 2007

Hallo Leute,

ich habe ein sonderbares Problem das wohl an meinem CSS liegen muss. Denn wenn ich die Seite ohne CSS publiziere wird der ganze Text angezeigt.

Aber nun erstmal von vorne.

Ich bastle gerade eine neue Website für uns die im Firefox (siehe screenshot1) korrekt angezeigt wird.

Wenn ich die gleiche Seite in IE6 (IE7 funktioniert dagegen) anzeige dann fehlt mir plötzlich der Text oberhalb der Tabellen.
Erst wenn ich in das Browserfenster klicke und und den nicht vorhandenen Text markiere erscheint der in der Markierung und wenn ich anschließend die Markierung wieder aufhebe wird der Text auch angezeigt.

Hier mein Quelltext:

HTML:

<!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">
<head>



<title>Grundinstallation - Unsere Produkte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Landgasthof Linden - Ihr ..." />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="./style.css" media="screen,projection" />


</head>
<body>
<div id="container">
	<div id="banner" ><img src="http://serv5.hosting-profi.de/wb/templates/essbo/header.jpg" alt="" border="0" />
 		<h5>Solarveranden, Whirlpools, Schwimmbäder</h5>
	</div>
	<div id="left">
		<div id="menu">
<ul>
<li><a href="http://serv5.hosting-profi.de/wb" target="_top" >Home</a></li>

<li><a href="http://serv5.hosting-profi.de/wb/pages/unsere-produkte.php" target="_top" class="current">Unsere Produkte</a></li>
<ul>
<li><a href="http://serv5.hosting-profi.de/wb/pages/unsere-produkte/unterprodukt-1.php" target="_top" >Unterprodukt 1</a></li>

<li><a href="http://serv5.hosting-profi.de/wb/pages/unsere-produkte/unterprodukt-2.php" target="_top" >Unterprodukt 2</a></li>

</ul>

<li><a href="http://serv5.hosting-profi.de/wb/pages/kontakt.php" target="_top" >Kontakt</a></li>

<li><a href="http://serv5.hosting-profi.de/wb/pages/wir-FCber-uns.php" target="_top" >Wir über uns</a></li>

<li><a href="http://serv5.hosting-profi.de/wb/pages/impressum.php" target="_top" >Impressum</a></li>

<li><a href="http://serv5.hosting-profi.de/wb/pages/zimmerbuchung.php" target="_top" >Zimmerbuchung</a></li>

</ul></div>
	</div>
	<div id="content">
		<p><strong><font color="#ff0000" size="3">Unsere Produkte</font></strong></p>
<p><font color="#000000" size="2">Da es sich bei dieser Seite um eine fiktive Seite handelt vertreiben wir auch nicht die genannten Produkte.</font></p>
<p><font color="#666666" size="2"><strong>Die Gl&uuml;hbirne unser Unterprodukt 1<br />
</strong></font></p>
<p>
<table style="BACKGROUND-IMAGE: none; VERTICAL-ALIGN: top; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TEXT-ALIGN: left; BORDER-BOTTOM-STYLE: none; cssFloat: none" cellspacing="1" cellpadding="1" rules="none" border="0" frame="void">
    <tbody>
        <tr>
            <td>
            <p><font size="2">1915&nbsp;von Thomas Edison erfunden erfreut sich die Gl&uuml;hbirne bis heute gro&szlig;er Beliebtheit. Wir haben dieses Produkt deshalb bei uns aufgenommen.</font></p>
            <p><font size="2">Unser Produktportfolio reicht von der einfachen 4W Gl&uuml;hbirne bis zum Leistungsstarken 10.000W Stadionstrahler.</font></p>
            </td>
            <td><img alt="" align="baseline" border="0" src="/wb/media/lightbulb.jpg" /></td>
        </tr>
    </tbody>
</table>
</p>
<p><font color="#666666" size="2"><strong>Der Teddyb&auml;r unser Unterprodukt 2
<table style="BACKGROUND-IMAGE: none; VERTICAL-ALIGN: top; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TEXT-ALIGN: left; BORDER-BOTTOM-STYLE: none; cssFloat: none" cellspacing="1" cellpadding="1" rules="none" border="0" frame="void">
    <tbody>
        <tr>
            <td>
            <p><font size="2">Der Teddyb&auml;r erfreut sich seit vielen hundert Jahren gr&ouml;&szlig;ter Beliebtheit bei Gro&szlig; und klein.<br />
            Genau aus diesem Grund darf der Teddyb&auml;r auch in unserem Produktportfolio nicht fehlen.</font></p>
            <p><font size="2">Wir f&uuml;hren alle Gr&ouml;&szlig;en von Teddyb&auml;ren von 1cm bis 250 cm.</font></p>
            </td>
            <td><img height="148" alt="" width="227" align="baseline" border="0" src="http://serv5.hosting-profi.de/wb/media/rans-s6-aussen.jpg" /></td>
        </tr>
    </tbody>
</table>
</strong></font></p>	</div>
 	<div id="footer"><p id=copyright>&copy;</p></div>
</div>
</body>
</html>

und hier mein CSS

HTML:

body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}

h5 {
font-size: 11px;
text-transform:uppercase;
background-color: rgb(116,137,159);
padding:5px 15px;
margin:0px }

#copyright {
font-size: 9px;
font-color: dgrey;
text-decoration: none;
background-color: rgb(116,137,159);
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 800px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: rgb(116,137,159);
}

/* ----------banner for logo-------------- */
#banner {
background-color: #ffffff;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:0px 0px;}

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 10px;
margin-left: 180px;
margin-right: 0px;
}
div#content {
min-height:450px;
height:expression(this.scrollHeight > 450 ? "auto":"450px");
}

/* --------------left navigation------------- */
#left {
float: left;
width: 180px;
margin: 0px;
padding: 0px;
}

/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }

#menu {
	clear:left;
	float:left;
	width:163px;
	margin:0px 0 0px 0;
	padding:0px;
	font-family: 'Arial', Verdana, Sans-serif; font-size: small;
}

#menu ul {
	list-style:none;
	width:163px;
	margin:0 0 0px 0;
	padding:0;
}

#menu li {
	margin-bottom:0px;
}

#menu li a {
	font-weight:bold;
	height:23px;
	text-decoration:none;
	/*color:rgb(96,94,93);*/
	color: black;
	display:block;
	padding:3px 0 0 10px;
}

#menu li a:hover, #menu li a.current {
	color:rgb(0,52,102);

}

#menu ul ul {
	margin:0px 0px 20px 15px;
	font-size:0.9em;
	width:148px;
}

#menu ul ul a {
	height:16px;
	margin:0;
	padding:4px 0 0 8px;
}

#menu h2 {
	font-size:1.5em;
	font-weight:normal;
}

Ich bedanke mich im voraus für euere Hilfe und hoffe das mein Problem lösbar ist.

Maik · 12. April 2007

Hi,

versuch es mal mit dieser zusätzlichen CSS-Regel für den IE6:

Code:

* html #content { height:1%; }

dwex · 12. April 2007

Hallo michaelsinterface,

ich habe mal den Code von dir genauso übernommen.
Leider ohne Erfolg.
Habe auch versucht es direkt in #content einzubauen - auch hier klappte es nicht.

Hast du (oder noch jemand) eine andere Idee?

Maik · 12. April 2007

Das ist aber sonderbar, denn bei mir funktioniert's einwandfrei:

dwex · 12. April 2007

Hallo michaelsinterface,

kannst du mir bitte mal den kompletten CSS-Code geben den du verwendest - vielleicht mache ich ja einen Fehler beim einbinden.
Bin mit CSS noch nicht so fit und noch am lernen.

Vielen Dank!

Maik · 12. April 2007

Code:

#content {
background-color: #ffffff;
padding: 10px;
margin-left: 180px;
margin-right: 0px;
}
div#content {
min-height:450px;
height:expression(this.scrollHeight > 450 ? "auto":"450px");
}
* html #content { height:1%; }

Ansonsten probier es mal hiermit:

Code:

#content {
float: right;
background-color: #ffffff;
padding: 10px;
width: 600px;
}

dwex · 12. April 2007

Hallo michaelsinterface,

vielen Dank - das hat geklappt.

Ich habe jetzt den Code so genommen:

HTML:

#content {
float: right;
background-color: #ffffff;
padding: 10px;
width: 600px;
}
div#content {
min-height:450px;
height:expression(this.scrollHeight > 450 ? "auto":"450px");
}

Jetzt wird bei mir alles korrekt angezeigt.
Verstanden habe ich es jedoch noch nicht so ganz.
Liegt es am Float?

Maik · 12. April 2007

Ja, es liegt an der Fließumgebung, mit der der IE6 seine Probleme hat(te).

dwex · 12. April 2007

Man

lernt nie aus.

Vielen Dank du bist spitze!

✔ Probleme mit Textanzeige in IE6

dwex

Erfahrenes Mitglied

Anhänge

Maik

dwex

Erfahrenes Mitglied

Maik

Anhänge

dwex

Erfahrenes Mitglied

Maik

dwex

Erfahrenes Mitglied

Maik

dwex

Erfahrenes Mitglied

Neue Beiträge