|
|||
Höhenproblem bei Tabellenzellen
Hallo zusammen,
ich versuche allen Browsern eine einheitliche Darstellung einer Tabelle beizubringen. Es klappt nur nicht. Um zu erklären, warum ich das mit Tabellen löse anstatt mit Divs: Der Versuch mit Div ist ebenso gescheitert wie die Lösung mit der Tabelle. Zum Problem. Ich möchte, das sich die Tabelle über den gesamten Browserbereich erstreckt. Das war einfach. Die linke Zelle enthält das Logo und die Navigation und erstreckt sich über 3 Tabellenzeilen. (rowspan="3") Auf der rechten seite sind 3 Zeilen in einer Spalte. Die oberste (Kopf) soll so schmall wie möglich sein, ohne den Inhalt zu zerdrücken. Die mittlere soll die maximale Größe haben ohne die untere Zeile aus dem Tenster zu drücken. Die untere soll das Impressum beinhalten und wie der Kopf nur so hoch wie nötig sein, sich dabei aber an den unteren Broserrand drücken. Der Netscape 7.1 und der Firefox 0.9.2 stellen es so dar wie ich es mir wünsche. Der IE6 und der Opera 7.23 sind die Problemkinder. Könnt ihr mir helfen oder ist das ein Prob, das sich so nicht lösen lässt? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- * { font-family:Verdana, Helvetica, sans-serif; color:#5C6163; } html { height:100%; } body { height:100%; margin:0; padding:0; background-color:#F7F7F7; } img { border:none; } li { line-height:18px; } td { line-height:18px; } ul { text-align:left; } #global { width:100%; height:100%; } #left { width:160px; vertical-align:top; } #left img { width:150px; height:150px; margin:5px; padding:0; } #navi { margin:5px; padding:5px 0; font-size:12px; line-height:14px; font-weight:bold; background-color:#ffffff; border:1px solid #cccccc; } #navi ul { list-style-type:square; } #kopf { height:1px; padding:10px; text-align:center; font-size:18px; font-weight:bold; white-space:nowrap; background-color:#ffffff; border:1px solid #cccccc; } #main { padding:10px; font-size:12px; vertical-align:top; background-color:#ffffff; border:1px solid #cccccc; } #impressum { height:1px; padding:10px; text-align:center; font-size:10px; font-style:italic; white-space:nowrap; background-color:#ffffff; border:1px solid #cccccc; } --> </style> </head> <body> <table id="global" cellspacing="5" cellpadding="0"> <tr> <td id="left" rowspan="3"> [img]#[/img] <div id="navi"> <ul>[*]Link1[*]Link2[*]Link3[*]Link4[*]Link5[*]Link6[/list]</div> </td> <td id="kopf"> Globales Thema / Überschrift </td> </tr> <tr> <td id="main"> </td> </tr> <tr> <td id="impressum"> [img]http://www.validome.org/images/valid/set3/valid_xhtml_1_0.gif[/img] Impressum - Bemerkungen E-Mail: Email-Adresse </td> </tr> </table> </body> </html> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellenzellen unterschiedlich breit, colspan | hijacker | CSS | 0 | 19.06.2010 12:27 |
Höhenproblem | ONeill | CSS | 8 | 02.10.2008 13:33 |
IE 5.01 und 5.5 Höhenproblem | Xtremo | CSS | 7 | 09.06.2007 00:06 |
Höhenproblem | Newbeeee | CSS | 2 | 15.11.2006 00:03 |
Höhenproblem bin verwirrt... | Lexxy | CSS | 29 | 31.07.2006 18:47 |