nicht angemeldet
Hallo,
durch einen Trick, den ich irgendwo im Netz gefunden habe konnte ich jetzt endlich den IE dazu bringen einen Mindestabstand bei einem dreispaltigen Layout einzuhalten. und zwar mit:
* html .minwidth {border-left:54.5em solid red; position:relative; float:left; z-index:1;}
* html .container { position:relative; margin-left: -54.5em; float:left; z-index:2;}
diese zwei Klassen binde ich direkt hintereinander nach dem body der index.html ein.
Jetzt das Problem:
Wenn ich nun den IE unter Ansicht --> Schriftgrad --> größer oder sehr groß setzte, wird die Gesamte Titelseite größer, allerdings ohne scrollbars. D.h. die Navigation links verschwindet einfach.
Hat jemand dazu eine Idee das Problem zu lösen?
hier meine Quelle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body {
color: black; background-color:red;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0 0 0 0;
min-width: 50em; /*Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern, funkt nicht im IE */
}
/* minwidth fuer den IE6, diese Styles werden von den anderen Browsern ignoriert */
* html .minwidth {border-left:54.5em solid red; position:relative; float:left; z-index:1;}
* html .container { position:relative; margin-left: -54.5em; float:left; z-index:2;}
img { border:0}
a { text-decoration:none}
ul#Navigation {
background-color: white;
font-size: .8em;
float: left; width: 16.8em;
margin: 0em 0em 0em 0em;
padding: 0.5em 0em 3em 0.2em;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 18em; height:100%;
w\idth: 17em;
padding: 0.8em 0em 1em 0.0em;
padd\ing: 0.8em 0em 3em 0.2em;
}
ul#Navigation li {
list-style: none;
font-weight:bold;
padding: .5em;
}
ul#Navigation li ul {
margin: 0 0 0 0.5em; padding: 0;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
margin: 0 0 0 1.5em;
ma\rgin: 0 0 0 0.5em;
}
ul#Navigation li ul li{
list-style: none;
font-size: 0.9em;
font-weight:normal;
padding: 0.2em 0em 0.2em 0.5em;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
padding: 0.2em 0em 0.2em 1.0em;
padd\ing: 0.2em 0em 0.2em 0.5em;
}
ul#Navigation a {
text-decoration:none;
display: inline;
padding: 0em;
}
ul#Navigation a:link {
color: black; background-color:white;
}
ul#Navigation a:visited {
color: #666; background-color: white;
}
ul#Navigation a:hover {
color: #b7070c; background-color: white;
}
ul#Navigation a:active {
color: #b7070c; background-color: white; font-weight:bold;
}
div#Navigation {
text-align:center;
}
div#Info {
font-size: 0.75em;
float: right; width: 25em;
margin: 0em 0 0 0em; padding: 0em 0 0 0;
z-index:2;
}
div#Info div.kastenallg {
border: 0.018em solid black; min-height: 2em;
background-color:#ffffff;
padding: 0.5em 0 0.5em 1em; margin: 1em 1em 1em 1em;
}
div#Info div#kastenGraphik {
height: 7.8em;
}
div#Info div#text {
font-size: .9em;
font-weight:bold;
color:#FF3333; margin-left: 6em; margin-top: 1em;
}
div#Info div img { height:8em; float:left; margin:0 0.5em;
}
div#Inhalt {
text-align:center;
margin: 0 0em 0 0em;
padding: 0 1em;
z-index:0;
}
div#Inhalt h1 {
font-size: 1.0em;
padding: .0em 0 0 0;
}
* html div#Inhalt h1 {
margin: -0.3em 0 0 0;
}
div#Inhalt h2 {
font-size: 0.9em;
font-weight:normal;
}
-->
</style>
</head>
<body>
<div class="minwidth">
<div class="container">
<ul id="Navigation">
<li><a href="p">Haupt 1</a>
<ul>
<li><a href="a">eins</a></li>
<li><a href="a">zwei</a></li>
<li><a href="a">drei</a></li>
<li><a href="a">vier</a></li>
</ul>
</li>
<li><a href="a">Haupt 2</a></li>
<li><a href="a">Haupt 3</a>
<ul>
<li><a href="a">eins</a></li>
<li><a href="a">zwei</a></li>
<li><a href="a">drei</a></li>
<li><a href="a">vier</a></li>
<li><a href="a">fünef</a></li>
</ul>
</li>
<li><a href="a">Haupt 4</a>
<ul>
<li><a href="a">eins</a></li>
<li><a href="a">zwei</a></li>
<li><a href="a">drei</a></li>
<li><a href="a">vier</a></li>
</ul>
</li>
<li><a href="a">Haupt 5</a>
<ul>
<li><a href="a">eins</a></li>
<li><a href="a">zwei</a></li>
<li><a href="a">drei</a></li>
<li><a href="a">vier</a></li>
</ul>
</li>
<li><a href="a">Haupt 6</a>
<ul>
<li><a href="a">eins</a></li>
<li><a href="a">zwei</a></li>
<li><a href="a">drei</a></li>
<li><a href="a">vier</a></li>
</ul>
</li>
</ul>
<div id="Info">
<div class="kastenallg" id="kastenGraphik">
<div><a href="a"><img src="" alt="" title="" /></a></div>
<a href="a"><div id="text"></div></a>
</div>
<div class="kastenallg" id="kastenGraphik">
<div><a href="a"><img src="" alt="" title="" /></a></div>
<div id="text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>
<div class="kastenallg" id="kastenGraphik">
<div><img src="" alt="" title="" /></div>
<div id="text">Text Text Text Text Text Text Text </div>
</div>
<div class="kastenallg" id="kastenGraphik">
<div><img src="" alt="" title="" /></div>
<div id="text">Text Text Text Text Text Text Text </div>
</div>
<div><a href="" target="_blank"><p>Impressum und Datenschutz</p></a></div>
</div>
<div id="Inhalt">
<span> </span>
<h1>Inhalt InhaltInhalt</h1>
<h2>InhaltInhaltInhaltInhalt</h2><br /><br />
<h2>InhaltInhaltInhaltInhalt</h2><br /><br />
<h2>InhaltInhaltInhaltInhalt</h2><br /><br />
<h2>InhaltInhaltInhaltInhalt</h2><br /><br />
<h2>InhaltInhaltInhaltInhalt</h2><br /><br />
<div><img id="" src="" title="" alt="" /></div>
<div><img id="" src="" alt="" title="" /></div>
</div>
</div></div>
</body>
</html>