Eigenschaft min width

[buddha]

Hallo,
Auf dem Bild sieht man diese "Fehlermeldung". Kann man min-width auch anders deklarieren?
Gruß

 

[Maik]

Hi,

Stu Nicholls hat da einen Workaround für den IE parat -> http://www.cssplay.co.uk/boxes/minwidth.html

 

[buddha]

Hi,
Wenn ich das richtig verstanden habe soll da ein äusserer Container den inneren Container einfassen - habe es mit verschieden Angaben probiert aber keine Veränderung. Der Code ist validiert-keine Fehler

 

[Maik]

Dann wirst du wohl etwas übersehen haben, denn die Beispiele funktionieren im IE.

Für weitere Hinweise solltest du mal deinen Quellcode zeigen.

 

[buddha]

Hier der Code, ohne die Änderungen, will eigentlich nur verhindern mit Angabe min-width das wenn man das Fenster zu klein macht das Layout "zerstört " wird.

#container { 
width: 65%; 
border:#776655 ridge 1px;
margin: 40px auto auto auto;
background-color:#FFFFFF; 
min-width:629px;}
#content {
background-repeat:no-repeat;
background-position:center;
position: relative;
left: -55px;
top: 20px;}
p{ 
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px; 
color: #2d3930; 
padding:0 150px 0 150px;
text-align:left;}
.h3top { margin-top:50px;}
.ptop { margin-top:25px;}
.ptopprojekte { margin-top:123px;}
.pbottom { margin-bottom:100px;}		
h3,h1 { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:16px; 
color: #2d3930; 
letter-spacing: 1px; 
padding-top:45px; 
padding-left:150px; 
font-weight: bold;
text-align:left;}
body { 
/*background-color: #f0eee8;}*/ 
background-image:url(../bilder/kachel.gif); 
background-repeat:repeat-y;}
.Stil1 { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 16px; position: 
relative; top: 0px; }
#butterfly {
float:left;
position: relative;
left: -100px;
top: 234px;
}
.Stil8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large;}
/*Infobox*/
#box a { 
margin-left:100px; 
color:#ffffff; text-align:center;
background:#b2ac73;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:165px;
padding:10px 12px 10px 10px;
border:1px solid #776655;}

#box a:hover {
color:black;
background:#ddd8b7;}

#box a span {display:none;}

#box a:hover span {
display:block;
width:155px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid #776655;
margin-top:10px;
padding:5px;}/*abstand bild zur border*/
.validcss { position:relative; left:150px; margin-top:50px; margin-bottom:50px;}
.validxhtml { position:relative; left:250px; top:-67px; }

 

[Maik]

Wie ich vermutet habe, hast du die erforedrlichen Angaben für den IE vergessen.

Vergleich nochmal den CSS-Code in der Variante http://www.cssplay.co.uk/boxes/width3.html

 

[buddha]

Habe mal die angegebene Seite im Editor geöffnet da kam bei min-width die gleiche Fehlermeldung wie auf dem Foto. Komme hier nicht weiter, weiss auch nicht wo ich hier was einfügen soll. Stört mich halt, auch wenn es validiert ist.
Gruß

 

[Maik]

Dass dein verwendeter HTML-Editor bei den Beispielen ebenfalls auf die mangelnde Unterstützung der min-width-Eigenschaft von Seiten des IE5.5 und IE6 hinweist, ist wohl klar.

Es ist aber keine Fehlermeldung, sondern lediglich ein "Hinweis" vom Editor, denn min-width:...px ist "valides" CSS, nur unterstützen die genannten IE-Versionen diese, wie manch andere CSS-Eigenschaft, eben nicht.

Zur Umsetzung des Workarounds.

Diesen CSS-Code

/* for all browsers that understand min-width */
.width {width:50%; min-width:400px; margin:0 auto;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:400px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-400px; position:relative; float:left; z-index:2; text-align:left;}

mußt du auf deine Seitenverhältnisse anpassen, und dieses Markup

<div class="width">
    <div class="minwidth">
        <div class="container">
            <!-- Hier folgt der Inhalt -->
        </div>
    </div>
</div>

im HTML-Dokument einsetzen - fertig.

Die Box .width entspricht in deinem Code der Box #container.