AAA- problema sito, forse css...

[Eresia]

Sto finendo un sito che si trova a quest'indirizzo: http://www.fishdesign.it/fish/

prima di metterlo definitivamente online (devo consegnarlo dopodomani) vorrei capire il perchè nel primo "box" mi sballano i fumetti... sul mac no, ma sui browser dei pc si...
voi come lo vedete? Soluzioni?
E' giù tutto validato xhtml & css ma quel problema non riesco a risolverlo...

questo è il css, chi ha sbatti di leggerlo...

@charset "UTF-8";
/* CSS Document */
html, body{ 
margin:0; 
padding:0; 
text-align:center; 
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-color:#090706;
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
font-size: 0.9em;
} 
#pagewidth{ 
width:870px; 
text-align:left;  
margin-left:auto; 
margin-right:auto;  
} 
#header{
height:210px; 
width:870px;
} 
#maincol{  
width:100%; 
}
#footer{
height:50px; 
clear:both;
color:#fff;
font-size:75%;
} 
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
/*immagini varie*/
img#logo {float: left;margin: 15px 15px 15px 15px;}
img#p_works {padding: 10px 0px 0px 10px;}
img#p_about {padding: 10px 0px 0px 10px;}
img#p_contact {padding: 10px 0px 0px 10px;}
img.top {padding: 30px 10px 0px 0px; margin: 0px 0px 0px 630px; }
/*menu*/
#menu ul { list-style:none; margin:0; padding:0 10px; float:right }
#menu li { float:left; }
#menu li a span, #menu li a em { display:none; }
#menu li a { display:block; height:153px; width:150px; background-position:center top; }
#menu li#works a, #menu li#works a:hover span { background-image:url(images/works.png); background-repeat:no-repeat; }
#menu li#about a, #menu li#about a:hover span { background-image:url(images/about.png);  background-repeat:no-repeat; }
#menu li#contact a, #menu li#contact a:hover span { background-image:url(images/contact.png);  background-repeat:no-repeat; }
/* post */
#post {width:870px; height:700px;}
#post p { padding: 5px 5px 5px 5px; text-align:left }
#post2 {width:870px; height:500px;}
#post2 p { padding: 30px 30px 30px 30px; text-align:left }
#post3 {width:870px; height:300px;}
#post3 p { padding: 30px 30px 30px 30px; text-align:left }
/*classi*/
.titoletto {color:#fff; font-size:12px; border-top:#ccc dotted 1px; padding-top:5px}
.subtitoletto {color:#999;font-size:11px;}
/*links p*/
p a {color:#fff;background-color:#F00; font-size:12px;text-decoration:none}
p a:hover{color:#ccc; background-color:#000; font-size:12px;}
/*classi clear*/
.bio {width:310px;float:left;margin-right:50px;}
.contatti {width:280px;float:left;margin-right:50px;}
.multi {width:150px;float:left;}
.clear-invisible {clear:both; invisibility:hidden}

[kk3z]

manca la classe .clear
devi aggiungere un <p class="clear"></p> dopo il quinto <p class="multi">
invisibility:hidden non esiste, forse intendi visibility:hidden;, in ogni caso non è necessaria

sul mac si vede in un altro modo solo perchè il testo del terzo <p class="multi"> (Progetto: Funk the System!) non va su due righe (a causa del font diverso che il mac usa rispetto al pc).

[Eresia]

grazie! ora sembra funzionare su tutti i browser!