Problema Safari, il contenuto eccede il content

[Alex Leamington]

Ciao a tutti.
Sto sviluppando il mio sito personale e nel frattempo lo sto testando con FireFox e Safari. Il problema nasce nella pagina "Clienti" in quanto, dopo aver inserito una serie di ul e li, il contenuto ha cominciato ad eccedere rispetto al contenitore. In pratica esce fuori dal box con sfondo bianco e si trova "libero" su sfondo grigio creando un effetto ovviamente indesiderato. Questo è il codice CSS delle liste

/* Column Styles */
ul.columns {
	width: 825px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 148px;
	float: left; display: inline;
	margin: 10px; padding: 0;
    position:relative;
}

ul.columns li.primo {
	width: 148px;
	float: left; 
	display: inline;
	margin-top: 10px; 
	padding: 0;
	margin-left:0px;
	position: relative;
}

ul.columns li:hover {z-index: 99;}

/* Thumbnail Styles */
ul.columns li img {
	position: relative;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 Specific */
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* Details Style */
ul.columns li .info {
	position: absolute;
	left: -10px; 
	top: -10px;
	padding: 158px 10px 20px;
	width: 148px;
	display: none;
	background: #eee;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;
}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
	 padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

#others {
display:block;
float:left;
margin-top:20px;
width:665px;
margin-left:-15px;
position:relative;
height:auto;
}

#others li {
float:left;
margin-top:0px;
list-style-type:none;
width:105px;
height:20px;
padding:5px;
/*border:1px solid #000;*/
margin:3px;
margin-left:15px;
padding-left:5px;
border-top:2px solid #ccc;
border-bottom:5px solid #eee;
}

#others li:hover {
border-bottom:5px solid #4CB5FF;

}

#others ul {
margin-top:0px;
display:inline;
}

#others a{
width:105px;
height:auto;
padding:5px;
}

E questo il corrispettivo HTML

<ul class="columns">
    <li class="primo">
    	[img]img/xxx.gif[/img]
        <div class="info">
            <h2>Title</h2>
            

Short Description</p>
        </div>
    
	[*]
    	[img]img/xxx.gif[/img]
        <div class="info">
            <h2>Title</h2>
            

Short Description</p>
        </div>
    
	[*]
    	[img]img/xxx.gif[/img]
        <div class="info">
            <h2>Title</h2>
            

Short Description</p>
        </div>
    
	[*]
    	[img]img/xxx.gif[/img]
        <div class="info">
            <h2>Title</h2>
            

Short Description</p>
        </div>
    [/list]
<div id="others">
<ul>[*]xxx
...[/list]
</div>

Sono sicuro che il problema risieeda qui in quanto lo sfasamento è avvenuto solo su safari e solo dopo aver inserito queste liste. Per completezza aggiungo che il div contenitore è impostato così

#talking {
        padding-top:20px;
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
	/*padding-bottom:20px;
	border-bottom:1px solid #ccc;*/
}

Sebbe questo non sia comunque il wrapper generale. Qualcuno ha idea del perchè Safari faccia il cretino? Ho dcercato un pò su internet ma apparte qualche utente col mio stesso problema non ho trovato ne soluzioni ne consigli. HeLLLp

[mucu]

dal codice che mostri non capisco il problema
metti un link alla pagina incriminata e uno alla pagina che va bene