[HTML] IE / Firefox - Layout sieht anders aus...

Pat · 27. Oktober 2004

Hi

Ich habe die letzten paar Tage an einer kleinen Clanpage programmiert mit HTML, CSS und PHP. Die Page hab ich immer mit meinem Standartbrowser Firefox 1.0PR angeschaut.
Nun... heute hab ich mal einen Blick auf die Page mit dem IE geworfen - und mir sind fast die Augen rausgefallen vor Schreck!

Beim Internet Explorer springt zusätzlich zum fehlenden hellgrauen Hintergrund auf der rechten Seite "Letzte Clanwars" wild herum, jenachdem wieviel "Inhalt" im Hauptteil der Page links ist. Im Firefox bleibt der Teil rechts schön immer am gleichen Platz...

Ich hab nun die letzten 2 Stunden erfolglos versucht, die Page auch im IE hinzukriegen...
Da ja immernoch ~90% den IE benutzen, muss die Page ja auch im IE gut aussehen!

Ich stelle gerne den Sourcecode vom CSS oder index.php zur Verfügung... Page kann man sich hier ansehen (provisorisch): http://hsf.speedsell.ch

Danke für jede Hilfe.

Habe mir mal erlaubt deinen Post zu editieren und die Grafiken anzuhängen wir wollen ja Rücksicht auf die Leute mit weniger Bandbreite nehmen.
Danke für dein Verständnis!

Gruß The Prophet

PuppetMaster · 27. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Du machst ganz oben unter <body> ne table auf, die du nie wieder schließt. Fix das mal bitte.

CrazyWolf · 27. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhsf.speedsell.ch%2Fstylesheet.css&warning=1&profile=css2&usermedium=allwenn das css validiert wird, sagt er z.B. dass lightgrey kein gültiger Farbwert ist. Am besten du nimmst da Hexwerte.

auch bei margin - Angaben würde ich generell immer px angaben machen.

The Prophet · 27. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Hallo,

zu deinem Problem:
Beim HTML schreiben sollte man sich grundsätzlich an die geltenden Standards halten.
Ein Anhaltspunkt dafür findest du beim W3C Konsortium
Html
http://validator.w3.org/check?uri=http://hsf.speedsell.ch/
CSS
http://jigsaw.w3.org/css-validator/...ell.ch/&warning=1&profile=css2&usermedium=all

Die Fehler solltest du zunächst korrigieren, dann schauen wir mal weiter. Meistens ist das Problem dann schon gelöst.

/edit
Ich werde langsam

Pat · 27. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

@PuppetMaster: Habe ich gefixt.

@CrazyWolf: Ich bin Opfer einer kleinen Illusion geworden, da ich angenommen habe, alles was der Firefox korrekt anzeigt (->lightgrey), sei somit auch HTML Standart! So kann man sich täuschen *g*
Problem behoben, ebenfalls habe ich bei den margins "px" hinzugefügt und darkblue auch in #0000B8 geändert. Rest wie z.B. font-family werde ich morgen in Angriff nehmen.

@The Prophet: Char-encoding, doctype und die fehlenden "alt" Tags bei den <img>'s werde ich ebenfalls morgen hinzufügen. Ich benutze ja selbst die "Web Developer" Toolbar mit den Links zu den Validator's... dass ich da nicht von selbst draufgekommen bin

Bleibt aber das letzte Problem bestehen, dass sich der rechte Teil der Page im IE je nach dem Inhalt der Main-Page mal mehr rechts und mal mehr links befindet. Im Firefox bleibt es ja starr an einer Stelle. Ich denke nicht, dass das mit den obengenannten Dingen zu tun hat, sondern halt eher was mit dem Table-Layout.
In der index.php include()'e ich jenachdem was in der POST-Variable "?page=" steht ja immer eine andere Datei.

Trotzdem werde ich das morgen dann in Angriff nehmen! Vielleicht hilfts ja doch.

Danke für die superschnelle Hilfe an alle... man lernt selbst bei etwas so "simplen" wie HTML nie aus

Oh und danke noch fürs Anhängen und verkleinern der Bilder... 200kb sind wahrlich ein bisschen viel für Nicht-Breitband-Benutzer

cR@zY.EnGi.GeR · 27. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Das liegt daran, dass im ersten Table noch width="100%" fehlt. Dann klappts auch mit dem IE.

Ich hab immer das genaue gegenteilige Problem, bei mir sieht alles beim Firefox komplett anders aus. Muss dann immer alles an den Firefox anpassen.

Saschlong · 28. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Hoi, willst du feste größen haben? weil dann solltest du per css formatierte <div>'s nehmen, da kannst du dann alles in container packen...

und ein tip noch:
der IE macht um jeden mist ein automatisches margin rum,
firefox nicht... also nicht wundern

aso: die mühe mit der groß- und kleinschreibung kannste dir im html-quelltext sparen, ist ja kein java oder so...

Pat · 28. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Hier ist ja ne richtige Diskussion über die Browser entbrannt, wärend ich weg war...

Aber zurück zu meinem Problem. width="100%" hat mir leider auch nicht geholfen! Im Gegenteil - Der rechte Teil der Page ist nun im Firefox immer ganz rechts aussen, also viel zu weit als er eigentlich sein sollte. Vorher war's schön parallel zum Logo oben (siehe meine Screenshots im 1. Post). Im IE hat sich nichts verändert.

Ich poste hier mal den Code meiner index.php, vielleicht hilft das ja weiter:

PHP:

<?
if ($page == "") {
	$page = "home.php";
}

?>
<html>
<head>
	<title>Headshot Factory - A swiss Counterstrike Clan</title>
	<META NAME="resource-type" CONTENT="document">
	<META NAME="description" CONTENT="Headshot Factory - A swiss Counterstrike Clan">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<table width="100%" border="0" class="main">
<tr>
	<!-- Top -->
	<td colspan="2" class="main"><? include 'top.php' ?></td>
</tr>
<tr>
	<td valign="top" class="main"><!-- Main -->
		<table cellpadding="10" border="0" width="100%"><tr><td class="main"><? include "$page" ?></td></tr></table>
	</td>
	<td width="200px" valign="top" class="main"><!-- Right -->
		<table cellpadding="10" border="0" width="100%"><tr><td class="main"><? include 'right.php' ?></td></tr></table>
	</td>
</tr>
</table>
</body>
</html>

Noch ne Frage zu Layouts ohne table's: auf gmx.de wurden statt <table>'s einfach ein paar Dutzend <div>'s benutzt mit absoluten Positionsangaben! Also ehrlich gesagt bezweifle ich irgendwie, dass das die schlauere und kompatiblere Lösung ist, und das ist ja obermühsam zum editieren!

Oder ist mit table-losen Design's nochmal was ganz anderes gemeint?

Pat · 28. Oktober 2004

Re: IE / Firefox - Layout sieht anders aus...

Habe grad noch etwas entdeckt: Der Login funktioniert im IE nicht... mit Firefox gehts aber. Ihr könnts ja mal mit Nickname "resume", Passwort "gg"!

cR@zY.EnGi.GeR · 28. Oktober 2004

So müsste es gehen:

Code:

<? 
if ($page == "") { 
    $page = "home.php"; 
} 

?> 
<html> 
<head> 
    <title>Headshot Factory - A swiss Counterstrike Clan</title> 
    <META NAME="resource-type" CONTENT="document"> 
    <META NAME="description" CONTENT="Headshot Factory - A swiss Counterstrike Clan"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 
<body> 
<table width="100%" border="0" class="main"> 
<tr> 
    <!-- Top --> 
    <td class="main"><? include 'top.php' ?></td> 
</tr> 
</table>
<table width="100%" border="0" class="main"> 
<tr> 
    <td valign="top" class="main"><!-- Main --> 
        <table cellpadding="10" border="0" width="100%"><tr><td class="main"><? include "$page" ?></td></tr></table> 
    </td> 
    <td width="200px" valign="top" class="main"><!-- Right --> 
        <table cellpadding="10" border="0" width="100%"><tr><td class="main"><? include 'right.php' ?></td></tr></table> 
    </td> 
</tr> 
</table> 
</body> 
</html>

Vorher gings bei mir deshalb, weil ich deine Seite lokal gespeichert hatte und da die Bilder keine absolute Angabe haben, hat er bei mir keine Bilder angezeigt und ohne Bilder hats geklappt, mit Bilder dann net. Deshalb musste noch die paar Änderungen machen.

Siberian..Husky · 28. Oktober 2004

dein php ist allerdings verdammt gefährlich! du darfst niemals direkt den string nehmen den du vom benutzer bekommst(in deinem fall $page). solche strings müssen immer erstmal auf php code überorüft werden, da ein angreifer ansonsten ganz leicht eigenen code in dein script einschleusen kann. das ist aber bei dir noch nichtmal nötig. er kann ja includieren was er will. und da der webserver in der regel mehr rechte hat als z.b. ein anonymer ftp login kann das verdammt gefährlich werden. du solltest dir also namen für deine include dateien überlegen und ein array damit anlegen und nurnoch den namen an das script weitergeben. fehlt der name im array wird nichts includiert, wenn er da ist wird die datei includiert die eben zu diesem namen gehört.

du solltest dich auch einmal näher über script injection informieren.

Pat · 28. Oktober 2004

cR@zY.EnGi.GeR schrieb:
So müsste es gehen:

Danke, du scheinst ja echt ne riesen Ahnung von Webdesign zu haben

Ich habe deine Änderungen übernommen - danach war der rechte Teil der Page ganz am rechten Rand, was bei einer Auflösung von 1024x768 auch der rechten Kante des Logos entspricht. Doch auf 1280x... war es leider immernoch ganz am rechten Rand (also nicht mehr bündig zum Logo).

Code:

<table width="1024px" border="0" class="main">

bei der 2. Tabelle hat das Problem dann im Firefox wie auch im IE gelöst

Bei 800x600 muss man dann halt seitwärts scrollen... aber ich denk mal naja die 1% Besucher die noch 800x600 haben... naja

Klappt jetzt jedenfalls perfekt.. danke nochmals an alle

Und hat noch jemand eine Ahnung, wieso das Einloggen beim IE nicht geht? Beim Firefox funzt es wie gewollt... ist alles in PHP gemacht, warum zeigt also der IE "Login fehlgeschlagen" an ? Gleicher Nick/PW mit Firefox geht...

login.php

PHP:

<?php
$conn=odbc_connect('headshotfactory','','');
if (!$conn) {
	exit("Connection to db failed: " . $conn);
}

$sql="SELECT * FROM members WHERE nickname = '" . $nickname . "' AND password = '" . $password . "'";
$rs=odbc_exec($conn,$sql);

if (!$rs) {
	exit("SQL Error");
}

if(odbc_fetch_row($rs) == 1 ) {
	$_SESSION['loggedin'] = "$nickname";
	echo "<meta http-equiv=\"refresh\" contents=\"0;URL=index.php?page=home.php\">";
} else {
	echo "Login fehlgeschlagen! Nickname oder Passwort falsch.";
}

odbc_close($conn);
?>

Oben an der index.php steht noch

Code:

session_start();
session_register("loggedin");

um die Sessions zu aktivieren. Müsste doch richtig sein?

@Siberian..Husky: Danke, werd ich tun! Ist mein erstes richtiges PHP Projekt. Hab vorhin nur ASP geproggt... aber mit VBScript ist man da echt zu limitiert

PuppetMaster · 29. Oktober 2004

Warum schreibst du nicht

$sql="SELECT * FROM members WHERE nickname = '$nickname' AND password = '$password'";

?

Siberian..Husky · 29. Oktober 2004

weil in SQL strings mit einem einfachen ' einzuschließen sind, soweit ich mich richtig erinnere. also stimmt das sql eigentlich in der hinsicht schon. allerdings würde ich auch für die php strings ' verwenden da die schneller sein sollen(da man dort eben nicht einfach variablen nutzen kann, und die somit nicht extra geparst werden müssen). zum einschließen der sql strings nimmt man dann wohl ´(das ding neben dem ? auf der tastatur

). zumindest macht das auch der phpmyadmin so.

cR@zY.EnGi.GeR · 29. Oktober 2004

Du kannst es so
$sql="SELECT * FROM members WHERE nickname = '$nickname' AND password = '$password'";

oder so
$sql="SELECT * FROM members WHERE nickname = \"$nickname\" AND password = \"$password\"";
schreiben.

Allerdings würde ich nicht * verwenden, denn wenn du in der Datenbank bei den Spalten was änderst, funktioniert das nimmer.
Also z.B. lieber so:
$sql="SELECT membersID, nickname FROM members WHERE nickname = \"$nickname\" AND password = \"$password\"";

Pat · 29. Oktober 2004

Das kann ja wohl nicht sein... was hat das bitte mit dem verwendeten Browser zu tun?

http://hsf.speedsell.ch/login.php?nickname=resume&password=gg

Diese Nick/PW kombination existiert natürich in der DB. Wieso geht das mit dem Firefox, nicht aber mit dem IE? (wenn ne leere Seite kommt dann hatt's geklappt).

Hab jetzt auch in der login.php:

PHP:

$sql="SELECT * FROM members WHERE nickname = '$nickname' AND password = '$password'";

Rest des Codes ist unverändert und steht oben...

Sowas hab ich echt noch nie erlebt

Siberian..Husky · 29. Oktober 2004

hast du den schonmal veruscht das script zu debuggen? kommen $nickname und password überhaubt beim server an?

EDIT: also der link da oben funktioniert in meinem IE....

cR@zY.EnGi.GeR · 29. Oktober 2004

Jep, funtzt bei mir auch im IE.

PuppetMaster · 29. Oktober 2004

Pat schrieb:
WHERE nickname = '" . $nickname . "' AND password = '" . $password . "'";

Vielleicht wegen den Leerzeichen zwischen Punkt und Variable...

Siberian..Husky · 29. Oktober 2004

ich hab da auch immer leerzeichen, funktioniert ohne probleme und hat mit dem browser ja auch nix zu tun

.

[HTML] IE / Firefox - Layout sieht anders aus...

Commander

Anhänge

Admiral Pro

Lt. Commander

Rear Admiral

Commander

Lt. Commander

Lt. Junior Grade

Commander

Commander

Lt. Commander

Lt. Commander

Commander

Admiral Pro

Lt. Commander

Lt. Commander

Commander

Lt. Commander

Lt. Commander

Admiral Pro

Lt. Commander

Ähnliche Themen