Hilfe - Site unterschiedlich im IE8, Firefox, Opera & GoogleChrome

Edanna · #1 (**permalink**) 03.06.2009, 21:36

Ich befürchte ich werd's einfach nie (!!!) verstehen.
Vllt. sollte so ein "Hobbybastler" ja auch die finger davon lassen... trotzdem würde ich mich über eure Hilfe freuen!

Ich versteh einfach nicht, wieso ein und die selbe Seite in unterschiedlichen Browsern so unterschiedlich aussieht.

JA, ich bin Anfänger und NEIN, ich bin nicht perfekt...

Meine Seite ist die folgende:

HTML-Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rebelz of Sound</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">
  <div class="mayne">
  <img src="images/spacer.gif" width="800" height="10" />
    <div class="topp">
     </div>
    <div class="bodd">
      <div class="sbi">
         <div id="sbinav">
          <ul>
                       <li><a href="index.php">News </a></li>
            <li><a href="termine.php">Termine </a></li>
            <li><a href="about.php">About Rebelz Sound</a></li>
            <li><a href="referenzen.php">Referenzen </a></li>
            <li><a href="booking.php">Booking </a></li>
            <div id="unterpunkt">
      		<li><a href="dj.php">DJs</a></li>
     		<li><a href="bands.php">Bands</a></li>
            </div>
             <div id="sbinav">
            <li><a href="bilder.php">Bilder </a></li>
            <li><a href="kontakt.php">Kontakt </a></li>
            <li><a href="impressum.php">Impressum </a></li>
          </ul>
        </div>	
	  </div>
      <div class="mbod">
          <?php

@(include('config.php')) OR die ('<b>config.php not found!</b>');

$links 		= 'Rebelz Sound News';
$news 		= get_news();
krsort($news);



	if (!empty($news))
	{
		print '	<TABLE WIDTH=800  HEIGHT=485 BORDER=0 CELLPADDING=0 CELLSPACING=0>
			<TR WIDTH=800>
				<TD colspan=7 WIDTH=800><br></TD>
			</TR>
		';
		
		foreach ($news as $text ) 
		{
			?>
			
			<TR WIDTH=800>
			<TD WIDTH=120> </TD>
			<TD WIDTH=600 valign=top>
			<br>
			<?=$text ?>	
			<br>
			</TD>
			<TD WIDTH=23> </TD>
			</TR>

			<TR>
			<TD> </TD>
			<TD>
		
			</TD>
			<TD> </TD>
			</TR>
			<?php
		}
		print '</TABLE>';
	}
	
?>
      </div>
	  <img src="images/spacer.gif" width="1024" height="0"> 
    <div class="footer"></div>
  </div><center><p3>Copyright &copy; 2009 Rebelz of Sound. All Rights Reserved.</p3></center>
</div>
</body>
</html>

das .php - Script wird auch in allen Browsern fehlerfrei (jedoch nicht mit dem gleichen Design) ausgeführt.

So.. mein Stylesheet:

HTML-Code:

/* Page Elements */
body {
	background-color: #4c463e;
	margin-top: 0px;
	margin-bottom: 0px;
}
body,td,th {
	color: #211e1a;
	font-family: Tahoma;
	font-size: 12px;
}

p2{
	color: #ded7ce;
	font-family: Tahoma;
	font-size: 16px;
	font-weight: bold;
}

p1{
	color: #ded7ce;
	font-family: Tahoma;
	font-size: 10px;
	
}
p3{
	color: #79726a;
	font-family: Tahoma;
	font-size: 9px;	
}
a:link {
	color: #312c26;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #312c26;

}
a:hover {
	text-decoration: none;

}
a:active {
	text-decoration: none;
	color: #4c463e;
}

/* Layout Structure */
.main {
	background-color: transparent;
	width: 1024px;
	height: 768px;
	margin-right: auto;
	margin-left: auto;
}
.mayne {
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
}
.topp {
	background-image: url(images/top);
	height: 216px;
	width: 1024px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.footer {
	background-image: url(images/foot.jpg);
	width: 1024px;
	height: 67px;
}


.bodd {
	width: 1024px;
	height: 552px;
}
.mbod {
	background-image: url(images/main.jpg);
	float: left;
	width: 743px;
	heigth: 485px;
}



/* Side Panel */
.sbi {
	background-image: url(images/navi.jpg);
	float: left;
	width: 281px;
	height: 485px;
}


.sbibod {
	padding-left: 110px;
	width: 281px;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
	text-align: justify;

}
.sbi p {
	padding-left: 110px;
	width: 281px;
	text-align: justify;
}

#unterpunkt {
	color: #312c26;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 2px;
}

#unterpunkt li a {
	color: #312c26;
	text-decoration: none;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	}
#sbinav {
	width: 281px;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
}

#sbinav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#sbinav li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	padding-top: 2px;
	padding-bottom: 2px;
}

#sbinav ul a {
	color: #312c26;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 150px;

}
#sbinav ul a:hover {
	color: #d6cec4;
	padding-left: 150px;
}

Und jetzt sieht es ÜBERALL anders aus *grummel*

Bitte um Hilfe!

Praktikant · #2 (**permalink**) 03.06.2009, 23:43

Jeder Browser hat unterschiedliche Voreinstellungen für Abstände von Elementen. So fällt zum Beispiel der Abstand eines <p>-Elements im IE größer aus als im Firefox

Durch das einfügen von

Code:

* {
margin:0;
padding:0;
}

als erste Regel in deinem Stylesheet setzt die Browser-Defaults in allen Browsern auf 0. So sieht dann alles (nahezu) gleich aus.
Allerdings wird das in deinem Falle das Layout erst einmal komplett zerreisen, aber einen besseren Weg gibt es meines Wissens nach nicht.

Edanna · #3 (**permalink**) 04.06.2009, 01:52

Vielen Dank

Ich hab jetzt die <p> - Elemente gegen <font> tags ausgetauscht und die Listen anstatt mit padding einfach auf die grobe Art mit

Code:

&nbsp;

eingerückt... jetzt geht's einigermaßen bei allen Browsern.

In älteren Versionen von Firefox und IE zickt die Seite immer noch. Kann ich wohl nicht ändern...

andir · #4 (**permalink**) 04.06.2009, 08:32

Doch, könntest Du, mit geschützten Leerzeichen zu frickeln ist wirklich nicht das Gelbe vom Ei - und font-Tags anstelle von p-Tags?

In deinem Code sehe ich nicht einmal p-Tags. Naja, CSS ist nicht einfach, wie ich mich mittlerweile habe überzeugen lassen.

Du solltest Dich über das Box-Model informieren

SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

dann würde Dir einiges klarer. So ist es meist Unsinn, einem Element die Breite eines Elternelements zu geben und dann noch ein padding dazu - da padding bei den meisten zur Boxgröße dazugerechnet wird, jedenfalls bei deiner verwendeten Dokumenttypdeklaration.

DOCTYPE-Switch und seine Auswirkungen

Einen anderen Doctype zu verwenden, würde ich Dir nicht raten, lieber folgenden Rat beherzigen:

Zitat:

Eine Möglichkeit, eine einheitliche Darstellung zu erreichen, besteht darin, auf die gleichzeitige Angabe von width bzw. height und border/padding bei ein und demselben Element zu verzichten. Dies erreichen Sie mittels eines zusätzlichen Elements, das mit der gewünschten Gesamtbreite entsprechend dem korrekten Box-Modell definiert wird. Dem inneren Element können Sie nun problemlos border und padding zuweisen, da die Berechnung der Breite des äußeren Elements davon nicht beeinflusst wird.

siehe self-HTML-Link

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
CSS für Firefox, IE, Opera Probleme - Browserweiche	talkuvit	CSS	4	31.10.2009 19:07
Darstellung in Firefox und IE unterschiedlich. Boxen verschoben usw.	hss	CSS	4	29.06.2007 22:54
XHTML 1.0 strict: interpretation von alt und title (IMG) vom IE7, Opera und Firefox	braindead	(X)HTML	5	11.03.2007 17:57
Ausrichtung unterschiedlich bei Firefox unter Win + Linux	berndeckstein	CSS	1	09.02.2006 14:38
Hilfe, Darstellungsprobleme unter Firefox	zebra21	CSS	2	19.01.2005 17:18