Min-width su IE6
This entry was posted on October 31st, 2008 and is filed under CSS, Grafica, Web Designing.
Qualche tempo fa vi parlai di come impostare un’altezza minima per un div che funzionasse anche per IE6.
Oggi invece vi voglio presentare un metodo per impostare una larghezza minima che funziona anche con i browser vecchi di casa Microsoft. Purtroppo il metodo è più macchinoso rispetto all’altezza e richiede di creare due div in più. In rete si trovano un sacco di altri metodi che utilizzano Javascript o espressioni condizionali all’interno del CSS ma non tutti funzionano o impediscono layout che usano come unità di misura gli em.
Questo metodo, segnalato da CSSPlay (e già è una garanzia), risulta essere il più pulito e il più stabile rispetto a tutti gli altri. Vi posto in basso un esempio del funzionamento creato da andrea.paiola su HTML.it.
</code>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
body {background:#fff; font-family:sans-serif; font-size:100%; color:#000}
/* per tutti i browsers seri */
.width {width:50em; min-width:800px;}
/* per IE6 */
* html .minwidth {border-left:800px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-800px; position:relative; float:left; z-index:2;}
.container{background-color:#FF0000}
</style>
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="container">
<p>Contenuti</p>
</div>
</div>
</div>
</body>
</html>
<code>
Benvenuto! Mi chiamo