CSS-IE-Workaround für „min-width”

Autor: admin - 22. Mai 2006

Um HTML-Elementen eine feste Minimalbreite zu verleihen genügt in der Regel folgende Anweisung:

<html><head>
<style>
p { min-width:800px; }
</style>
</head>
<body>
<p>bla bla bla bla bla bla bla</p>
</body>
</html>

Von der Regel ausgenommen, man höre und staune, der Internet Explorer.
max-width, min-width, max-height und min-height sind dem guten Stück Mircosoftscher Programmiergeschichte ein Buch mit 7 Siegeln.

Relativ Komfortable Abhilfe gibt es auf www.svendtofte.com

Der hier vorgestellte Lösungsansatz funktioniert sehr gut und basiert auf der relativ wenig bekannten expression() Eigenschaft des Internet Explorer. (Weitere Infos bei MS: About Dynamic Properties)

// MINIMALE BREITE ANGEBEN:
<style>
p {
min-width:800px; //Für alle außer IE
width:expression(document.body.clientWidth > 800? "800px": "auto" ); //Extraeinladung für IE
}
</style>

Die Varianten u.a. für „height” Varianten

// MINIMALE HÖHE: (Beispiel)
height:expression( this.scrollHeight < 300? "300px" : "auto" );

// MAXIMALE HÖHE: (Beispiel)
height:expression(this.scrollHeight > 300? "300px" : "auto" );

// MAXIMALE BREITE: (Beispiel)
width:expression(document.body.clientWidth > 800? "800px": "auto" );

Weitere Details und Erklärungen zur Thematik:

Kategorie: Tipps & Tricks |

1 Kommentar »

  1. Adam Siwy sagt:
    am 26. Mai 2006 um 14:55 Uhr

    die expressions lassen sich auch kombinieren. so ist auch eine if ifelse else bedingung möglich:

    if(width800px
    elseif(width>1226)
    –>1200px
    else
    –>auto

    entspricht:

    width:expression(document.body.clientWidth 1226? “1200px”:”auto”);

RSS feed für Kommentare dieses Beitrags.
TrackBack URI

Kommentieren