Zur Navigation

css unterschiedliche Darstellung in IE und Firefox 7.01

1 Lysander

Ich habe meine Seite von frame auf include() umgestellt und dazu auch noch ein css-script mit einkopiert.
Meine seite ist wie folgt aufgebaut
im Ordner "grundaufbau" sind kopf.inc.php , navi.inc.php und screen.css
Anfangs hatte ich massive Probleme mit der Darstellung zwischen Firefox und IE, Firefox machte alles wie gewünscht, bei IE erschien dann die Index.php entweder massiv nach unten oder massiv nach rechts gerutscht. Nun habe ich an dem css-script weitere Dinge verändert (verstehe davon aber nichts). Nun zeigen bei mir beide Browser ein relativ gleiches Bild. Nur, ich habe eine Freundin gebeten, sich die Seite ebenfalls anzuschauen, mit Firefox 7.01 (gleiche Version wie bei mir). Bei ihr ist jedoch diese index-Seite wie oben erkärt komplett verschoben, bei mir nicht. Wie kann das sein, was muß ich im script noch ändern ?
Meine Seite lautet:
http://www.gyros-brasil.com.br


Hier das css-script
/* screen.css */


#logo {

	width: 1300px;
	padding-left: 0px;         /* links */
    padding-top: 0px;          /* oben */
}

#logo a {

	padding: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}

#logo a:hover {
	color: ffffff;
	background-color: #cba24b;
	border: 1px solid #453514;
}

#navigation a {

	padding: 2px 2px 2px 2px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}

#navigation a:hover {
	color: ffffff;
	background-color: #cba24b;
	border: 1px solid #453514;
}

#inhalt {
	margin: 0 0 0 25px;
	padding: 30px 50px 22px 30px;
	border-left: dotted 2px #bb9137;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 0.8em;background-color: #ff9900;
}

20.10.2011 21:53

2 Jörg Kruse

Deine Freundin hat vermutlich eine andere Bildschirmauflösung. Wenn du einen größeren Bildschirm hast, kannst du das ja testen, indem du das Browserfenster verkleinerst. Bei der noch recht gebräuchlichen Breite von 1024 px wird der Hauptinhalt nach unten verschoben.

20.10.2011 22:28

3 Lysander

Hallo Jörg,
danke für Deine Information.
Nun habe ich in meinem css-script die Breite geändert.
Der I/E zeigt nun ganz normal an, aber Firefox zeigt nun die navi-Seite ganz nach rechts verschoben und den Index-Text nach unten.
Ich habe meine Bildschirmgröße nicht verändert.
Wie muß ich das script abändern, daß das bei versch. Bildschirmgrößen richtig angezeigt wird ?

/* screen.css */

#logo {

/*	width: 1300px; */
	width: 1024px;
	padding-left: 0px;         /* links */
    padding-top: 0px;          /* oben */
}

21.10.2011 00:40

4 Jörg Kruse

Was ist das für eine merkwürdige Doctype-Angabe:

<!DOCTYPE HTML PUBLIC "-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN" "hmpro6.dtd">

HTML 4.0 ist zudem schon lange veraltet, gebräuchlich ist die Version 4.01. Wenn du sicherstellen möchtest, dass die Browser die Seite möglichst gleich anzeigen, solltest du eine Doctype-Angabe von w3.org für strictes HTML verwenden:

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

Dann weist dein HTML einige sehr schwere Fehler auf. Ein HTML-Dokument beinhaltet genau ein html- und ein genau head- und genau ein body-Element, nicht mehr und nicht weniger.

Solange das HTML-Grundgerüst nicht in Ordnung ist, ist es schwierig bis unmöglich, zu erreichen, dass alle wichtigen Browser die Seite gleich anzeigen:

http://de.selfhtml.org/html/allgemein/grundgeruest.htm

21.10.2011 07:20

5 Lysander

Hallo Jörg, vielen Dank für Deine Erklärungen.
Diese doctype-Angabe habe ich noch nie beachtet, da dies mein Programm automatisch macht, ich arbeite mit einem alten Programm mit dem Namen HotMetal.
Ich habe nun manuell auf allen meinen Seiten diese doctype Angabe geändert. (habe gerade nochmals getestet, aber es bleibt bei der gleichen fehlerhaften Darstellung)

Was ich aber nicht verstehen kann ist Dein Impuls bezüglich HTML-Gerüst. Okay, ich bin Laie, mache aber doch schon seit einiger Zeit einfacher Internetseiten (bisher aber alle im Frame-Bereich)
Mit meinem Programm ist es gar nicht möglich die gerade bearbeite Seite zu beenden, wenn dort ein solcher Grundgerüstfehler drin wäre. Habe das gerade auch nochmals getestet.
Ich habe mir nochmals bspw. meine Index-Seite angeschaut, aber ich finde hier keinerlei Fehler bezüglich diesem Gerüst.
Könntest Du mir im Detail zeigen, bspw. bei index.php , wo dieser Fehler ist.

Nachfolgend kopiere ich Dir diese index-Seite ein (ohne Text im table-Bereich)


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

<HTML> 
  <HEAD> 
	 <TITLE>Gyros, Lanchonete, Churrasco</TITLE>
	 <LINK REL="shortcut icon" TYPE="image/x-icon" HREF="/sonstiges/icon.ico">
	 <META NAME="robots" CONTENT="index, follow "> <!--bedeutet, Suchmaschine soll diese Seite indexieren und Links verfolgen-->
	 <META HTTP-EQUIV="language" CONTENT="br">   <!--bedeutet, Seitensprache portugiesisch in Brasilien-->
	 <META NAME="keywords" CONTENT="Gyros, Döner, Churrasco ,Lanchonette">  <!--wichtigste Suchbegriffe-->
	 <META NAME="description"
	  CONTENT="Vários tipos de carne marinadas em molho picante grelhados, em verticalgrelha, servido com molho picante, com tomate, cebola e repolho em pão branco">
	 <!--wichtig, hier bis 250 Zeichen erklären, was die Seite bietet, nicht nur Begriffe-->
	 <META NAME="Page-type"
	  CONTENT="Vários tipos de carne marinadas em molho picante grelhados, em vertical grelha, servido com molho picante, com tomate, cebola e repolho em pão branco">
	  <!--wie oben-->
	 <META NAME="abstract" CONTENT="Especialista de Gyros">
	 <META NAME="Page-topic" CONTENT="Churrasco ,Lanchonette "> <!--Kategorie für Suchmaschine-->
	 <META NAME="revisit-after" CONTENT="1 month"> <!--wann solchen kleinere Suchmaschinen die Seite wieder besuchen-->
	 <META NAME="siteinfo" CONTENT="http://www.gyros-brasil.com.br/robots.txt"> <!--diese Seiten nicht indexieren, bspw. /scripts oder /php-->
	 <META NAME="publishers" CONTENT="Gyros-Brasil">
	 <META NAME="copyright" CONTENT="Gyros-Brasil">
	 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
	 <LINK REL="stylesheet" TYPE="text/css" MEDIA="screen"
	  HREF="grundaufbau/screen.css"> 
  </HEAD> 
  <BODY BGCOLOR="#FF9900" LINK="#000000">
  <?PHP include("grundaufbau/kopf.inc.php"); ?>
  <?PHP include("grundaufbau/navi.inc.php"); ?>
	 <BR><BR> 
	 <TABLE WIDTH="800" ALIGN="CENTER"> 
		<TR VALIGN="TOP"> 
		  <TD VALIGN="TOP" ALIGN="CENTER"><BR><BR> 
			 <P ALIGN="CENTER">Bemvindo<?PHP include("php/datum-uhrzeit.php"); ?><BR><FONT
				COLOR="#FFFFFF"><BR></FONT> <BR> </P> 
			 <TABLE WIDTH="70%" ALIGN="CENTER"> 
				<TR VALIGN="MIDDLE"> 
				  <TD VALIGN="MIDDLE" ALIGN="CENTER"> 
					 <TABLE WIDTH="500" ALIGN="CENTER"> 
						<TR> 
						  <TD ALIGN="CENTER"><? include "counter/Visitantes/counter.php"; ?></TD>
						  
						</TR> 
					 </TABLE></TD> 
				</TR> 
			 </TABLE></TD> 
		</TR> 
	 </TABLE><BR> <BR> </BODY>
</HTML>



Hallo Jörg,
gerade hatte ich die Idee, mir doch einmal die index-Seite die online ist im Quelltext anzuschauen, nun kann ich erst verstehen, was Du mit Deiner Aussage meintest.
Jetzt bin ich aber ratlos. Was passiert hier. Auf meinem Computer ist der Quelltext in Ordnung, siehe meine obige Kopie, hier aber online ist wirklich ein wahres Chaos drin. Wie kann das passieren, daß sich der Quelltext beim Rüberkopieren derart verändert ? Hast Du dazu eine Idee ?

Zusatz. Ich habe jetzt gerade den oben einkopierten gekürzten index-Quellcode nochmals rüberkopiert mit Bezeichnung index2.php .
Hier sieht man im Detail wie sich der Text verändert im Vergleich zu meinem Originaltext auf meinem Rechner

21.10.2011 16:19 | geändert: 21.10.2011 16:31

6 Jörg Kruse

Du inkludierst hier den Inhalt zweier Dateien:

  <?PHP include("grundaufbau/kopf.inc.php"); ?>
  <?PHP include("grundaufbau/navi.inc.php"); ?>

In den Include-Dateien sollten nur die HTML-Abschnitte enthalten sein, die an der Stelle angezeigt werden sollen - keine kompletten HTML-Dokumente, wie das bei (I-)Frames der Fall ist!

21.10.2011 17:06 | geändert: 21.10.2011 17:07

7 Lysander

Hallo Jörg, danke, das war der entscheidende Tipp für dieses Durcheinander im Quelltext. Ich habe das nun korrigiert.
Meiner Meinung nach ist nun im Quelltext alles in Ordnung.

Natürlich ist noch immer das Problem da, mit den unterschiedlichen Darstellungen.

1. Im Mozilla scheint alles in Ordnung zu sein in der Darstellung ausser, der Längsstrich neben dem Navigationsbalken

2. IE jedoch zeigt nun die Kopf und die Verzeichnisseite richtig an, aber die jeweilige Hauptseite stellt er deutlich nach unten verschoben da. Komischerweise macht dieser Browser das bei allen Links außer beim Link "gyros-pedido.php"

3. Zusätzlich zeigt iE ebenfalls diesen Längsstrich links neben dem Verzeichnis da und oben rechts im Kopf macht der den Link "Recomende esta pagina a um amigo" dreizeilig anstatt zweizeilig.

Wäre schön, wenn Du mir nun, nachdem das andere Hickhack behoben ist, zeigen könntest, was hier im css script noch im Argen ist.

Danke im voraus für Deine Bemühungen

22.10.2011 01:05

8 Jörg Kruse

oben rechts im Kopf macht der den Link "Recomende esta pagina a um amigo" dreizeilig anstatt zweizeilig.

Die Browser berechnen die Breiten der Tabellenzellen anscheinend unterschiedlich, so dass im Falle des IE die letzte Tabellenzelle enger ist. Ich würde die Breiten nicht in Prozent sondern in Pixel angeben, so dass für die Browser diesbezüglich kein Ermessensspielraum gegeben ist.

Die anderen Darstellungsprobleme kann ich so direkt nicht nachvollziehen. Mit welchen Browser-Versionen treten diese denn auf und bei welchen Bildschirmauflösungen?

Noch ein Nachtrag:
Das HTML deiner Seite entspricht in etwa dem, was vor zehn Jahren aus der Mode kam - und zehn Jahre sind bei der rasanten Entwicklung des Webs eine lange Zeit. Heutzutage werden keine Layout-Tabellen mehr verwendet und durchgehend mit CSS gearbeitet statt mit HTML-Attributen wie font. Der Code ist nach heutigen Maßstäben deswegen auch etwas schwierig zu analysieren bezüglich Darstellungsfehler ;)

Edit:

Zusätzlich zeigt iE ebenfalls diesen Längsstrich links neben dem Verzeichnis da

Meinst du die gepunktete Linie links am Rande der Seite?

22.10.2011 20:52 | geändert: 22.10.2011 20:57

9 Käptn Blaubär

Hallo (und Entschuldigung, daß ich mich einmische).

Ich habe mir die Seite mit Opera 11.10 angesehen (Auflösung 1024 * 768 px). Bei Skalierung 100% wird die Navi links angezeigt, der Text ist nach unten verschoben. Bei Skalierung 90% und 80% rutscht der Text dann neben die Navi. Bei Skalierung 70% erscheint die Navi dann rechts (!) und der Text ist wieder nach unten verschoben.

Für das font-Element unterhalb von "Bemvindo" errechnet Opera eine Breite von 12.202px (Wert ändert sich mit anderer Skalierung), für das untergeordnete font-Element, in dem der eigentliche Text liegt ("O que queremos dizer com Gyros? ..."), errechnet Opera eine Breite von 9.884px (Wert ändert sich mit anderer Skalierung). Das scheint für den Browser ganz schwere Kost zu sein.

Ich schreibe hier nur ganz selten und bin mit Jörg weder verwandt noch verschwägert. Deswegen möge mir folgender unkonventioneller Rat gestattet sein: Wirf Dein "altes Programm mit dem Namen HotMetal" weg (es erzeugt gräßlichen HTML-Code). Verwende stattdessen dieses Beispiel als Muster-Vorlage und passe es an Deine Bedürfnisse an:
http://www.css4you.de/wslayout1/ex0008.html

Das Beispiel ist hier verlinkt (auf der Seite unten, Nr. 7): http://www.css4you.de/wslayout1/ . Dort gibt es auch weitere Hinweise.

22.10.2011 22:03