Salve Amici,
Sto Costruendo un Layout liquido a 2 colonne con i CSS.
Con Firefox tutto e OK, Ma con Internet Explorer Iniziano i Dolori, per i seguenti motivi:
- Non Riesco a dare una larghezza minima al contenitore, ho provato ed inserire questo hack per IE sotto la riga di inclusione del css:
Ma niente da Fare.codice:<!--[if lte IE 6]> <style type="text/css"> div#contenitore{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")} </style> <![endif]-->
- Non Riesco a centrare il testo del div contenuti.
Come posso risolvere questi problemi di compatibilità ?
Grazie di Cuore !
File: prova.htm
codice:<!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" lang="it"> <head> <title>Beta 0.1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all">@import "css/stile.css";</style> <!--[if lte IE 6]> <style type="text/css"> div#contenitore{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")} </style> <![endif]--> </head> <body> <div id="contenitore"> <div id="testata"></div> <div id="menu">Menu</div> <div id="contenuti"> Qui tutti i Contenuti del Sito</p></div> <div id="navigazione"></div> </div> </body> </html>
File: stile.css
codice:html, body { margin: 0px; padding: 0px; } body { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../images/bg.gif); text-align: center; } #contenitore { background-color: #FFFFFF; text-align: left; margin: 0 auto; width: 85%; min-width: 760px; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-left-color: #CCCCCC; } #testata { height: 100px; background-color: #FFCC99; } #menu { background-color: #FFFFCC; width: 200px; height: 400px; float: left; } #contenuti { background-color: #CCCCCC; display: inline; text-align: center; width: auto; } #navigazione { background-color: #CC6600; clear: left; height: 20px; } p { margin: 0px; padding: 0px; }
Rispondi quotando
