Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS und Forefox 2.0.0.2





Frage

Hi Habe ne super seite für den IE7 gemacht mit HTMl, PHP und nem CSs-Style sheet. öffne ich die seite im firefox grauselts mich!! Die Ebenen die ich im CSS mit px ne größe zugeordnet habe sind irgendwie größer. sprich die background.images schieben sich aus der ebene heruas und fangen neu an. Der text geht aus der ebene? help! Welchen befelh könnte firefox da wohl nicht kennen? Ich habe z.B: folgende verwednet. left, top, padding, text-align. davon isses laut css for you aber keiner. danke

Antwort 1 von DeluxeStyle

also der FireFox hält sich mehr an den CSS Standard als der IE

Daher musst du deine Frage genau anders herum stellen.
Was interpretiert der IE anders, als alle anderen Browser

Poste doch mal eine Seite

Antwort 2 von rfb

wie DeluxeStyle andeutete:
Der IE machts falsch, richtig wird deine Seite im Firefox angezeigt.
Insbesondere verrechnet sich der IE beim Bestimmen der Gesamtgröße von Blockelementen, dies könnte eine Erklärung für das von dir beschriebene Phänomen sein..

Tipp:
CSS immer erst für standardkonforme Browser wie Opera und Firefox schreiben, dann die Workarounds für den fehlerhaften und entwicklungsmäßig rückständigen IE einbauen.

Um dir weiter helfen zu können müssten wir Einblick in den Quellcode bekommen.

Antwort 3 von SilverTiger

Wahnsinn!^^ Hätte den IE für schaluer gehalten, naja ich weiß warum ich Firefox benutze. Aber ich kann erst bald ne Seite posten oder eine online stellen. Ich hau hier einfach mal meine Style rein:

body{
background-color: #AA0E03;
font-family: georgia;
font-size: 15px;
color: #FFFFFF;
line-height: 25px;
z-index: 1;
}

.bg{
background-image: url(../pics/bg.jpg);
width: 598px;
height: 480px;
left: 167px;
top: 107px;
position: absolute;
z-index: 1;
}

.text{
width: 598px;
height: 480px;
left: 167px;
top: 107px;
font-size: 16px;
font-family: gerogia;
text-align: center;
position: absolute;
border: 3px solid #FFFFFF;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
line-height: 20px;
overflow: auto;
color: #FFFFFF;
scrollbar-base-color: #D56509;
scrollbar-3dlight-color: #D56509;
scrollbar-face-color: #D56509;
scrollbar-highlight-color: #F4A72C;
scrollbar-darkshadow-color: #C56811;
scrollbar-arrow-color: #E1490D;
scrollbar-shadow-color: #E1490D;
z-index: 2;
}

.charatext{
text-align: justify;
font-size: 16px;
font-family: gerogia;
}

.menue{
width: 150px;
height: 567px;
left: 20px;
top: 20px;
position: absolute;
background-image: url(../pics/menue.jpg);
padding-left: 5px;
padding-top: 85px;
line-height: 3px;
border: 12px;
border: 3px solid #FFFFFF;
z-index: 3;
}

.menue2{
width: 150px;
height: 567px;
left: 762px;
top: 20px;
position: absolute;
background-image: url(../pics/menue2.jpg);
padding-left: 5px;
padding-top: 360px;
border: 12px;
border: 3px solid #FFFFFF;
text-align: center;
z-index: 3;
}

.news{
width: 150px;
height: 267px;
left: 762px;
top: 107px;
position: absolute;
border: 12px;
padding-left: 5px;
padding-top: 40px;
border: 3px solid #FFFFFF;
text-align: center;
scrollbar-base-color: #D56509;
scrollbar-3dlight-color: #D56509;
scrollbar-face-color: #D56509;
scrollbar-highlight-color: #F4A72C;
scrollbar-darkshadow-color: #C56811;
scrollbar-arrow-color: #E1490D;
scrollbar-shadow-color: #E1490D;
overflow: auto;
z-index: 4;
}

.headline{
font-family: georgia;
text-decoration: underline;
font-size: 25px;
color: #FFFFFF;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}


.top{
height: 90px;
width: 598px;
background-image: url(../pics/logo.jpg);
overflow: auto;
position: absolute;
left: 167px;
top: 20px;
border:
z-index: 3;
border: 3px solid #FFFFFF;
}
a.block{
display: block;
height: 50;
width: 130;
background-image: url(../pics/startoff.gif);
}

a.block:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/starton.gif);
z-index: 100;
}

a.block2{
display: block;
height: 50;
width: 130;
background-image: url(../pics/inhaltoff.gif);
z-index: 100;
}

a.block2:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/inhalton.gif);
z-index: 100;

}

a.block3{
display: block;
height: 50;
width: 130;
background-image: url(../pics/geschoff.gif);
z-index: 100;
}

a.block3:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/geschon.gif);
z-index: 100;
}

a.block4{
display: block;
height: 50;
width: 130;
background-image: url(../pics/charaoff.gif);
z-index: 100;
}

a.block4:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/charaon.gif);
z-index: 100;
}

a.block5{
display: block;
height: 50;
width: 130;
background-image: url(../pics/techoff.gif);
z-index: 100;
}

a.block5:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/techon.gif);
z-index: 100;
}

a.block6{
display: block;
height: 50;
width: 130;
background-image: url(../pics/linkoff.gif);
z-index: 100;
}

a.block6:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/linkon.gif);
z-index: 100;
}

a.block7{
display: block;
height: 50;
width: 130;
background-image: url(../pics/imoff.gif);
z-index: 100;
}

a.block7:hover{
display: block;
height: 50;
width: 130;
background-image: url(../pics/imon.gif);
z-index: 100;
}

Antwort 4 von rfb

Der W3C-CSS-Validator meldet - selbst wenn ich die Scrollbalkenfärbung rausnehme - ca. 20 CSS-Fehler.

Ohne das HTML kann ich übrigens daraus auch nix weiter lesen - mal abgesehen von o.g. Fehlern.

Antwort 5 von SilverTiger

my index.



<link rel="stylesheet" href="css/style.css" type="text/css">

<?
include ("config.php");
?>

<div class="menue">
<table>
<tr>
<td> <a href="index.php ?section=start"class=block> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=inhalt"class=block2> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=geschichte"class=block3> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=charaktere" class=block4> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=technik" class=block5> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=links" class=block6> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=impressum" class=block7> </a> </td> <br>
</tr>
</table>
</div>

<div class="bg">
</div>

<div class="news">
<u> 06.03.07: </u> <br>
Intro kurz vor der Fertigstellung. <br> <br>
<u> 28.02.07: </u> <br>
Teilsynchro fast fertig. <br> <br>
Am 23.03.07 neue Cobra 11 Folgen mit
neuem Hauptkomissar <br> <br>
Erster Release bekannt
</div>

<div class="menue2">
<?
$newDate = mktime(0,0,0, 6, 10, 2007);
$actDate = time();
$diffDate = ($newDate-$actDate);

$days = floor($diffDate / 24 / 60 / 60 );
$diffDate = $diffDate - ($days*24*60*60);
$hours = floor($diffDate / 60 / 60);
$diffDate = ($diffDate - ($hours*60*60));
$minutes = floor($diffDate/60);
$diffDate = $diffDate - ($minutes*60);
$seconds = floor($diffDate);

echo "<u> Release: </u> <br> $days Tage $hours Stunden $minutes Minuten $seconds Sekunden <br> <br>";
?>

<?
$tag = date ("d");
$monat = date ("m");
$jahr = date ("Y");
$zeit = date ("H:i:s");

echo "$tag. $monat. $jahr <br> $zeit Uhr";
?>
</div>

<div class="top">
</div>

<div class="text">
<?
//else {include ('index.php');}
if (isset ($_GET ['section']))
{
include $datei [$section];
}
else {include ('start.php');}
?>

</div>

Antwort 6 von rfb

das ist PHP - woher soll ich wissen, was für ein HTML daraus fabriziert wird?

Der Rest ist

eine Tabelle die keine tabellarische Daten enthält (benutze doch einfach zur Auflistung von Links eine Liste und Tabellen für tabellarische Daten)

und

eine DIV-Suppe gewürzt mit dem u-Element (wenn du schon CSS nutzt, warum unterstreichst du dann mit u?)

Antwort 7 von MoRe99

@ SilverTiger

Ruf deine Seite, um die es geht, doch mal lokal auf, Rechtsklick drauf, den Seitenquelltext anzeigen lassen und den dann kopieren.

Antwort 8 von SilverTiger

Das mit dem U mach ich immer so. angewohnheit. is auch ne schulseite zum lernen also ne amteru page. So ein chaos ich alde die seite bald mal hoch... also in den einzelnen seiten 8links9 ist nur der div headline angegeben und halt text, da ja eh ales in der texteben sein soll. Also denn habe ich noch ne config.php aber das hat ja nix mit den abmessungen zu tun. ACHJa my page is ja online: http://graf-von-zeppelin-schule.de/WPK/info2006/php/daniel/index.php

danke

Antwort 9 von MoRe99

Beim ersten kurzen Drüberfliegen fällt mir folgendes auf: du benutzt in deinem CSS bei .menue padding. Das interpretiert der IE falsch; Stichwort: Boxmodell. Deine Seite hat keinerlei Doctype-Deklaration; genauergesagt: die fängt noch nicht mal irgendwann mit <html> an oder hört mit </html> auf. Außerdem: kein <head>-Bereich, kein <body>-Bereich. Sprich: was dein PHP da erzeugt ist keine HTML-Seite.
Beim Versuch, deine Seite zu validieren, scheitert der Validator und liefert als Ergebnis nur das hier: document can not be checked.
Tipp: arbeite mal an deinen PHP-Dateien, damit die so werkeln, dass am Ende eine wirkliche HTML-Seite erstellt wird. Wie die auszusehen hat kannst du u. a. bei jendryschik.de oder bei SelfHTML nachlesen.

Antwort 10 von rfb

Eine nicht valide Seite wie dieser Murks hat Glück, wenn ein Browser sie überhaupt irgendwie anzeigt, aber bevor sie valide ist brauchst du im CSS nicht herumzustochern.

Antwort 11 von SilverTiger

oh stimmt.... muss ich das nur im idnex angeben oder jetzt überall?

Antwort 12 von rfb

Zitat:
muss ich das nur im idnex angeben oder jetzt überall?
welch präzise Nachfrage! Aber gut - ich rate mal du meinst die Bestandteile einer HTML-Datei, die MoRe99 aufgelistet hat.
Ja, wärst du seinem Rat gefolgt und hättest dich auf den beiden Links kundig gemacht, wüsstest du, dass all das und noch ein bisserl mehr unabdingbare Bestandteile einer jeden validen HTML-Datei sind.

Antwort 13 von SilverTiger

sry bin kein profi.. also muss ich bei jedem html teil 8also wenn php dazwischen war) neu mit html anfangen oder nur einmal oben und unten? danke

Antwort 14 von MoRe99

Zitat:
also muss ich bei jedem html teil 8also wenn php dazwischen war) neu mit html anfangen oder nur einmal oben und unten?

Du hast die Links, die ich gepostet hatte, aber schon verfolgt, oder? Und vor allem dort auch alles fein säuberlich und aufmerksam gelesen? Wenn ja, dann müsstest du bei selfHTML über das hier gestolpert sein:
Zitat:
Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kapitel Kopfdaten einer HTML-Datei notiert. Die wichtigste dieser Angaben ist der Seite Titel der HTML-Datei, markiert durch <title> bzw. </title>. Unterhalb davon folgt der Textkörper, begrenzt durch <body> bzw. </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

Übersetzt heißt das: wenn du eine Seite deiner Website anzeigst und dir den Seitenquelltext dann anschaust (und zwar von dem, was ausgeliefert wird, also von dem, was im Browser angezeigt wird), dann darf <html> nur einmal vorkommen im gesamten Quelltext dieser Seite. Genau wie </html>, <head>, </head>, <body> und </body>.

Antwort 15 von rfb

Zitat:
sry bin kein profi.. also muss ich bei jedem html teil 8also wenn php dazwischen war) neu mit html anfangen oder nur einmal oben und unten? danke
sorry, bin kein Hellseher. Was genau meinst du damit?

PHP hat damit nix zu tun - der Browser erhält kein PHP sondern HTML. Es ist dem Browser daher auch vollkomen egal wie dein PHP-Script aussieht.
Mit PHP bastelst du dir nur die HTML-Datei zusammen. Dass dabei valides HTML ensteht - darauf musst du achten.

Ich kann hier jetzt keinen Crashkurs HTML/PHP geben, aber im Netz findest du genug Anfängerkurse zum Thema.

Antwort 16 von harrrharrr

<?
include ("config.php");
?>

Als Beispiel aus deinem Quelltext:
<? -->bedeutet dass ab hier PHP beginnt
dann kommen die Anweisungen....
?> -->bedeutet dass hier PHP endet und es mit HTML weitergeht bis du wieder einen PHP Bereich mit
<?
beginnst.
Jetzt verstanden?

Gruß
harrr

Antwort 17 von SilverTiger

kay ich werde meine verbesserungen posten

Antwort 18 von SilverTiger

Anweisung überall befolgt wie hier im index:


<html>

<head> <title> Cobra-Synchro </title>

<link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

<?
include ("config.php");
?>

<div class="menue">
<table>
<tr>
<td> <a href="index.php ?section=start"class=block> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=inhalt"class=block2> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=geschichte"class=block3> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=charaktere" class=block4> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=technik" class=block5> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=links" class=block6> </a> </td> <br>
</tr>
<tr>
<td> <a href="index.php ?section=impressum" class=block7> </a> </td> <br>
</tr>
</table>
</div>

<div class="bg">
</div>

<div class="news">
<u> 06.03.07: </u> <br>
Intro kurz vor der Fertigstellung. <br> <br>
<u> 28.02.07: </u> <br>
Teilsynchro fast fertig. <br> <br>
Am 23.03.07 neue Cobra 11 Folgen mit
neuem Hauptkomissar <br> <br>
Erster Release bekannt
</div>

<div class="menue2">
<?
$newDate = mktime(0,0,0, 6, 10, 2007);
$actDate = time();
$diffDate = ($newDate-$actDate);

$days = floor($diffDate / 24 / 60 / 60 );
$diffDate = $diffDate - ($days*24*60*60);
$hours = floor($diffDate / 60 / 60);
$diffDate = ($diffDate - ($hours*60*60));
$minutes = floor($diffDate/60);
$diffDate = $diffDate - ($minutes*60);
$seconds = floor($diffDate);

echo "<u> Release: </u> <br> $days Tage $hours Stunden $minutes Minuten $seconds Sekunden <br> <br>";
?>

<?
$tag = date ("d");
$monat = date ("m");
$jahr = date ("Y");
$zeit = date ("H:i:s");

echo "$tag. $monat. $jahr <br> $zeit Uhr";
?>
</div>

<div class="top">
</div>

<div class="text">
<?
//else {include ('index.php');}
if (isset ($_GET ['section']))
{
include $datei [$section];
}
else {include ('start.php');}
?>

</div>

</body>

</html>

Antwort 19 von SilverTiger

Meine kumpel haben alle kein html head und so und fast alles gleich bei denen geht es im FF! why bei mir nicht?

Antwort 20 von harrrharrr

Dann verlink doch mal deine Seite und die deiner Kumpels hier rein, vielleicht kriegst du dann ne Antwort.

Gruß
harrr

ich muss schon sagen, in deinem Quelltext steht wirklich viel sinnloses Geschreibsel....

Antwort 21 von SilverTiger

MEINE:

http://graf-von-zeppelin-schule.de/WPK/info2006/php/daniel/index.php

KUMEPLS:

http://graf-von-zeppelin-schule.de/WPK/info2006/php/tobiask/index.php

http://graf-von-zeppelin-schule.de/WPK/info2006/php/dennis/index.php

Antwort 22 von SilverTiger

http://graf-von-zeppelin-schule.de/WPK/info2006/php/dennis/index.php

http://graf-von-zeppelin-schule.de/WPK/info2006/php/tobiask/index.php

MEINE:


http://graf-von-zeppelin-schule.de/WPK/info2006/php/daniel/index.php

Antwort 23 von MoRe99

Zitat:
fast alles gleich

Dann wäre es nett zu erfahren, was das wenige ist, was bei denen anders ist als bei dir. Da könnte die Lösung des Problems drin verborgen sein.

Auch wenn das immer noch nichts daran ändert, dass dein Quellcode ... na ja ... nicht wirklich gut ist. ;-)

Antwort 24 von rfb

Zitat:
Meine kumpel haben alle kein html head und so
da haben sie beim Anzeigeglücksspiel eben irgendwie mehr Glück gehabt.

Da deren HTML teilweise noch schlimmer ist als deins lässt sich sonst darüber nix aussagen.

Sollte das Erstellen von Webseiten bei euch Unterrichtsbestandteil sein würde ich sagen "Lernziel verfehlt - nochmal von vorne!"

Antwort 25 von SilverTiger

Na doll! Daran liegt es nicht mal Leute. Meine Lehrerin meinte, dass Firefox immer 10px draufrechnet und der IE nicht. Daraus schließe ich das nicht der IE immer schuld ist^^.

Antwort 26 von rfb

Zitat:
Meine Lehrerin meinte, dass Firefox immer 10px draufrechnet und der IE nicht
das ist einfach Quatsch!
Wie oben schon mehrfach erwähnt macht der IE unter bestimmten Bedingungen - zB wenn der HTML-Quellcode nicht valide ist - generell einen Fehler in der Berechnung der Gesamtausmaße von Blockelementen (
Inhalt+padding+border+margin=gesamt
diese simple Addition haben die IE-Programmierer mal vergeigt, aber in neueren IEs und bei validem Code klappts inzwischen).
Was stimmt ist, dass jeder Browser so seine Tücken hat, die aber nur bei bestimmten Konstellationen auftreten, keineswegs "generell".

Hat diese Lehrerin euch eure Kenntnisse beigebracht?

um es noch mal zu betonen, damit du es vielleicht noch mal lernst:

Wenn das HTML nicht valide ist ist die Darstellung im Browser nicht vorhersagbar.
Um dir ernsthaft helfen zu können musst du als Vorleistung dein HTML von Fehlern befreien.

Kennst du das Märchen von Gold- und Pechmarie (Frau Holle)?
Goldmariechen war so dämlich in den Brunnen zu hüpfen, hatte aber Glück und kam reich wieder heraus. Pechmariechen war so dämlich hinterherzuhüpfen und hatte eben Pech. Eine sinnvolle Vorgehensweise ist das "in den Brunnen springen" trotz vereinzelter Glücksfälle sicherlich nicht.

Deine Kumpels hatten wohl Glück, du Pech. Mit verständigem Vorgehen und Reproduzierbarkeit der Ergebnisse hat das aber nix zu tun.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: