FF vs. IE: Darstellungsproblem

tadpole · 3. Oktober 2005

Guten Tag Leute,
ich hab mal wieder ein kleines Problem, denn heute morgen stellte sich heraus, dass der IE 6 die Seite der Band About 7 nicht richtig darstellt. Genauer gesagt wird der rechte Teil in dem die Nächsten Auftritte und die Links angezeigt werden bei längerem Seitenaufbau zu weit nach unten gezogen und die Überschriften, die ich mit jeweils einer Tabellenspalte und einer Hintergrundgrafik erstellt habe werden mehrmals wiederholt bzw. nach unten gezogen.
Fast vergessen: Im FF läuft die gesamte Seite perfekt.

Code:

<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
	<tr>
		<td width="900" colspan="8" align="left" background="images/headbg.png"><img src="images/head.png" alt="About 7"></td>
	</tr>
	<tr>
		<td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="index.php" class="menu">Home</a></td>
		<td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="band.php" class="menu">Band</a></td>
		<td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="shows.php" class="menu">Auftritte</a></td>
		<td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="media.php" class="menu">Media</a></td>
		<td width="100" height="30" align="left" background="images/navbg.png">&nbsp;<a href="gb.php" class="menu">Gästebuch</a></td>
		<td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="press.php" class="menu">Presse</a></td>
		<td width="200" height="30" align="left" background="images/navbg.png">&nbsp;<a href="contact.php" class="menu">Kontakt</a></td>
		<td width="" height="30" align="left" background="images/navbg.png">&nbsp;</td>
	</tr>
	<tr>     
		<td height="680" rowspan="7" align="left" colspan="7" valign="top"><br>
		<h2 class="content">Willkommen ...</h2>
		<p class="content">... auf der Homepage von About 7.</p>
		<h2 class="content">Neuigkeiten</h2>
		<p class="content"><?php include("news.html") ?></p>
		</td>
		<td width="150" height="50">&nbsp;</td>
	</tr>
	<tr>
		<th width="150" height="20" align="left" valign="baseline" background="images/navbg.png"><h2>&nbsp;&nbsp;&nbsp;<a href="shows.php">Nächste Auftritte</a></h2></th>
	</tr>
	<tr>
		<td width="150" align="left" valign="top"><?php include("shows.html") ?></td>
	</tr>
	<tr>
		<td width="150" height="50"></td>
	</tr>
	<tr>
		<th width="150" height="20" align="left" valign="baseline" background="images/navbg.png"><h2>&nbsp;&nbsp;&nbsp;<a href="linksfull.html">Links</a></h2></th>
	</tr>
	<tr>
		<td width="150" align="left" valign="top"><?php include("links.html") ?></td>
	</tr>
	<tr>
		<td width="150">&nbsp;</td>
	</tr>
</table>
</div>

VIelen Dank im Vorraus.

Gumbo · 3. Oktober 2005

Um eine gleichmäßige Darstellung auf den unterschiedlichsten Plattformen zu gewährleisten, ist eine Validität von HTML und CSS erforderlich.
In deinem Fall solltest du diese durch einen Markup- und CSS-Validator prüfen und etwaige Fehler beseitigen.

Maik · 3. Oktober 2005

Mit CSS und background kann geregelt werden, daß die Hintergrundgrafik nicht wiederholt wird:

CSS-Code

Code:

td.bgImage
{
background: url(images/navbg.png) no-repeat;
}

HTML:

<td class="bgImage"> ... </td>

Anmerkung: das HTML-Dokument http://www.netdisein.de/about/ ist nicht regelkonform, da es im Quelltext 4 HTML-Grundgerüste enthält :suspekt:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>ABOUT 7</title>
<meta http-equiv="imagetoolbar"content="no">
<meta name="author" content="Daniel Staemmler">
<meta name="organization" content="about 7">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
</head>
<body>
<div align="center">
üschts<table border="1" width="900" cellspacing="0" cellpadding="0">
        <tr>
                <td width="900" colspan="8" align="left" background="images/headbg.png"><img src="images/head.png" alt="About 7"></td>
        </tr>
        <tr>
                <td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="index.php" class="menu">Home</a></td>
                <td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="band.php" class="menu">Band</a></td>
                <td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="shows.php" class="menu">Auftritte</a></td>
                <td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="media.php" class="menu">Media</a></td>
                <td width="100" height="30" align="left" background="images/navbg.png">&nbsp;<a href="gb.php" class="menu">Gästebuch</a></td>
                <td width="75" height="30" align="left" background="images/navbg.png">&nbsp;<a href="press.php" class="menu">Presse</a></td>
                <td width="200" height="30" align="left" background="images/navbg.png">&nbsp;<a href="contact.php" class="menu">Kontakt</a></td>
                <td width="" height="30" align="left" background="images/navbg.png">&nbsp;</td>
        </tr>
        <tr>
                <td height="680" rowspan="7" align="left" colspan="7" valign="top"><br>
                <h2 class="content">Willkommen ...</h2>
                <p class="content">... auf der Homepage von About 7.</p>
                <h2 class="content">Neuigkeiten</h2>
                <p class="content"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>ABOUT 7</title>
<meta http-equiv="imagetoolbar"content="no">
<meta name="author" content="Daniel Staemmler">
<meta name="organization" content="about 7">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
</head>
<body>
<p class="content">
<b>02.10.2005 >>> Der Traum läuft ... </b><br><br>
... die Seite ist nun endlich online und scheint auch zu funktionieren. Zwar fehlt noch einiges an Inhalt, aber verschiedene multimediale Apsekte wie Banner, Wallpaper und auch Videos () werden nicht mehr lange auf sich warten lassen. Schreibt einfach in unser Göstebuch oder schaut mal in der Auftrittesektion vorbei, denn unter Umständen spielen wir demnächst mal wieder in eurer Nähe.
Zu den letzten Auftritten in Mausbach und vor allen Dingen dem (großen) Auftritt
in Inden/Altdorf gibt es hier ein kleines Review von Fränki:<br>
<i>Durch den Gig bei Uwe's Onkel in Mausbach, der sich unerwartet bis 3:15
ausdehnte, wurde der Auftritt auf dem Zentrumsfest in Inden/altdorf zum reinen
Selbstdisziplintest. Egal ... Die dunklen Augenränder wurden durch Sonnenbrillen
kaschiert und das Publikum erneut begeistert ! </i><br>
Viel Spaß noch wünscht euch ABOUT 7.

</p>
</body>

</html>
</p>
                </td>
                <td width="150" height="50">&nbsp;</td>
        </tr>
        <tr>
                <th width="150" height="20" align="left" valign="baseline" background="images/navbg.png"><h2>&nbsp;&nbsp;&nbsp;<a href="shows.php">Nächste Auftritte</a></h2></th>
        </tr>
        <tr>
                <td width="150" align="left" valign="top"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>ABOUT 7</title>
<meta http-equiv="imagetoolbar"content="no">
<meta name="author" content="Daniel Staemmler">
<meta name="organization" content="about 7">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
</head>
<body>
</body>
</html></td>
        </tr>
        <tr>
                <td width="150" height="50"></td>
        </tr>
        <tr>
                <th width="150" height="20" align="left" valign="baseline" background="images/navbg.png"><h2>&nbsp;&nbsp;&nbsp;<a href="linksfull.html">Links</a></h2></th>
        </tr>
        <tr>
                <td width="150" align="left" valign="top"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>ABOUT 7</title>
<meta http-equiv="imagetoolbar"content="no">
<meta name="author" content="Daniel Staemmler">
<meta name="organization" content="about 7">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
</head>
<body>
<br>
<h3>
<a href="http://www.musicstorekoeln.de/" target="_blank">Music Store</a><br>
<a href="http://www.netdisein.com" target="_blank">NETDISEIN</a><br>
<a href="http://www.fotografie-coenen.com" target="_blank">Fotografie Coenen</a><br>
<a href="http://www.devadib.de" target="_blank">Devadib</a><br><br>
</h3>
</body>

</html></td>
        </tr>
        <tr>
                <td width="150">&nbsp;</td>
        </tr>
</table>
</div>
<p align="center" class="credits">© 2005 by <a href="http://www.netdisein.com/" target="_blank" class="credits">NETDISEIN</a></p>
</html>

Valides HTML-Grundgerüst

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>ABOUT 7</title>
<meta http-equiv="imagetoolbar"content="no">
<meta name="author" content="Daniel Staemmler">
<meta name="organization" content="about 7">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
</head>
<body>

<!-- Seiteninhalt -->

</body>
</html>

tadpole · 3. Oktober 2005

@ gumbo: Scho klar. Den CSS Validator habe ich schon lange im Voraus bemüht und der sagte auch, dass alle soweit okay ist. Den HTML Validator konnte ich nicht benutzen, da es sich um php-Dateien handeln (zwar nur mit includes aber egal), doch vorher sagt der auch, dass es okay wäre.
@ michael: Ja den CSS-Weg hätte ich auch genommen. Zu den 4 HTML-Grundgerüsten: Ich sollte mal die Header der Dateien bearbeiten, die included werden.

Was noch nicht gelöst wäre, ist das Problem, dass sich der ganze rechte Teil nach unter verschiebt, wie man im Bandteil sieht.

Gumbo · 3. Oktober 2005

Den HTML Validator konnte ich nicht benutzen, da es sich um php-Dateien handeln […]

Was hintert dich daran, die Ausgabe des PHP-Skriptes mit einem HTML-Validator zu prüfen?

FF vs. IE: Darstellungsproblem

tadpole

Mitglied

Gumbo

Erfahrenes Mitglied

Maik

tadpole

Mitglied

Gumbo

Erfahrenes Mitglied

Neue Beiträge