Parameters min width for ie6 and max-width for ie6 are often used in CSS layer coding since it allows to set minimum or maximum width of the external layer. Such a limitation is necessary in order to restrain your browser from changing width of external blocks when the browser window size is being changed as well.
Elsewise the layers start deforming the structure and the original modular grid of the page tears down.
Let's consider a case when we settle the maximum width of the screen in details.
Browser Internet Explorer6 (IE6) unlike other popular browsers does not support style attribute min-width that's why we have to use other means for coding in this web browser.
Just to notice that for Internet Explorer7 this problem was eliminated in full and this version of the browser supports min-width attribute.
The analogue of min-width in IE6 can be dynamic expressions inserted in CSS. These expressions allow with the help of Java-based scripts to change the meaning of style parameters. This way it is enough to set the width of the browser window and if it is less than a fixed width, we shall just to put a new value of the container (block) width.
#block{
min-width:650px; /*page width for the rest of the browsers*/
width:expression(document.body.clientWidth > 650? "100%" :"650px"); /* for ie*/
}At the beginning we set style parameter width, and after the colon we set a key word "expression". In parentheses there is a so called ternary operator, and here is the way it is interpreted. If the width of the browser window (document.body.clientWidth) is more than 650 pixels, so as the value of width we put 100%, otherwise width will have the value of 650px.
Since in the current example we use JavaScript syntax, then the validator will determine errors in the line that contains expression. Dynamic expressionsare not included in CSS specification and are peculiar to Internet Explorer. In addition there must be JavaScript support available in the browser otherwise the exp lame will not be working.
The same way max-width for IE6 works:
#block{
min-width:1000px; /*page width for the rest of the browsers*/
width:expression(document.body.clientWidth < 1000? "100%" :"1000px"); /* for ie*/
}Min-width and max-width for ie6 simultaneously:
#block{
min-width:650px; /*div width for the rest of the browsers*/
min-width:1000px; /*div width for the rest of the browsers*/
width:expression(document.body.clientWidth < 650? "650px" : document.body.clientWidth > 1000? "1000px" : "auto"); /* for ie*/
}Min-height for IE6:
#block{
min-height:111px; /*page width for the rest of the browsers*/
-height:111px /* for IE6 it’s enough since it takes "height" as min-height*/
min-height:111px;
height:auto !important;
height:111px; /*last 3 lines are for IE7*/
}Close