Tabellenverzerrung Änderung Schrift über Browser vermeiden?
Stefan
- html
Hallo,
meine "Arbeitsseite":
http://wwwdesign.info/test/artikel/index.htm
welche mit CSS formatiert wurde, hat das Problem, daß bei Änderung der Schriftgröße über den Browser (Schrift größer) die Tabellen verzerrt werden.
Seltsamerweise werden nicht alle Tabellen verzerrt! Ich habe die stabilen und die verzerrten Tabellen vom Code her verglichen, und kann keinen Unterschied erkennen.
Das macht mich -ehrlich gesagt- ziemlich konfus, daß fünf Tabellen auf die Schriftänderung reagieren, während die anderen unverändert stabil bleiben (z.B. das 3D-Bild oben).
Weiß jemand Rat?
Schon mal vielen Dank im vorraus! :-)
Stefan
Wichtig:
Bei dieser Datei funktionieren die Links nicht! Außerdem ist dies NICHT die Version für Netscape 4.x.
Hallo Stefan,
ich glaube die " " in den Tabellenzellen sind die Schuldigen.
Gruß
Rene
ich glaube die " " in den Tabellenzellen sind die Schuldigen.
Danke Rene,
werde ich gleich mal ausprobieen!
Da bleibt folglich die Frage, ob manche Browser (Netscape 6,7, Mozilla 1,1.4, Opera 6,7) Probleme damit haben, wenn das Leerzeichen fehlt?
Gruß,
Stefan
Hallo Stefan,
ich glaube die alte NN 4.76, der neue NN und Mozilla haben ein Problem, wenn in leeren Tabellenzellen keine geschützte Leerzeichen drin sind.
Hallo Stefan,
ich glaube die alte NN 4.76, der neue NN und Mozilla haben ein Problem, wenn in leeren Tabellenzellen keine geschützte Leerzeichen drin sind.
Was hälst Du von meinen Vorschlägen "Blindes Pixel" oder "Leerzeichen per CSS formatieren"?
ich glaube die " " in den Tabellenzellen sind die Schuldigen.
Stimmt zwar - denn wenn ich bei folgendem Code:
-----------------------------------------------
<div style="position:absolute; left:9px; top:150px; z-index:3">
<table width="100%" height="4" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td style="width:750px; height:4px"><img src="../img/streifen.gif" width="750" height="18"></td>
<td> </td>
</tr>
</table>
</div>
-----------------------------------------------
die beiden Zeilen
-----------------------------------------------
<td> </td>
-----------------------------------------------
herausnehme, dann ist die Tabelle stabil.
Aber die beiden Zeilen wverden benötigt, um die Tabelle zentriert zu halten!
Vielleicht muß ich alle Leerzeichen durch blinde Pixel mit Höhe "1px" ersetzten? Wenn das die Lösung wäre -o-jeh!
Oder Klasse zuweisen, und Schrift (für das Leerzeichen) per CSS auf "1px" Höhe setzen?
Hi,
<div style="position:absolute; left:9px; top:150px; z-index:3">
<table width="100%" height="4" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td style="width:750px; height:4px"><img src="../img/streifen.gif" width="750" height="18"></td>
<td> </td>
</tr>
</table>
</div>
Aber die beiden Zeilen wverden benötigt, um die Tabelle zentriert zu halten!
ist Dir überhaupt klar, daß diese Zeilen ziemlich unsinnig sind?
1. wozu soll diese tabelle überhaupt gut sein? du hast ein absolut positioniertes div, in dem eine streifengrafik soll. warum nur muß da eine tabelle drum? positioniere das div dorthin, wo die grafik erscheinen soll und gebe ihm die erforderlichen abmessungen und fertig. besser noch: verzichte auf absolute positionierung und nutze margin und float.
2. dieses div ist 4px hoch. hierin sollen in einer zeile zum einen leerzeichen in der hierfür vorgesehenen schriftgröße und -höhe platz finden? und in der mittleren spalte mit einer angegebenen höhe von 4px eine 18px hohe grafik?
freundliche Grüße
Ingo
- wozu soll diese tabelle überhaupt gut sein? du hast ein absolut positioniertes div, in dem eine streifengrafik soll. warum nur muß da eine tabelle drum? positioniere das div dorthin, wo die grafik erscheinen soll und gebe ihm die erforderlichen abmessungen und fertig. besser noch: verzichte auf absolute positionierung und nutze margin und float.
Hallo Ingo,
auf diese Weise bleiben das Gerüst immer in Browsermitte. Hätte ich alles am linken Rand, so wäre dieser Aufwand nicht nötig.
Und durch die jeweils angepassten Spacer (spacer.gif) werden die Inhalte stabilisiert, so das bei Änderung des Browserfensters nichts verrutscht.
Gruß,
Stefan
Hi Stefan,
auf diese Weise bleiben das Gerüst immer in Browsermitte. Hätte ich alles am linken Rand, so wäre dieser Aufwand nicht nötig.
Dir ist aber klar, daß Du den Inhalt eines DIVs auch mittels text-align ohne Tabelle zentrieren kannst?
Und durch die jeweils angepassten Spacer (spacer.gif) werden die Inhalte stabilisiert, so das bei Änderung des Browserfensters nichts verrutscht.
Sorry, aber zum einen lassen sich Abstände per margin/padding wesentlich sinnvoller "stabilisieren" und zum anderen machen die von Dir verwendeten Höhenangaben ja ohnehin keinen Sinn...
Und allgemein zu Deiner Seite http://wwwdesign.info/test/artikel/index.htm:
ich sehe hier weder für Tabellen noch für spacer eine Notwendigkeit. Dieses Layout läßt sich bequem mit wenigen DIVs, float und margin umsetzen. Und gerade bei einer Seite zum Thema Webdesign sollte das so m.E. auch so gemacht werden.
freundliche Grüße
Ingo