Zeilenhöhe durch Umbruch zwischen <td></td>-Tags zu hoch

[Jürgen]

Hallo!

ich habe eine Navigationsleiste, die ausschließlich aus Grafiken besteht und 25 Pixel hoch sein soll. Damit das leichter nachvollziehbar ist, habe ich hier eine vereinfachte Testseite:

http://www.mittelmeier.at/test.htm

Die höhere Zelle kommt von dieser Tabellenzelle:

PHP-Code:

<td><img name="produkte" src="bilder/produkte_f3.jpg" width="101" height="25" border="0" alt="" />
</td> 


Problem ist folgendes: durch einen Zeilenumbruch im Quellcode nach einer der Navigationsgrafiken wird in Mozilla und IE die Zeilenhöhe der Navigationsleiste um 2 oder 3 Pixel zu hoch angezeigt. Der Zeilenumbruch ist durch optionale Bereiche der dahinterliegenden DW-Templates bedingt, das tut aber in dem Fall nichts zur Sache - ich will ihn nur nicht manuell herauslöschen, da mir sonst die visuelle Bearbeitung flöten geht.

Ich könnte nun per CSS die Zeilenhöhe und Fontgröße auf 0 Pixel setzen, dann läuft es in Mozilla und IE6. Aber ältere Browser, auch IE5.5 stellen trotzdem die Zeile zu hoch dar.

Was ich mich frage ist, warum der Zeilenumbruch vom Browser überhaupt interpretiert wird, da es ja kein <br> ist?

Weiß jemand eine Lösung dafür, die auch in älteren Browsern funktioniert?

Gruß, Jürgen

[AnnaStesia]

Hallo Jürgen,

hm, schwierige Sache, ein überflüssiger Zeilenumbruch wird in den meisten Browsern nun mal leider als Leerzeichen interpretiert, mir ist da kein Workaround für ältere Browser bekannt.
*grübel*
Ich nehme mal an, Du hast keinen wirklichen Zeilenumbruch an der Stelle, sondern einen Freiraum so wie bei den anderen Navi-Grafiken vor dem Image-Tag, nur leider wird dieser Freiraum an dieser Stelle als Zeilenumruch und damit als Leerzeichen interpretiert.
*grübel*
Ne, also mir fällt da nix ein, sorry für mein daraus resultierendes Sinnlos-Posting, aber immerhin weisst Du jetzt, dass ich mich wenigstens mit Deinem Problem beschäftigt habe....

Grüße, AnnaStesia

[Jürgen]

Hallo AnnaStesia,

Danke, dass du dich mit der Sache beschäftigt hast! Ich dachte schon, der Thread verschwindet in der Versenkung . Ich grüble auch schon eine Weile darüber und komme auf keinen grünen Zweig. Wenn es tatsächlich dafür keine Lösung gibt, muss ich die komplette Navigation je nach Vorlagenvariable austauschen lassen und nicht nur die einzelnen Navigrafiken. Das ist dumm, aber wird wohl nicht zu vermeiden sein .

Also vielen Dank nochmal für deine Unterstützung und liebe Grüße,

Jürgen

[LANtastic]

Ich habe mir das ganze jetzt auch nochmal angesehen.

Seltsam isses auf jeden Fall.
Ich habe den gesamten Quellcode mal zusammengefercht, überflüssigte Zeilenumbrüche entfernt, ggf. alles in eine Zeile geschreiben, usw.
Nix ... der IE zeigt immernoch den Pixelfehler an.

Im Firebird kann ich den Fehler unter keinen Umständen nachvollziehen.
Unter keinen Umständen bedeutet:
Egal wie ich den Code formatiere, da sieht immer alles gut aus.

[AnnaStesia]

Falls es hilft, schreib ich meine Testergebnisse auch noch:
- Mozilla 1.3/FB0.6 sieht gut aus, egal ob Freiraum/Zeilenumbruch an besagter Stelle (ich beziehe mich nur darauf, also das Ding zw. Produkte-Image und schließendem td-Tag)
- IE6.0/NS4.7: Pixelfehler wenn Freiraum da, sobald Freiraum entfernt (und ich meine wirklich nur diesen einen Unseligen), alles wunderbar

Gibt es denn wirklich keine Möglichkeit, DW dazu zu bewegen, diesen optionalen Bereich durch Nichts zu ersetzen und keinen Freiraum zu hinterlassen?

[LANtastic]

*Bullshit*

Sorry war nix Cache-Fehler

[Jürgen]

Vielen Dank für eure Tests!

@Lantastic: nein, wenn der Zeilenumbruch im Quellcode nach der besagten Navigationsgrafik gelöscht wird, dann ist auch im IE der Pixelfehler verschwunden. Bei mir gehts jedenfalls. Nur bekomme ich diesen Umbruch nicht aus dem Template heraus.

Original geschrieben von AnnaStesia
Gibt es denn wirklich keine Möglichkeit, DW dazu zu bewegen, diesen optionalen Bereich durch Nichts zu ersetzen und keinen Freiraum zu hinterlassen?

Doch, es gibt schon eine, nämlich die Conditions für die optionalen Bereich in einer Zeile zu schreiben, ohne diesen Zeilenumbruch (daher kommt er nämlich). Nur - dann wird in DW die optionale Grafik (also das Rolloverimage) nicht unter sondern neben dem Originalbild angezeigt, wodurch DW dann im Layoutmodus die Tabelle im Template zerreißt. Sieht dann nicht nur unschön aus, sondern verhindert auch, dass man im restlichen Layout visuell vernünftig arbeiten kann.

Andere Möglichkeit - und die werde ich jetzt nehmen: Immer jeweils die komplette Navigation durch den Templateparameter austauschen lassen und nicht die einzelnen Navigrafiken. Ist gar nicht so die Hammer-Arbeit, weil man sich die einzelnen Zustände des gesamten Menüs ohnehin komplett aus Fireworks exportieren kann, und das auch nur in einer einzigen Datei für die ganze Site gemacht werden muss. Aber schöner wäre es halt so gewesen, weil dann nicht redundante Daten im Template herumliegen.

Schade... und merkwürdig. Anscheinend stellen ja die neueren Mozillaversionen (ich habe noch 1.1) den Umbruch nicht dar. Opera 7.1 macht das übrigens auch nicht. Ich sehe das ohnehin als fehlerhafte Anzeige der Browser.

Gruß, Jürgen

[LANtastic]

Hab noch eine andere Lösung gefunden, die bei mir lokal auf jeden Fall klappte.

Ersetze mal der Tabelle, die die horizontale Navigation beinhaltet die <tr> Zeile durch diesen Kandidaten.

<tr style="height:25px;font-size:0em;">

Desweiteren solltest du sicherheitshalber die Breiten der Grafiken ebenfalls in die entsprechenden TDs übernehmen.

Die Idee war ganz einfach die :
Wenn ein sichtabres Leerzeichen alles zerstört, dann machen wir es eben "unsichtbar". Fauler Trick, OK, aber es klappt

[Jürgen]

Danke für die zweifellos gute Idee, Lantastic! Ich habe gestern aber schon fast genau das versucht, wenn auch etwas anders: Ich habe in der ganzen Tabelle die line-height auf 0px und die font-size auf 0px gesetzt. Ein Test im IE5.5 und Netscape 6 hat meine anfängliche Euphorie dann schnell verschwinden lassen. Ich befürchte, dass die Lösung von dir ebenfalls in älteren Browsern nicht gehen wird.

Die Grafikbreiten in die tds zu übernehmen, müsste eigentlich reine Kosmetik sein, warum soll ich das deiner Ansicht nach tun?

[LANtastic]

Du kannst ja das "line-height" auf jeden Fall für die neueren Browser mit reinnehmen. Height aber ich nur für ältere Browser da reingepackt. Ausserdem sollte es zur Ergänzung für die ganzen width-Attribute der TDs genommen werden, da height als HTML Attribut bei Tabellen ja nicht existiert.

Naja, im Grunde genommen isses überflüssig, aber da ich den Browsern nicht wirklich so richtig vertraue .... würde ich das wirklich nur machen, um besser schlafen zu können.

Wie gesagt, klappt auch ohne, aber mit würde ich ruhiger schlafen

[Jürgen]

Ja, du hast evtl. recht. Wobei die HTML-Konformität ja durch die fehlenden width-Attribute nicht gefährdet ist. Werde sie wohl für einen ruhigeren Schlaf besser doch noch einbauen .

Den Zeilenumbruch haben ich jetzt wegbekommen, in dem ich wie beschrieben die gesamte Navigationstabelle je nach Vorlagenparameter auswechsle. Damit funktionierts, wenn auch nicht so elegant.

Danke für eure Hilfe!

Gruß, Jürgen