zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe - Site unterschiedlich im IE8, Firefox, Opera & GoogleChrome

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.06.2009, 20:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2009
Beiträge: 2
Edanna befindet sich auf einem aufstrebenden Ast
Standard Hilfe - Site unterschiedlich im IE8, Firefox, Opera & GoogleChrome

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.06.2009, 22:43
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2009, 00:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2009
Beiträge: 2
Edanna befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2009, 07:32
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS für Firefox, IE, Opera Probleme - Browserweiche talkuvit CSS 4 31.10.2009 18:07
Darstellung in Firefox und IE unterschiedlich. Boxen verschoben usw. hss CSS 4 29.06.2007 21:54
XHTML 1.0 strict: interpretation von alt und title (IMG) vom IE7, Opera und Firefox braindead (X)HTML 5 11.03.2007 16:57
Ausrichtung unterschiedlich bei Firefox unter Win + Linux berndeckstein CSS 1 09.02.2006 13:38
Hilfe, Darstellungsprobleme unter Firefox zebra21 CSS 2 19.01.2005 16:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:04 Uhr.