Ho un problema di visualizzazione solo con IE6.( IE 7,Mozilla,Safari ok)
La colonna di destra non s'affianca alla colonna principale ma slitta sotto.
Si verifica con IE 6 soltanto.
So che è bug riconosciuto in IE6 ho provato ad aggiungere pure display inline e overflow hidden come suggerivano alcuni ma persiste lo stesso problema.
Qualcuno sa darmi una indicazione e un'aiuto.
Listato html-------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Casa Vacanza privata nell'Isola di Sant'Antioco</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','731','heigh t','200','align','bottom','title','Sant\'Antioco', 'src','intro2009','quality','high','pluginspage',' http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','intro2009' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="731" height="200" align="bottom" title="Sant'Antioco">
<param name="movie" value="intro2009.swf">
<param name="quality" value="high">
<embed src="intro2009.swf" width="731" height="200" align="bottom" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript></div>
<div id="main" class="clearfix">
<div id="col1"><div id="Titolo"></div>
</div>
<div id="col2">
<div id="TITOLO01"></div>
<div class="urbangreymenu">
<ul>[*]L'Isola
[*]Storia[*]Cultura[*]Ambiente[*]Casa Vacanza[*]Foto[*]Prenota[*]Come arrivare[/list]
</div>
<div id="TITOLO02">
<div class="titolotext">L'isola di Sant'Antioco (km108,9), è la settima isola per estensione del Mar Mediterraneo. E' situata all'estremo sud-ovest della Sardegna ed è collegata alla Sardegna tramite ponte ed istmo artificiale. La sua storia e cultura millennaria, unita alla bellezza delle sue spiagge e dei suoi paesaggi, ne fanno una delle isole più suggestive del Mar Mediterraneo</div>
<div id="TITOLO04"></div>
<div id="navcontainer">
<ul id="navlist">[*]Comune di Sant'Antioco[*]Museo Sant'Antioco[*]Santantioco.info[*]Sulcis Iglesiente[/list]
</div>
</div>
<div id="contatore">
<script type="text/javascript" language="JavaScript" SRC="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=monolocale"></script>
<noscript>
</noscript>
</div>
</div>
</div>
<div id="footer">
[img]logo.png[/img]
<map name="logoMap"><area shape="rect" coords="-4,1,158,60" href="http://www.scatolacreativa.com/" target="_blank">
</map></div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
css-------------------------------------------------------------------------
/* CSS Document */
<style>
/* Clear fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#wrapper { background: #fff; width: 750px; margin: 200px auto 0 auto; padding: 10px 0;overflow:hidden;
}
#header { background: #fff; margin: 0 10px;display:inline }
#main { margin: 10px 0; }
#col1 {
background: #fff;
float:left;
width: 480px;
margin: 0 10px 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #4C4C4C;
font-size: 0.8em;
line-height: 2em;
overflow:hidden;
display:inline;
}
#col2 {
float:left;
width: 240px;
margin: 0 10px 0 0;
background-color: #FFFFFF;
display: inline;
}
#footer {
clear:both;
background-image: url(footer.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 200px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
body {
background-color: #DFDBD3;
background-image: url(background-isola-v2.png);
background-repeat: no-repeat;
background-position: center top;
}
#Titolo {
background-image: url(nav_res.gif);
background-repeat: no-repeat;
background-position: left top;
font-family: verdana, sans-serif;
width: 250px;
height: 20px;
margin-top: 10px;
}
#TITOLO01 {
background-image: url(nav_res_2.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
}
#maratonarte {
background-image: url(nav_res_8.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 15px;
}
#casavacanza {
background-image: url(nav_res_11.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 15px;
}
#fotovacanza {
background-image: url(nav_res_14.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 15px;
}
/*Menu*/
.urbangreymenu{
width: 190px;
margin-top: 20px;
}
.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a{
font: normal 12px Arial;
color: #000000;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.urbangreymenu ul li a:visited{
color: black;
}
.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background-color: #005B9A;
}
</style>
#Titolo.01 {
background-image: url(nav_res.gif);
background-repeat: no-repeat;
background-position: left top;
font-family: verdana, sans-serif;
width: 250px;
height: 20px;
margin-top: 10px;
}
#TITOLO02 {
background-image: url(nav_res_3.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
}
.titolotext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 2.0em;
padding-top: 25px;
border-bottom-width: 0.1em;
border-bottom-style: dotted;
}
#TITOLO04 {
background-image: url(nav_res_4.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
}
#titolostoria {
background-image: url(nav_res_5.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
}
#titolocultura {
background-image: url(nav_res_7.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 10px;
margin-bottom: 10px;
}
#titoloarcheo {
background-image: url(nav_res_6.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 10px;
}
#titoloambiente {
background-image: url(nav_res_9.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 10px;
}
#titolocasa {
background-image: url(nav_res_10.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 10px;
}
#prenota {
background-image: url(nav_res_12.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 10px;
}
#arrivare {
background-image: url(nav_res_13.gif);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 250px;
margin-top: 15px;
margin-bottom: 10px;
}
/*risorse utili*/
#navlist
{
padding-left: 0;
margin-left: 5;
width: 200px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
background-image: url(document.gif);
background-repeat: no-repeat;
background-position:0.5em;
text-indent: 30px;
}
#navlist li a {
color: #000000;
text-decoration: none;
}
#navlist li a:hover {
background-color: #005B9A;
color: #FFFFFF;
}
/*menu ad lenco storia*/
#navlistoria
{
margin-left: 0;
padding-left: 0;
list-style-image: none;
list-style-type: none;
text-indent: 5px;
}
#navlistoria li
{
padding-left: 10px;
background-repeat: no-repeat;
background-position: 0 0.5em;
background-image: url(icon.gif);
margin-left: 20px;
font-weight: normal;
}
#navlistoria ul {
list-style: none;
}
/*Drop shadow img*/
div.imgcontainer{
float: left;
background: url(dropshadow.jpg) no-repeat bottom right;
margin-right: 10px;
padding-top: 0;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 0;
margin-top: 10px;
margin-bottom: 0px;
}
div.imgcontainer img{
display:block;
position: relative;
top: -5px;
left: -5px;
padding:5px;
background-image: url(Sant%27Antioco:%20Lungomare);
}
/*form*/
.cssform p{
width: 300px;
clear: left;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 5%;
padding-top: 5px;
padding-right: 0;
padding-bottom: 8px;
}
.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}
.cssform textarea{
width: 250px;
height: 150px;
}
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/...reepxtest.html
*/
* html .threepxfix{
margin-left: 3px;
}
/*css thumbnails gallery*/
ul#minipics{margin:0;padding:0;list-style-type:none}
ul#minipics li{float: left;margin: 20px;padding: 0 6px 6px 0;
background: url(dropshadow.jpg) no-repeat bottom right}
ul#minipics li img{display: block;
position: relative;top: -5px;left: -5px;
border: 1px solid #ccc;border-color: #ccc #666 #666 #ccc;
padding: 5px}
#logo {
margin-top: 100px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-repeat: no-repeat;
background-position: right;
float: right;
}
#contatore {
margin-top: 430px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
---------------------------------------------------------------------------------------
grazie.
Rispondi quotando
