PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML Tabelle in IE und FF unterschiedlich dargestellt


Werbung

Voltaire
01-08-2007, 11:54
Ich bin grad ziemlich ratlos.
Ich habe eine Tabelle in HTML, wobei die erste Spalte von fester Breite (da füllt Typo3 später das Menü rein) sein soll, danach ein paar schmale Spalten (die sind nur eingefärbt um eine Farbabstufung zu erreichen) und dann den großen Rest (da füllt Typo3 den Inhalt rein).

Im IE ist das auch so, wie ich will, aber im aktuellen FF nimmt sich die linke Spalte beliebig viel Platz. Wenn das Menü 10 Punkte hat, sitzen die im IE brav untereinander, im FF nebeneinander, so dass die Farbstufen und Inhalt gar keinen Platz mehr haben.

Steckt da vielleicht ein Syntaxfehler dahinter, den IE wegschluckt, der FF aber nicht??


<table border="0" cellpadding="10" cellspacing="0" width="100%" height="100%">

<tr>
<td width="125150" valign="top" align="left" height="30" bgcolor="#E7E7E7"></td>
<td width="1" valign="top" align="left" bgcolor="#DDDFE2">&nbsp;</td>
<td width="1" valign="top" align="left" bgcolor="#BEC6D3">&nbsp;</td>
<td width="1" valign="top" align="left" bgcolor="#9BA9C1">&nbsp;</td>
<td valign="top" align="left" bgcolor="#93A3BD">
<p align="center"><b><font face="Verdana" size="3" color="#FFFFFF"><span style="background-color: #000099">###SUBTITEL###</span></font></b></td>
<td valign="top" align="left" bgcolor="#9BA9C1" width="1">&nbsp;</td>
</tr>

<tr>
<td width="125150" valign="top" align="left" bgcolor="#E7E7E7"><font color="#000099" face="Verdana" size="2">###MENU###</font></td>
<td width="1" valign="top" align="left" bgcolor="#DDDFE2">&nbsp;</td>
<td width="1" valign="top" align="left" bgcolor="#BEC6D3">&nbsp;</td>
<td width="1" valign="top" align="left" bgcolor="#9BA9C1">&nbsp;</td>
<td valign="top" align="center" bgcolor="#93A3BD" background="fileadmin/hg.gif">
<p align="center"><font face="Verdana" size="2">###INHALT###</font>
</td>
<td valign="top" align="left" bgcolor="#9BA9C1" width="1"> &nbsp; </td>
</tr>

<tr>
<td width="194150" valign="top" align="left" height="15" colspan="2"> <p align="center"></p> </td>
</tr>

</table>



So siehts zB in der Frontpage-Vorschau und im IE aus, auch wenn Inhalte drin stehen. Im FF verdrängt der helle den dunklen Bereich fast vollständig:
http://www.raeuberbrot.de/ioff/vorlage.gif

FelixS
01-08-2007, 12:20
Ich kann Dir da leider nicht helfen, will aber dennoch kurz anmerken, dass die "Frontpage ist eh doof"-Kommentare sicher nicht lange auf sich warten lassen werden ... ;) :D

Voltaire
01-08-2007, 12:24
Gut, dass wir darüber geredet haben ;)

Ich hab mich beim Durchlesen meines Postings, warum ich in der unteren Zeile eine andere Spaltenbreite habe als oben (ist Monate her, dass ich das mal probeweise erstellt hatte) und hab die oben rot reineditierten Korrekturen gemacht.
Jetzt sieht die Sache schon deutlich besser aus, aber die Breiten schwanken immer noch deutlich, während sie beim IE nach wie vor fix sind.

Voltaire
01-08-2007, 12:26
Ich kann Dir da leider nicht helfen, will aber dennoch kurz anmerken, dass die "Frontpage ist eh doof"-Kommentare sicher nicht lange auf sich warten lassen werden ... ;) :Dich hätte es natürlich auch unter DOS mit copy CON: vorlage.html eintippen können, der war halt grad zur Hand ;)

FelixS
01-08-2007, 12:29
ICH habe nix gegen Frontpage ...


... nur um das mal anzumerken ... ;)

Enni
01-08-2007, 12:57
Hab nur ganz ganz wenig Zeit, da ich gerade im Büro bin. Da du mir aber schon so schöne Smilies gebastelt hast, möchte ich gern versuchen, dir auch mal zu helfen.

Mir dünkt, die width-Angaben sind widersprüchlich. Die ganze Tabelle soll 100% breit sein. Also über die gesamte Breite gehen. Die einzelnen Spalten sind jedoch ohne Einheit (du meinst Pixel, aber interpretiert das auch jeder Browser so?) angegeben. Die Inhaltsspalte hat gar keine Breitenangabe.

Probiere doch mal, allen Spalten Prozentwerte zuzuordnen. Also die kleinen mit 1%, die linke vielleicht mit 30% und den Rest (66%) auf die größte. So dass du halt insgesamt wieder die 100% erreichst.

Hoffe, dass es sich so lösen lässt.

Lunina
01-08-2007, 13:03
Mir dünkt, die width-Angaben sind widersprüchlich. Die ganze Tabelle soll 100% breit sein. Also über die gesamte Breite gehen. Die einzelnen Spalten sind jedoch ohne Einheit (du meinst Pixel, aber interpretiert das auch jeder Browser so?) angegeben. Die Inhaltsspalte hat gar keine Breitenangabe.

Probiere doch mal, allen Spalten Prozentwerte zuzuordnen. Also die kleinen mit 1%, die linke vielleicht mit 30% und den Rest (66%) auf die größte. So dass du halt insgesamt wieder die 100% erreichst.


:d: :d: könnt ich mir auch gut vorstellen...

Lisa Simpson
01-08-2007, 13:04
ICH habe nix gegen Frontpage ...


... nur um das mal anzumerken ... ;)

Ich mag Typo3 nich :zahn:

Die Tabelle wird bei mir aber ganz anders angezeigt - fixe breite rechts?

Voltaire
01-08-2007, 13:47
Probiere doch mal, allen Spalten Prozentwerte zuzuordnen. Also die kleinen mit 1%, die linke vielleicht mit 30% und den Rest (66%) auf die größte. So dass du halt insgesamt wieder die 100% erreichst. Ich will ja, dass die linken Spalten unabhängig von der Browserbreite immer gleich breit sind und nur die Inhaltsspalte sich an die Gesamtbreite anpasst.

silverfreak
01-08-2007, 14:15
Hier mal meine Version, ich bin allerdings jetzt auch nicht sooo der Webseitenbastelcrack, mein CSS-Gehampel ist sicher doof geworden. Aber es funzt. :D



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>test</title>
<style type="text/css">
body{
font-family: Verdana, Arial, Helvetica;
font-size: 2;
font-color: #000099;
}
td.leftblock{
width: 150px;
height: 30px;
background-color: #E7E7E7;
}
table{
border-collapse: collapse;
}
</style>
</head>

<body>


<table>
<tr>
<td class="leftblock"></td>
<td style="background-color: #DDDFE2" rowspan="2">&nbsp;</td>
<td style="background-color: #BEC6D3" rowspan="2">&nbsp;</td>
<td style="background-color: #9BA9C1" rowspan="2">&nbsp;</td>
<td style="vertical-align: top; background-color: #93A3BD"><div style="text-align:center;"><font style="font-size:3; font-color: #FFFFFF; background-color: #000099"><b>###SUBTITEL###</b></font></div></td>
<td style="background-color: #9BA9C1" rowspan="2">&nbsp;</td>
</tr>

<tr>
<td class="leftblock">##MENU###</td>
<td style="vertical-align: top; background-color: #93A3BD; text-align:center; background-image:url(fileadmin/hg.gif);"><div style="text-align:center;">###INHALT###</div></td>
</tr>

<tr>
<td style="width: 150px; height: 15px; vertical-align: top; text-align: left;" colspan="2"><div style="text-align:center;"></div></td>
</tr>
</table>


</body>
</html>

Voltaire
01-08-2007, 14:56
Hier mal meine Version, ich bin allerdings jetzt auch nicht sooo der Webseitenbastelcrack, mein CSS-Gehampel ist sicher doof geworden. Aber es funzt. :Dviel besser als meines, hat aber einen Haken: die Größe der rechten Seite ist nicht abhängig von der Bildschirmauflösung, sondern vom Inhalt. Wenn ich also zum Beispiel nach einem langen Text auf ein kleines Foto blättere, schrumpft die ganze Seite zusammen und hat nen riesigen weißen Rand.

In meiner "IE-tauglichen" Version ist es so, dass alles zusammen schon immer den kompletten Bildschirm bzw. das komplette Fenster ausfüllt und das kleine Foto halt dann zentriert auf dem blaugrauen Hintergrund liegt.

andreas'76
01-08-2007, 15:17
Ich bin mir nicht 100% sicher ob ich dein erstes Posting richtig verstanden habe. Dein Problem ist also, dass die linke Menü Seite im Firefox zu breit ist, während im IE alles korrekt angezeigt wird?

Versuchs mal so zu ändern:


<tr>
<td width="150" valign="top" align="left" height="15" colspan="5"> <p align="center"></p> </td>
</tr>

Voltaire
01-08-2007, 17:27
Versuchs mal so zu ändern:ich kanns grad nur auf so einem 8" Minibildschirm mit 1024x768 Emulation und Lesebrille testen, aber da siehts zumindest perfekt aus!

Vielen Dank Euch allen! :freu:

andreas'76
01-08-2007, 17:58
Sorry, hab das ganze noch einmal überprüft: Die 5 sollte eigentlich eine 6 sein. Am aussehen ändert sich dadurch zwar nichts, aber 6 ist besser, da es 6 Zellen sind.

Die Codezeile könntest du aber auch ganz entfernen, wenn die untere Spalte keinen Inhalt haben wird.

can_rebooted
01-08-2007, 19:26
<table border="0" cellpadding="10" cellspacing="0" width="100%" height="100%">
der table-tag kennt kein height-attribut ... und ...



<tr>
<td width="125150" valign="top" align="left" height="30" bgcolor="#E7E7E7"></td> die height hätte ich in die <tr> gepackt




<td width="1" valign="top" align="left" bgcolor="#DDDFE2">&nbsp;</td>

der &nbsp; ist garantiert widther als 1px

anonsten wurde hier ja schon erwähnt, mit css die tabelle zu definieren ... das macht man heutzutage einfach mal so. ;)

Shu-Shu Fontana
01-08-2007, 20:59
Steckt da vielleicht ein Syntaxfehler dahinter, den IE wegschluckt, der FF aber nicht??
Nicht direkt ein Fehler. Du überlässt es aber einfach dem Browser, wie er die Seitenbreite auf die Tabellenspalten verteilt. Deshalb wirst du bei sämtlichen Browsern Probleme (d.h. eine uneinheitliche Spaltenbreite) bekommen. Beim IE mag es zunächst erträglich aussehen, aber auch hier wird die linke Spalte zu breit dargestellt. Das liegt daran, dass du die Tabelle auf 100% Breite einstellst, die Inhalte aber keine 100% benötigen. Die übrigen Prozente werden von den Browsern je nach Lust und Laune auf die 6 Spalten verteilt.

Lösung: Setze in der 5. Spalte (in der die Breite variabel sein soll) width="100%". Jetzt sieht es bestimmt schon viel besser aus! :trippel:

Ich würde außerdem bei allen anderen Spalten die gewünschte Breite durch Blank-Gifs erzwingen. Dafür bietet sich die erste Zeile an. Die Angaben zu width kann man dann in den folgenden Zeilen weglassen.

Mir ist nicht ganz klar, wie breit die Spalten 2, 3, 4 und 6 sein sollen. Width="1" erreichst du bei cellpadding="10" und mit &nbsp; natürlich nicht. Falls die wirklich so schmal werden sollen, muss überall ein 1x1 Blank-Gif rein und cellpadding auf 0.

In der letzten Zeile muss es natürlich colspan="6" heißen.

Ach ja: Moin, Moin allerseits! Bin neu hier :wink:

silverfreak
01-08-2007, 23:50
Willkommen an Board! :)