Problem mit unterschiedlichen Auflösungen

Status
Nicht offen für weitere Antworten.
Bei mir bricht der IE das DIV #mitte erst dann um, wenn der verfügbare Platz im Fenster nicht mehr für das Element und die darin eingebundenen DIVs #bild1 und #bild2 ausreicht.

Im Vollbildmodus (Auflösung: 1280*1024px) oder bei voller Breitenausdehnung des Browserfensters wird die Seite korrekt dargestellt.
 
Ja ok das stimmt da ist es bei mir auch ok nun habe ich das bei 1024x768 hier laufen und da bricht er den div mitte halt um. Kann man das ändern oder verhindern ? Das er das nicht umbricht ? auch bei der einstellung ? Weil ich mein es sollte ja für verschiedene Einstellungen gut angezeigt werden
 
kbit hat gesagt.:
nun habe ich das bei 1024x768 hier laufen und da bricht er den div mitte halt um.
Zum Vergrößern anklicken....
Die minimalste Fensterbreite liegt bei mir bei 1071px, bevor das Element umgebrochen wird:

demo_ie6_2.jpg

Wie sich das verhindern lässt, haben wir ja schon besprochen, und diese Technik ist unabhängig von der jeweiligen Bildschirmauflösung.
 
Ja das stimmt dann habe ich da aber noch einen fehler er schneidet mir wenn ich das so mache wie im bsp Code die linke hälfte ab ich kann dann nur lesen ab den Buchstaben N der rest fehlt dann kompellt

Code: 
#root{min-width:1200px;}
.minwidth{ border-left:1200px solid #fff; position:relative; float:left; z-index:1;}
.container{margin-left:-1200px; position:relative; float:left; z-index:2;}
 
Den "Bug" hab ich eben auch festgestellt, und mich direkt an den Autor Stu Nicholls gewendet.

Der "Schwellenwert" für die Mindestbreite liegt bei mir bei 960px - alles was darüber hinaus geht, wird vom IE nach links in den nicht-sichtbaren Bereich des Fensters verschoben.

Sobald ich von ihm eine Antwort, respektive einen Bugfix, erhalte, werde ich mich hier umgehend melden.
 
Das ist super vielen dank noch einmal für die lange und ausdauernde Hilfe. Das macht nicht jeder. Muss aber sagen das man an solche Probleme verzweifeln kann wenn keiner einem hilft
 
Hi,

da bislang von Stu Nicholls keine Antwort kam, und ich am Samstagabend für gewöhnlich über etwas mehr Zeit verfüge, hab ich mal auf seiner Seite alle Kommentare zu dem min-width-Workaround durchgelesen, und siehe da, das Problem mit der Mindestbreite, die größer als 960px ist, wurde das erste mal schon vor knapp drei Jahren von einem User erwähnt.

Stu rät in diesem Fall zu der "transparenten" Version, in der das Problem nicht auftritt. Dieses Modell stammt von Bruno Fassino, der ein eigenes CSS-Projekt CSS tests and experiments betreibt.

Und was soll ich sagen? Mit der unteren (transparenten) Box sieht's bei mir ganz vielversprechend aus ;)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>min-width in IE</title>
<style type="text/css">
* html .container {
        margin-left: -1200px;
        position: relative;
}
/*\*/
* html .container, * html .content {
        height: 1px;
}
/**/

.b1 { height: 1px; background-color: #c00; margin: 0 5px; }
.b2 { height: 1px; border-left: 2px solid; border-right: 2px solid; margin: 0 3px; }
.b3, .b4 { border-left: 1px solid; border-right: 1px solid; }
.b3 { height: 1px; margin: 0 2px; }
.b4 { height: 2px; margin: 0 1px; }

.content {
        border-left: 1px solid;
        border-right: 1px solid;
        padding: 5px;
}
.b2, .b3, .b4, .content {
        border-color: #c00;
}
.content h2, .content p {
        margin: 0;
}
.lf, .rf {
        height: 10px;
        width: 10px;
}
.lf {
        float: left;
        background-color: #00f;
}
.rf {
        float: right;
        background-color: #0f0;
}
.rule {
        width: 1200px;
        background-color: #c00;
        color: #fff;
        margin: 1em 0;
}

.width1 {
        width: 90%;
        min-width: 1200px;
}
* html .minwidth1 {
        padding-left: 1200px;
}
/*\*/
* html .minwidth1, * html .layout {
        height: 1px;
}
/**/
</style>
</head>

<body>

<p>Transparent version:</p>

<div class="width1">
<div class="minwidth1">
<div class="layout">
<div class="container">
        <div class="b1"><!-- --></div><div class="b2"><!-- --></div><div class="b3"><!-- --></div><div class="b4"><!-- --></div>
        <div class="content">

                <h2>{width:90%; min-width:1200px;} includes IE5+</h2>
                <p>This div has a min-width of 1200px and a width of 90%. <span class="lf"><!-- --></span> <span class="rf"><!-- --></span>
                The width can be any percentage and the min-width a px or em value.</p>
        </div>
        <div class="b4"><!-- --></div><div class="b3"><!-- --></div><div class="b2"><!-- --></div><div class="b1"><!-- --></div>
</div>
</div>
</div>
</div>
<div class="rule">this is 1200px wide</div>

</body>
</html>
 
Hi, bei mir klappt es leider noch nicht so ganz :( ich glaub ich mache aber auch noch was falsch.

Ich habe nun folgende Zeile in meine Css Datei dazu geschrieben:
Code: 
.minwidth1 {
        padding-right: 1200px;
		}
.width1 {    
	width: 90%;      
	min-width: 1200px;
	}

.container {
        margin-right: -1200px;
        position: relative;
}
.layout {
        height: 1px;}


Und die div's in meine Startseite geschrieben. Im FF sieht das ganze ganz gut aus. Nur im IE da verschiebt er mir den Text auf der Startseite wieder unter die Buchstaben.
 
Zuletzt bearbeitet:
Du hast zum einen den CSS-Code des Workarounds nicht vollständig, und zum anderen in der falschen Form übernommen:

Code: 
* html .container {
        margin-left: -1200px;
        position: relative;
}
/*\*/
* html .container, * html .content {
        height: 1px;
}
/**/

.width1 {
        width: 90%;
        min-width: 1200px;
}
* html .minwidth1 {
        padding-left: 1200px;
}
/*\*/
* html .minwidth1, * html .layout {
        height: 1px;
}
/**/
Diese CSS-Regeln (ausser der .width1-Selektor) gelten ausschliesslich für den IE bis Version 6, also wird hier der Star-HTML-Hack angewendet, damit die übrigen Browser den Code nicht interpretieren.

Ansonsten müsstest du deine Variante ohne Star-HTML-Hack in eine zweite CSS-Datei auslagern, und sie mit Hilfe eines Conditional Comments den älteren IE-Versionen zuspielen, damit alle übrigen Browser den CSS-Code nicht zu Gesicht bekommen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück