Maximilian Gaukler: [Lösung] IE: <table width="100%"> und <div style="float:left">

SELF-Forum

[Lösung] IE: <table width="100%"> und <div style="float:left">

Maximilian Gaukler
– Informationen zu den Bewertungsregeln

Hallo,

ich hatte das Problem, dass bei einem zweispaltigem Layout wie dem unter
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm eine in das rechte div (Inhalt) eingefügte Tabelle mit width=100% einen großen Leerraum erzeugt hat und erst auf höhe des Unteren Randes des linken (Menü) Divs angefangen hat.

Da ich ein Template für ein CMS erstellen musste, das öfters <table width=100%> ausspuckt, konnte ich nicht einfach alle tables auf width=95% bringen.
Deshalb habe ich in den Inhalt-div einen weiteren div mit width=95% eingefügt, in welchen dann der Inhalt kommt:

gesamter Code zum selber ausprobieren, um das ursprüngliche Problem zu sehen den neuen div (zwischen den kommentarzeilen) löschen:

<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Zweispaltiges Layout - Navigation links</title>
<style type="text/css">
body, p a {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
}

ul#Navigation {
font-size: 0.91em;
float: left; width: 22em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}

div#Inhalt {
margin-left: 22em;
padding: 0 1em;
border: 1px dashed silver;
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="../einfuehrung.htm">Einf&uuml;hrung in CSS-basierte
Layouts</a></li>
<li><a href="../mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="../fixbereiche.htm">Fixe Bereiche mit CSS-basierten
Layouts</a></li>
<li><a href="../navigationsleisten.htm">CSS-basierte
Navigationsleisten</a></li>
<li><a href="../browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<!-- ***HIER KOMMT DER NEUE DIV: -->
<div style="margin: 0px; padding: 0px; width: 95%;">
<!-- ***WEITER UNTEN KOMMT NOCH DER ENDTAG -->
<h1>CSS-basierte Layouts</h1>
<h2>Navigation links gefloatet</h2>
<table clear="none" style="width: 100%; text-align: left;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<p>In diese Seite sind nun auch die CSS-Definitionen zur
Pr&auml;sentation eingebunden, durch die u.a. die Navigation links
neben dem Inhaltsbereich platziert wird.</p>
<p>Dennoch w&auml;re diese Seite auch ohne CSS nutzbar und w&uuml;rde
dann vom Browser entsprechend dessen Voreinstellungen auch sinnvoll
angezeigt werden.</p>
<p>Im Internet Explorer werden Sie an dieser Stelle vermutlich auch
einen Bug erkennen, der den neben einem floatenden Element stehenden
Text zus&auml;tzlich um 3px einr&uuml;ckt.</p>
<!-- ***HIER DER ENDTAG -->
</div>
<!-- ***DAS WARS -->
</div>
<p><a href="../mehrspaltige.htm#zweispaltig_links">zur&uuml;ck</a></p>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. [Lösung] IE: <table width="100%"> und <div style="float:left">

    Schuer Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Erstmal: klasse, dass du deine Ergebnisse auch anderen zur Verfügung stellst!

    Deshalb habe ich in den Inhalt-div einen weiteren div mit width=95% eingefügt, in welchen dann der Inhalt kommt:

    Damit bekämfst du allerdings nicht die eigentliche Ursache des Problems, sondern versuchst es dem Internet Explorer "hintenrum" recht zu machen, indem du ihm eine schmalere Tabelle lieferst (die 95% basieren dabei nicht auf errechneten Werten).

    Um das Problem an der Wurzel zu packen, benötigt der Internet Explorer - andere Browser haben kein Problem mit dem Seitenaufbau - eine Angabe, die ihn dazu bringt, den Inhaltscontainer als hasLayout (siehe http://www.satzansatz.de/cssd/onhavinglayout.html) zu betrachten, also etwa ein height:1%

    div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
    min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */

    height: 1%;

    }

    Allerdings ist es sinnvoll, die Höhenangabe nicht allen Browsern zu liefern, sondern nur dem Internet Explorer in einem separaten Stylesheet.

    Viele Grüße!
    _ds

    --
    Kaffee ist so individuell wie der eigene Musikgeschmack, der selbst entdeckt werden muss.
    Top 5-Blog, Verhalten im Coffee House
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln