✔ 100% Tabellen Weite

Status
Nicht offen für weitere Antworten.
Da unsere Lösungsvorschläge das Problem nicht 'browserübergreifend' lösen konnten, habe ich mal einen ganz anderen Weg in der Positionierung gewählt und das DIV#subnavi mit festen Angaben positioniert, sowie das DIV#content mittels float:right am rechten Seitenrand ausgerichtet; ... it works ;)

Code: 
div#subnavi
{
           position: absolute;
           top: 80px;
           left: 0px;
           width: 80px;
           margin: 0px;
           background-color: #358;
           border: none;
           border-right: solid 1px #246;
           color: #fff;
           font-family: 'Bitstream Vera Sans', Verdana, sans-serif;
           font-size: 11px;
}

div#content
{
           float: right;
           margin: 0px;
           margin-bottom: 10px;
           margin-left: 90px;
           padding: 3px;
           border: solid 1px #246;
           border-right: none;
           background-color: #358;
           color: #fff;
}
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
Der Vollständigkeit halber und um Mißverständnissen vorzubeugen, hier der komplette Quelltext der modifizierten CSS-Datei style.css

Code: 
html, body
{
          margin: 0;
          padding: 0;
}

body
{
         background-color:#68b;
         height:100%;
}

a
{
        color:#acf;
        text-decoration:none;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
}
a:hover
{
        text-decoration:underline;
}

h1
{
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        border-bottom:solid 1px #246;
        padding:3px;
        margin:-3px;
        margin-bottom:10px;
}
h2
{
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        margin-bottom:10px;
}
h3
{
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        margin-bottom:5px;
}

div
{
        margin-left:30px;
        margin-bottom:10px;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
}

span.i
{
        font-style:italic;
}
span.b
{
        font-weight:bold;
}
span.u
{
        text-decoration:underline;
}

table
{
        position:relative;
        border:solid 1px #246;
        margin-bottom:10px;
        width:100%;
}
td
{
        color:#fff;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        vertical-align:top;
        font-size:12px;
        padding:3px;
}
th
{
        color:#fff;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
        background-color:#246;
        padding:3px;
        text-align:left;
}
th.h1
{
        font-size:18px;
        background-color:#246;
}

input
{
        background-color:#68b;
        color:#fff;
        border:solid 1px #246;
        padding:1px;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
}
input.button
{
        padding:1px 10px;
}
input:hover
{
        background-color:#8ad;
        color:#fff;
}
textarea
{
        background-color:#68b;
        color:#fff;
        border:solid 1px #246;
        padding:1px;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
}
textarea:hover
{
        background-color:#8ad;
        color:#fff;
}
select
{
        background-color:#68b;
        color:#fff;
        border:solid 1px #246;
        padding:1px;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
}
option
{
        background-color:#68b;
        color:#fff;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:12px;
}

/***** LAYOUT *****/


div#navi
{
        width:100%;
        height:82px;
        min-width:780px;
        margin:0px;
        background-color:#358;
        border:none;
        border-bottom:solid 1px #246;
        color:#fff;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:11px;
}
div#navi a
{
        display:block;
        float:left;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:11px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        padding:1px;
        border:none;
        border-right:solid 1px #246;
        background-color:#358;
        width:80px;
        height:80px;
}
div#navi a:hover
{
        background-color:#469;
}
div#navi a img
{
        border:none;
}
div#navi div#logo
{
        margin:0px;
        float:left;
        font-family:'Bitstream Vera Sans', Verdana, sans-serif;
        font-size:11px;
        color:#fff;
        text-align:center;
        padding:1px;
        border:none;
        border-right:solid 1px #246;
        background-color:#358;
        width:100px;
        height:80px;
}

div#subnavi
{
           position: absolute;
           top: 80px;
           left: 0px;
           width: 80px;
           margin: 0px;
           background-color: #358;
           border: none;
           border-right: solid 1px #246;
           color: #fff;
           font-family: 'Bitstream Vera Sans', Verdana, sans-serif;
           font-size: 11px;
}

div#subnavi a
{
        display:block;
        font-family:'Bitstream Vera Sans', 'Verdana', sans-serif;
        font-size:11px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        padding:1px;
        border:none;
        border-bottom:solid 1px #246;
        background-color:#358;
        text-align:center;
        width:78px;
}
div#subnavi a:hover
{
        background-color:#469;
}
div#subnavi a img
{
        border:none;
}

div#navibar
{
        position:relative;
        margin:0px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:90px;
        padding:3px;
        border:solid 1px #246;
        border-right:none;
        background-color:#358;
        color:#fff;
}

div#content
{
           float: right;
           margin: 0px;
           margin-bottom: 10px;
           margin-left: 90px;
           padding: 3px;
           border: solid 1px #246;
           border-right: none;
           background-color: #358;
           color: #fff;
}

/***** SPECIAL *****/

div#error
{
        position:relative;

        font-family:'Bitstream Vera Sans', 'Verdana', sans-serif;
        background-color:#fff;
        color:#f00;
        border:solid 1px #f00;
        border-right:none;
        padding:3px;
        margin:0px;
        margin-top:10px;
        margin-bottom:10px;
        z-index:2;
}
div#error h1
{
        font-family:'Bitstream Vera Sans', 'Verdana', sans-serif;
        background-color:#f00;
        color:#fff;
        border:none;
        font-size:16px;
        font-weight:bold;
        padding:3px;
        margin:-3px;
        margin-bottom:3px;
}

a.button_small
{
        border:solid 1px #246;
        background-color:#358;
        text-decoration:none;
        color:#fff;
        padding:1px;
        padding-left:5px;
        padding-right:5px;
        margin-right:3px;
        font-size:10px;
}
a.button_small:hover
{
        background-color:#469;
        text-decoration:none;
}

a.button
{
        display:block;
        float:left;
        border:solid 1px #246;
        background-color:#358;
        text-decoration:none;
        text-align:center;
        color:#fff;
        padding:3px;
        margin-right:3px;
        font-size:12px;
        width:100px;
}
a.button:hover
{
        background-color:#469;
        text-decoration:none;
}
 
Nimm mal den ganzen Quatsch der relativen Positionierung raus, sowie die XML-Deklaration, die den Internet Explorer in den so genannten Quirks-Darstellungsmodus schalten lässt, und nutze folgendes Stylesheet:
Code: 
* {
	margin:			0;
	padding:		0;
}
#navi {
	background-color:	#c33;
}
#subnavi {
	float:			left;
	width:			78px;
	background-color:	#3c3;
}
#content {
	margin-left:		90px;
	background-color:	#33c;
}
table {
	width:			100%;
}
Wieso überhaupt XHTML 1.1?
 
@ michaelsinterface : funktioniert nur solange auch wirklich iene tabelle auf der seite ist wenn nicht zieht sich der gesamte content bereich zum rechten rand zurück...

@ Gumbo : ich habe es mal ohne xml dek. versucht und nur dein stylesheet verwendet trotzdem verwenden die tabellen 100% der platzes der seite und nicht des div... und alles ist mach unten verschoben...

zu XHTML: Ich weiß es selber nicht so genau. Es ist ein anerkannter Standard es ist sehr "ordentlich". Ich habe deswegen mal gegoogelt:

http://dciwam.de/faq/xhtml/pros-cons-xhtml
http://dciwam.de/faq/xhtml/wann-auf-xhtml-umsteigen

Vielleicht sollte ich doch wieder auf HTML 4.01 umsteigen...
 
Zuletzt bearbeitet:
Prophet05 hat gesagt.:
@ michaelsinterface : funktioniert nur solange auch wirklich iene tabelle auf der seite ist wenn nicht zieht sich der gesamte content bereich zum rechten rand zurück...
Zum Vergrößern anklicken....
Das Thema heisst doch 100% Tabellen Weite .... :(
 
Prophet05 hat gesagt.:
...
@ Gumbo : ich habe es mal ohne xml dek. versucht und nur dein stylesheet verwendet trotzdem verwenden die tabellen 100% der platzes der seite und nicht des div... und alles ist mach unten verschoben...
Zum Vergrößern anklicken....
Wichtig ist, dass der IE nicht im Quirksmode arbeitet. Das erreichst du beispielsweise, in dem du alle Kommentare und auch den XML-Prolog vor der Dokumententyp-Deklaration weglässt:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    	<title>Jan's Website - Webdesign &amp; Programmierung</title>
    	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
 dein Inhalt 
    </body>
    </html>
Einzelheiten dazu findest du im Artikel iX 3/2004 bzw. der zugehörigen Übersicht "Wie Browser auf Doctypes reagieren".

Auf deiner Seite ist deutlich zu sehen, dass der IE im Quirksmode die Tabellenbreite (width:100%;) ebenso groß wie das BODY-Element macht und sich nicht weiter um die Breite des umschließenden DIV#content-Containers (width:auto;) kümmert.
Das macht er offensichtlich im Standardmode nicht mehr und übernimmt hier die berechnete Breite des DIV#content-Blockes für die 100%-Breite der eingeschlossenen Tabellen.
 
Hi,

entferne mal alle Angaben mit position: relative. Um das Layout auch für den IE tauglich
zu machen, wird der Selektor #content mit Hilfe des Star-Hacks um eine minimale
Höhenangabe erweitert. Diese Vorhergehensweise ist im MS-Produkt möglich, die Höhe
wird automatisch angepasst.
Code: 
div#content{ /* Bisherige Definitionen ohne position: relative; */}
* html div#content{ height: 1%;}
Vielleicht hilft das weiter.

Ciao
Quaese
 
So es reicht mir nachdem ich mir die alles durchgelesen habe bin ich zu dme entschluss gekommen wieder auf HTML 4.01 Strict umzusteigen ist eh fast das selbe wie XHTML 1.0...

Seitdem ich gewechselt habe zeigt der IE alles richtig an Ich finde das unglaublich vorher hatte er immer abweiungen... Naja der einzige fehler den ich jetzt noch habe ist das er die tabelle immernoch nach unten verschiebt obwohl sie nur nicht 100% der content bereichs nutzen...

mfg Prophet05

EDIT:
http://prophet.argoedv.de/fehler/index.htm
http://prophet.argoedv.de/fehler/style.css
http://prophet.argoedv.de/ie_fehler.jpg
 
Zuletzt bearbeitet:
Hi,

ich habe einige Zeit mit Sowas experimentiert und bin zu folgender Teillösung gekommen:

  1. Bei zwei nebeneinander liegenden div-Containern werde diese immer in einen gemeinsamen div-Container reingepackt. Dieser Container wird absolut überhaupt nicht formatiert, der kommt "nackt" rein.
  2. Der linke container darin wird mit float: left und width: XXX nach links geklebt
  3. der rechte Container bekommt einen margin-left und ggf. einen margin-right, keine weitere Formatierung, kein float, kein position, Nix dergleichen.

Nur so habe ich die Unterschiede zwischen IE und FF halbwegs in den Griff bekommen. Was ich bislang noch nicht geschafft habe, ist, in dem rechten Container eine Tabelle einzurichten, die die gesamte Breite dieses Containers einnimmt. Entweder wird die Tabelle im IE 5.5 zu breit gemacht (100% der Bildschirmbreite anstatt 100% der Breite des umgebenden Containers), oder die Tabelle wird im IE 6 zu schmal angezeigt. Daß die Tabelle in beiden Browsern die gleiche Breite einnimmt, habe ich noch nicht hinbekommen.
 
Es ist ja nicht so das es bei mir nicht funktioniert nur habe ich das problem das der IE dort diesen hübschen grafikfehler + verschiebung nach unten einbaut...

Aber trotzdem danke...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück