Interpretation von width

streetworker · #1 (**permalink**) 20.07.2005, 11:02

Hallo zusammen,

habe gerade damit begonnen mich in CSS einzuarbeiten, und stehe vor folgendem Problem:

Ich möchte eine Tabelle in einen <div> Container so einfügen, dass die gesamte Breite ausgenutzt wird.
Problem: width:100% funktioniert im Firefox aber IE6 scheint die 100%
nicht auf den umgebenden Container sondern auf die Seitenbreite zu beziehen
womit die Tabelle immer zu groß wird.

Gibt es eine portable Lösung für dieses Problem oder mache ich einfach etwas falsch?

Danke für Eure Hilfe.
//sw

Code:

<html>
  <head>
    <title>Tabellen Test</title>
    <style type="text/css">
      <!--
      #container { width: 95%; border: 1px solid black; }
      #leftnav { float: left; width: 150px; }
      #content { margin-left: 150px; border-left: 1px solid black; padding: 1em; }
      table { border: 1px solid black; width: 100%; text-align: left; }
      -->
    </style>
  </head>

  <body>
    <div id="container">

      <div id="leftnav">
        <ul>[*]abc[*]def[/list]      </div>

      <div id="content">
        <table>
          <tr>
            <th>Spalte1</th>
            <th>Spalte2</th>
            <th>Spalte3</th>
          </tr>
          <tr>
            <td>Wert1</td>
            <td>Wert2</td>
            <td>Wert3</td>
          </tr>
        </table>
      </div>

    </div>
  </body>
</html>

[/code]

andir · #2 (**permalink**) 20.07.2005, 11:46

Die Tabelle bezieht sich nicht auf die Seitenbreite.

Hier kommt meiner Ansicht nach das fehlerhafte Boxmodell des IE zum tragen, da du keine Dokumententypdeklaration für dein Dokument angegeben hast.

Such mal nach DTD im Forum hier und nach Quirksmode ( für das genannte Boxmodell)

Eine brauchbare DTD für dein Projekt könnte sein:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Damit stellt auch der IE es "richtig" dar.

grüsse andir

netspy · #3 (**permalink**) 20.07.2005, 11:49

Positioniere die DIV-Box mal relative, das hilft dem IE meist auf die Sprünge.

Code:

#container { position: relative; }

Mario

streetworker · #4 (**permalink**) 20.07.2005, 12:08

Hallo

und danke für Eure Vorschläge.

Die fehlende DTD war tatsächlich das Problem.
Jetzt wird die Tabelle auch im IE6 richtig formatiert.

Danke für die schnelle Hilfe!
//sw

netspy · #5 (**permalink**) 20.07.2005, 12:19

Zitat:

Zitat von streetworker

Die fehlende DTD war tatsächlich das Problem.
Jetzt wird die Tabelle auch im IE6 richtig formatiert.

Im IE 5.5 und kleiner wird sie aber immer noch falcsh formatiert.

Mario

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS Menü	FuFi	CSS	1	05.01.2015 15:46
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Media Querys - Layout geht wird über den Displayrand angezeigt	DarkNemesis84	CSS	9	05.05.2013 22:00
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße	Spencer	Javascript & Ajax	3	18.09.2012 23:16