FF <-> IE: Der Strich ist bei einem höher als beim anderen

Mr. B

Servus!

Ich soll für meinen Vater eine einfache Homepage machen. Da das für seine Firma ist, soll das natürlich ordentlich werden, sprich der Strich muss genau durch den Punkt gehen. Jetzt guckt euch mal http://www.obertertia-drei.de/home.htm mit dem Firefox und mit dem Internet Explorer an. Momentan ist es so eingestellt, dass der FF es richtig anzeigt. Beim IE ist der Strich niedriger. Woran liegt das bitte? Das ist doch so bekloppt... die beiden Browser müssen doch an der gleichen Stelle mit dem Pixelzählen beginnen?!

Weiß jemand, wie man das möglichst ohne viel Aufwand berichtigen kann?

Mr. B

BTW: Kritik an meinem HTML-Stil ist erwünscht (bin Laie).

Hallo,

alles, was mit margin, padding oder border zu tun hat, wird sehr kompliziert, wenn du dich auf die Standardwerte der einzelnen Browser verlässt. Die beste Methode ist, erst einmal alles global auf 0px zu setzen:

*	{
	margin: 0px;
	padding: 0px;
	border: 0px;
}

Dann erspar dir noch das umgerechnete und umgebogene margin-left: 147px; Das ist ein sehr schräger Wert, der eigentlich nur durch verschiedene Umstände zustande kommt, die du irgendwann nicht mehr überblickst.

Das ganze könnte dann z.B. wie folgt aussehen (sieht bei mir in Firefox 2, IE 7 und Opera 9.5 Nightly gleicharmaßen richtig aus):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
        <style type="text/css">
			*	{
				margin: 0px;
				padding: 0px;
				border: 0px;
			}
        </style>
	</head>
	<body style="margin:20px; padding:0px">
		<span style="position:fixed;margin-left:145px;margin-top:140px">
			<img src="1.gif">
		</span>
		<table style="border-collapse:collapse">
			<tr height="150">
				<td width="150" align="center" style="border-right: 1px solid black;
border-bottom: 1px solid black">
					<img src="logo_dic.gif">
				</td>
				<td width="750">ss</td>
			</tr>
			<tr height="550">
				<td width="150"></td>
				<td width="750" style="border-left: 1px solid black; border-top: 1px solid black"></td>
			</tr>
		</table>
	</body>
</html>

P.s. dein Stil ist nicht sehr überzeugend. Du mischt korrekte Längenangaben (width: 140px;) mit fehlerträchtigen (width="150"), verwendest wahllos mal HTML-Attribute und mal CSS, und mixt in einer Datei sogar doppelte Hochkommata bei Attributwerten mit Einfachen. Wenn das für deinen Vater eine runde Sache werden soll, solltest du dich auf einen Stil einigen und diesen konsequent durchziehen. Sonst blickt da bald absolut niemand mehr durch

Mein Vorschlag: Auf CSS konzentrieren, doppelte Anführungszeichen verwenden und Längenangaben grundsätzlich mit Einheit.

Mr. B

árn[y]ék schrieb:

Das ganze könnte dann z.B. wie folgt aussehen (sieht bei mir in Firefox 2, IE 7 und Opera 9.5 Nightly gleicharmaßen richtig aus):

bei mir sieht das immer im IE jetz noch schlimmer aus. der punkt ist irgendwo ganz anders. der FF zeigts gut an.

árn[y]ék schrieb:

Mein Vorschlag: Auf CSS konzentrieren, doppelte Anführungszeichen verwenden und Längenangaben grundsätzlich mit Einheit.

danke für den tipp

Mr. B schrieb:

bei mir sieht das immer im IE jetz noch schlimmer aus. der punkt ist irgendwo ganz anders. der FF zeigts gut an.

Gehe ich Recht in der Annahme, dass es sich um den IE6 handelt? Der 7er zeigt mir die Seite völlig korrekt an (exakt so wie auch Firefox und Opera).

Die Frage ist natürlich, ob es sich noch lohnt, den extravaganten IE6 mit seinen zig Macken und seinem maladen Boxsystem zu unterstützen. Wenn du zu dem Schluss kommst, dass es das tut, wirst du eine Menge Kraft und Zeit in Browserweichen stecken müssen

Ich persönlich habe dies aufgegeben und optimiere meinen Seiten nur noch auf die 3 Mainstreambrowser IE7, Firefox und Opera. Aber das ist jetzt natürlich Ansichts- und Orientierungssache.

Mr. B

willste mich vereimern? ich hab den 7er...

also irgendetwas stimmt hier nicht...

Mr. B

http://www.C-PlusPlus.eu/share/screen142.jpg

Da habe ich nur - um mir einen schnelleren Überblick über die Seitenstruktur zu machen - eine Tabellenspalte zusätzlich eingefärbt. Ansonsten ist der Source identisch zu dem oben von mir geposteten.

Entweder, du hast etwas bei dir noch etwas anders drin, der Browsercache spinnt, oder MS hat es geschafft, selbst bei den IE Minor Versions bzw. den Versionen für WinXP/Vista Inkompatibilitäten untereinander rein zu bekommen. Letzteres wäre mir (zumindest in dem Umfang) aber eigentlich neu :-\

Mr. B

das kann nicht sein. guck noch mal genau nach. kopier deinen quellcode noch mal komplett hier rein. ich guck noch mal nach unterschieden.

ich hab das hier auf zig browsern an 3 PCs (vista und XP, obwohl das ja eigtl. nichts zur sache tut) getestet und alle zeigen mit im IE 7 den punkt über der tabelle...

Mr. B

ich habs jetzt einfach mal mit

<span style="position:absolute;margin-left:145px;margin-top:140px">

also position: absolute probiert, das funktioniert im IE. der strich ist da nur um ein paar pixel nach unten verschoben, womit wir wieder beim anfangsproblem wären.

Mr. B

FF &lt;-&gt; IE: Der Strich ist bei einem höher als beim anderen

FF <-> IE: Der Strich ist bei einem höher als beim anderen