min-width im IE funktioniert aber...
0 0 0 
Detlef G.
min-width im IE funktioniert aber...
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>
-
Hallo,
Wer soll sich bitteschön durch diesen Ellenlangen Code wühlen? Hätte es nich gereicht die Stellen zu posten die das Problem sind? Ausserdem gibt es hier im Forum so tolle Befehle die Syntax highlightning bewirken. Stichwort [/code lang=css/] (bitte ohne die /)mfg
Melzmann-
Hallo,
Wer soll sich bitteschön durch diesen Ellenlangen Code wühlen?der Code um den es geht habe ich in den ersten Zeilen geschrieben.
Die Quelle dient dazu, um alles zu kopieren und am IE selbst mal zu schauen was ich meine.gruß
thilo
-
-
Hallo,
Wenn man Dimensionsangaben in em macht, ist es logisch, daß sich selbige verändern, wenn man die Schriftart skaliert.
Wenn man Dimensionsangaben in px macht, ist es logisch, daß sich selbige nicht verändern.
Wenn man Dimensionsangaben in % macht, ist es logisch, daß sich selbige verändern, wenn man die Größe des viewports verändert.netten Tag
^da Powl-
Hallo,
Wenn man Dimensionsangaben in em macht, ist es logisch, daß sich selbige verändern, wenn man die Schriftart skaliert.
hi powl,
das hab ich auch nie bezweifelt das es logisch ist. Die Schriftart soll sogar skaliert werden. Die Frage war, warum macht der ie nicht netterweise einen Scrollbalken. Im Firefox funktioniert alles prächtig
gruß
thilo-
Hallo,
Du hast mich nicht verstanden. Ich wollte wissen, wieso Du bei einem Spalten layout sowas machst:
Spalte 20em | Spalte 50em | Spalte 20em
Dass das irgendwann aus dem Fenster haut, ist doch normal. Dann muß der Besucher horizontal scrollen. Tut das not? Wenn ich gefragt bin würde ich sagen, das horizontales Scrollen auf meiner "hatelist" ganz weit oben steht.
Warum also nicht:
Spalte 20% | Spalte 50%| Spalte 30%
Das bleibt dann im Fenster ohne zu scrollen. Wäre das nicht besser?
Warum der IE da nicht scrollt wie gewollt, weiss ich allerdings auch nicht. Etwas scrollt er ja, jedenfalls bei mir. Ich denke mal das hängt an dem negativen Margin. Aber genau habe ich das auch nicht angesehen.
netten Tag
^da Powl-
hi powl,
das problem ist, dass wenn ich den ie immer kleiner mache, die rechte seite nach unten klappt. d.h direkt unter der navigationsleiste. Auch wenn ich die Spalten in % angebe, klebt irgendwann die rechte seite unter der Navigationsleiste. Wie gesagt nur im IE. Firefox blickt ja die min-width Anweisung und führt sobald die Breite erreicht ist scrollbalken ein.
deswegen hab ich die klassen "minwidth" und "container" extra für den ie eingeführt. damit eine Mindestbreite bei dem IE eingehalten wird, wenn ich das IE-Fenster kleiner mache.Im Prinzip klappt das auch super. Nur wenn ein User den schriftgrad auf "ganz groß" stellt, sprengt es natürlicher weise den rahmen, aber halt ohne scrollbalken. probier das selbe im firefox aus mit strg + +. da funkt´s
gruß
thilo
-
-
-
-
Hallo Thilo,
wie ich gerade feststellte, macht der IE Border maximal 960px breit. Jedes größere Maß ergibt auch nur 960px.
Die 960px entsprechen bei mir bei Schriftgrad "sehr groß" etwa 45em.* html .minwidth {border-left:54.5em solid red; position:relative; float:left; z-index:1;}
Der Border wird also bei Schriftgrad "sehr groß" etwa 45em.
* html .container { position:relative; margin-left: -54.5em; float:left; z-index:2;}
Dadurch beginnt .container dann 9.5em zu weit links.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
hi Detlef,
Ja! genau das wars, was ich suchte.
Vielen Dank!!!Gruß
ThiloHallo Thilo,
wie ich gerade feststellte, macht der IE Border maximal 960px breit. Jedes größere Maß ergibt auch nur 960px.
Die 960px entsprechen bei mir bei Schriftgrad "sehr groß" etwa 45em.* html .minwidth {border-left:54.5em solid red; position:relative; float:left; z-index:1;}
Der Border wird also bei Schriftgrad "sehr groß" etwa 45em.
* html .container { position:relative; margin-left: -54.5em; float:left; z-index:2;}
Dadurch beginnt .container dann 9.5em zu weit links.
Auf Wiederlesen
Detlef
-