Inhalte verschoben im Firefox - Woran kann's liegen?

kreateve

Hallo,

habe ein Problem. Und zwar werden die Inhalte einer Webseite die ich gerade erstellt habe, im Firefox total verschoben dargestellt im Gegensatz zum Internet Explorer, wo alles so sitzt wie's sein soll...
Kenne mich leider mit firefox/mozilla überhaupt nicht aus. Habe die Texte im Dreamweaver hauptsächlich über eine Tabelle und CSS definiert und positioniert. Die Zeilenabstände und Schriftgröße stimmen auch so weit, allerdings scheint der Haken bei den leeren Tabellenzellen zu liegen!!! Im Firefox scheinen die leeren Tabellenzeilen (obwohl die höhe festgelegt wurde) plötzlich eine andere Höhe zu bekommen....
Hier mal ein ganz schlimmer Test-Link, da ist wirklich alles verschoben: http://www.digitalroots.de/products/test/index.html
Genauso ist es mit der Hauptnavigation, die in einen anderen Frame geladen wird: sie sollte eigentlich ganz oben ganz links angezeigt werden, aber sie verrutscht komischerweise um ca. "eine Zeile" nach unten, so dass sie nicht mehr ganz im Frame zu sehen ist...
Wie kann ich das Problem lösen? Muß ich die festgelegten Höhen für leere Zellen mit px oder prozent festlegen? Oder muß ich was anderes tun, um meine gewünschten Abstände überall zu bekommen?

Danke im Voraus für eure Hilfe

t|f

Also mir fallen da zwei Dinge auf, die Ursache sein könnten ...

1. Das p-Tag im Code könnte einen Absatz erzeugen. Das kann im Grunde komplett weg ...

Zitat


<a href="unternehmen.html" target="mainFrame" onmouseover="MM_swapImage('Image1','','Bilder/hauptmenue_over_03.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_03.gif" name="Image1" width="101" height="23" border="0" id="Image1" /></a><a href="spektrum.html" target="mainFrame" onmouseover="MM_swapImage('Image2','','Bilder/hauptmenue_over_04.gif',0)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_04.gif" name="Image2" width="76" height="23" border="0" id="Image2" /></a><a href="impressionen.html" target="mainFrame" onmouseover="MM_swapImage('Image3','','Bilder/hauptmenue_over_05.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_05.gif" name="Image3" width="104" height="23" border="0" id="Image3" /></a><a href="team.html" target="mainFrame" onmouseover="MM_swapImage('Image4','','Bilder/hauptmenue_over_06.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_06.gif" name="Image4" width="47" height="23" border="0" id="Image4" /></a><a href="referenzen.html" target="mainFrame" onmouseover="MM_swapImage('Image5','','Bilder/hauptmenue_over_07.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_07.gif" name="Image5" width="89" height="23" border="0" id="Image5" /></a><a href="kontakt.html" target="mainFrame" onmouseover="MM_swapImage('Image6','','Bilder/hauptmenue_over_08.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_08.gif" name="Image6" width="69" height="23" border="0" id="Image6" /></a><a href="anfahrt.html" target="mainFrame" onmouseover="MM_swapImage('Image7','','Bilder/hauptmenue_over_09.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Bilder/hauptmenue_09.gif" name="Image7" width="69" height="23" border="0" id="Image7" /></a>

2. Der W3-HTML-Validator zeigt ein paar Fehler für dein Frame, wer weiß, obs vielleicht daran liegt. Gerade was HTML-Standards angeht ist das ja oft ein Problem, was unterschiedliche Ansichten zwischen Firefox und Internet Explorer angeht ...

kreateve

also das mit dem war schon mal ein guter hinweis.
Aber geholfen hat das leider nicht. Habs gelöscht, und es ist immer noch so wie vorher...
An den Fehlern die angezeigt werden kann die verschiebung doch aber eigentlich auch nicht liegen, oder? Inwiefern sollte sich das auf die Zellenhöhen auswirken? Es betrifft anscheinend wirklich NUR die leeren Zellen, sobald z.B. ein Bild drin ist, ist das Problem weg...

brain

Ohne mir jetzt deinen Quelltext genauer angeschaut zu haben (sorry is schon spät) möchte ich dazu folgende Dinge anmerken:

1) Wenn die Zellen eh leer sind, wieso machst du sie dann?
2) Leere Zellen, wo auch möglicherweise ein Umbruch im Quelltext ist oder so, werden manchmal so interpretiert, als wären sie mit einem Leerzeichen der definierten Schriftgröße definiert. Deshalb ist eine solche Zelle mindestens so hoch wie der Wert des CSS-Attributs "line-height" angibt. Versuch mal das und die Schriftgröße auf 0 zu setzen für die Leerzellen, vielleicht hilft das was.
3) Das ganze Problem kann man mit Div's umgehen, die, wenn man ein bisschen gelernt hat damit umzugehen, weniger Probleme verursachen als Tabellen und außerdem userfreundlicher sind.

kreateve

Hallo,

habe deine hinweise mal überprüft, aber egal was ich mache, es hat irgendwie überhaupt keine auswirkung auf diese verschiebung!
Ich weiß langsam auch nicht mehr was ich noch machen soll....
So sieht zum Beispiel so eine leere Zelle aus:

Da ist also kein Umbruch oder so drin.
Und warum ich überhaupt leere Zellen mache? weil ich mich mit div-tags leider nicht auskenne und nicht weiß, wie ich sonst Abstände genau definieren kann? Hatte damit bis jetzt auch noch nie Probleme....
:cry:

Kann es sein, daß ich irgendwas ganz grundsätzliches in den Code reinschreiben muß, damit firefox das script genauso interpretiert wie es der explorer tut?

HILFE!

brain

Für einzelne td kannst du keine Höhe festlegen, nur für die komplette Zeile (also das tr).

kreateve

es betrifft ja auch die komplette zeile.... ändert ja nix am problem... :cry:

brain

Ja wenn es die komplette Zeile betrifft wieso schreibst du es dann nicht so??? so etwas wie <td height="14"> ist schlicht und einfach verboten bzw. funktioniert nicht! Schreib doch einfach das height="14" mit in den <tr>-Tag rein.

kreateve

also nochmal: ich habe eine zeile, die besteht aus zwei spalten. wenn ich beide spalten in der höhe gleiche definiere, dann betrifft das ja die ganze zeile. Und es steht logischerweise auch beides innerhalb des <tr>.

Ich habs zum spaß mal probiert die beiden Spalten zu einer zuasmmen zu fassen, aber das ändert immer noch nichts am Ergebnis!!!!!!!!! :cry:

Und wieso interpretiert der Explorer denn alles richtig???

MartinH

Hallo kreateve,

dein Hauptproblem mit der Höhe einer leeren Zeile kann ich nicht nachvollziehen, weil mir andere Fehler viel eher ins Auge fallen:

1) Die Navigation oben wird nur zur Hälfte angezeigt.
Man könnte den Frame vergrößern oder den Absatz weglassen oder festlegen, dass oberhalb von Absätzen kein Abstand gemacht wird.
Der Unterschied zwischen IE und Fx liegt hier wohl im Abstand oberhalb des Absatzes.

2) In der zweiten Zeile fehlen die Zwischenräume.
Die Trennbilder "Bilder/spacer_untermenue.gif" sind im Testverzeichnis nicht vorhanden.

3) "Teilneh-mer"

4) Grauer Kasten am linken Rand.
Da soll wohl Flash drin laufen(?)

Der Seitenaufbau ist viel zu kompliziert:
Es werden Frames verwendet.
Es wird mit "position: absolute" gearbeitet.
Das CSS verteilt sich über mehrere Dateien.
Um den Hauptteil liegt eine Tabelle mit einer Zelle.

Das macht es extrem schwer zu helfen.

Martin

kreateve

ja, das die bilder fehlen, weiß ich. das ist ja auch nur eine testseite. und das die bilder fehlen spielt bei meinem problem keine rolle, deshalb hab ich drauf verzichtet die links zu aktualisieren....
das mit der navigation hab ich inzwischen rausgefunden, das klappt jetzt. das lag an dem .
Aber das mit den zeilen steht jetzt leider immer noch im Raum... :cry:

kreateve

ps: das "teilneh-mer" ist auch ein opfer der verschiebung -> betrifft also anscheinend nicht nur die zeilenhöhe sondern auch die spaltenbreite...

MartinH

Ich habe mal die Tabellenzellen eingefärbt (mit der Erweiterung Web Developer):[Blockierte Grafik: http://www.hallofreun.de/temp/eve.png]
Ist es die Höhe der Zeile unter KONFERENZEN, die dich stört?

kreateve

das ist interessant - so wie du das eingefärbt hast liegt es an der zeile wo "konferenzen" drin steht....
werde das mal überprüfen, ob da irgendwas ist was nicht so sein soll...

MartinH

"KONFERENZEN" steht in einem Absatz ...
Absätze haben Abstände nach oben und unten. Wenn man diese Abstände nicht angibt, werden default-Abstände genommen, die in Fx und IE unterschiedlich sind.

kreateve

Also... so sieht diese Zeile bei mir aus - habe leider keinen Fehler entdecken können.... :o(
Die Höhe habe ich testweise mal geändert, hat auch nix genutzt... Ich glaube langsam, Firefox mag mich einfach nicht...

<tr>
<td width="19" height="16"></td>
<td colspan="4" height="16" class="headline" valign="middle">KONFERENZEN</td>
</tr>

kreateve

Zitat von MartinH

"KONFERENZEN" steht in einem Absatz ...
Absätze haben Abstände nach oben und unten. Wenn man diese Abstände nicht angibt, werden default-Abstände genommen, die in Fx und IE unterschiedlcih sind.

und das heißt wie genau müßte ich das jetzt da hinschreiben?

MartinH

In meiner CSS-Datei habe ich:

Code

p        { /* Absatz               */
            margin-top:00px; margin-bottom:00px;
          }

In deinem Fall würde das auch gut zur class="headline" passen, also da, wo headline definiert wird http://www.digitalroots.de/Products/test/text.css auch noch margin-top:0; margin-bottom:0; angeben.

Code

.headline {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: bold;
      margin-top:0; 
      margin-bottom:0;
      }

oder wie bei mir p formatieren, ganz nach Geschmack.

kreateve

Es klappt!!!! MartinH, du bist ein Engel!!!!
Jetzt wird alles gut!!!

Ich hab jetzt nur noch ein einziges kleines Problem - nämlich die Umbrüche....
Du weiß nicht zufällig auch dafür eine Lösung?
Im Explorer sind die Umbrüche perfekt, aber im Firefix verschieben sie sich nachwievor noch...?

brain

Mit "in den <tr>-Tag reinschreiben" meinte ich so etwas wie <tr height="14">. Aber wenn es jetzt auch so funktioniert...