AAA - Help problema css (credo)

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è cristo santo 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...

Code:

---

@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}

---

In che senso ti sballano i fumetti? A me sembra a posto... :P

mi sballano i fumetti in che senso? li vuoi mettere tutti su una riga?

Credo che il problema sia

#post {
height:700px;
width:870px;
}

forse la with è troppo piccola o i fumetti sono troppo grandi :\

L'unico vero consiglio che ti do è scaricati firebug con mozilla.Se c'è qualcosa di strano nei css quello aiuta abbastanza

nel senso che la prima fila è ok, nella 2° fila 2 sono ok e uno va a capo da solo (ma non su tutti browser e computer... o almeno, io vedo che sul pc di la si vede sballato, faccio uno screen)

così praticamente: http://api.browsershots.org/png/orig...5c40b5ed5e.png

invece dovrebbe essere cos: http://api.browsershots.org/png/orig...5b4adcd0a0.png

ma solo su windows lo fa a quanto pare

@metro ma anche se gli do un <br /> non succede nulla, non vorrei che fosse un problema di "float"... l'unico modo per metterli in fila senza tabelle è "float:left;" che io sappia

Quote:

---

Originally Posted by Mez

nel senso che la prima fila è ok, nella 2° fila 2 sono ok e uno va a capo da solo (ma non su tutti browser e computer... o almeno, io vedo che sul pc di la si vede sballato, faccio uno screen)

così praticamente: http://api.browsershots.org/png/orig...5c40b5ed5e.png

invece dovrebbe essere cos: http://api.browsershots.org/png/orig...5b4adcd0a0.png

ma solo su windows lo fa a quanto pare

@metro ma anche se gli do un <br /> non succede nulla, non vorrei che fosse un problema di "float"... l'unico modo per metterli in fila senza tabelle è "float:left;" che io sappia

---

potrei dirti una cazzata se non ricordo male mettevo un div per separare le due righe con l'attributo clear:both

prova magari funziona

edit: http://forum.html.it/forum/showthread/t-1020675.html

eh ma io devo metterli uno difianco all'altro, intendi a ogni striscia un clear:both?

Quote:

---

Originally Posted by Mez

eh ma io devo metterli uno difianco all'altro, intendi a ogni striscia un clear:both?

---

si dopo i primi 5 fumetti fai un clear:both

e poi metti gli altri 3 con il float left.Però così a teoria non so se funziona dovresti provare, mo stacco che torno a casa

Quote:

---

Originally Posted by Metrox

si dopo i primi 5 fumetti fai un clear:both
e poi metti gli altri 3 con il float left.Però così a teoria non so se funziona dovresti provare, mo stacco che torno a casa

---

O, sul quinto fumetto aggiungi un style="clear:right", così:

Code:

---

<p class="multi" style="clear:right">
                <img src="works/moor.png" alt="moor" title="giacomoor" /><br />
                <span class="titoletto">LUGLIO 2009</span><br />
                <a href="http://www.giacomoor.com/" target="_blank">Progetto: Giacomo Moor</a><br />
                <span class="subtitoletto">tipo: web</span>
                </p>

---

Non sono sicuro che funziona però ... Fai una prova! :nod:

si vede con problemi anche su firefox sotto linux.

dovrei aver risolto con il <p class="clear"></p> avevo pure scazzato un nome nel css, al posto di visibility ho messo invisibility...
Dovrebbe essere a posto ora, faccio dei test, grazie comunque
grazie metrox & crilin

Quote:

---

Originally Posted by Mez

dovrei aver risolto con il <p class="clear"></p> avevo pure scazzato un nome nel css, al posto di visibility ho messo invisibility...
Dovrebbe essere a posto ora, faccio dei test, grazie comunque
grazie metrox & crilin

---

Ora funziona bene.