problema firefox-table less

[Darkstorm89]

Ciao a tutti!
Ho un problema con la nuova versione del mio sito, in pratica ho voluto cambiare impostazione, mettendo 2 colonne, il menu laterale molto largo, sullo stile dei recenti siti di grafica (una colonna con 2 colonne all'interno), il tutto in table less.
Con IE tutto perfetto (almeno con la 7.0) ma con firefox mi sballa tutto, ecco il link innanzitutto
sito
Come vedete è tutto sballato con firefox, il codice html del menu è il seguente:

<p class="menu_titles">Final Fantasy</p>
<div class="submenu">
Final Fantasy VI

Final Fantasy VIII

Final Fantasy X

Final Fantasy XI

</div>
<div class="submenu">
Final Fantasy VII

Final Fantasy IX

Final Fantasy X-2

Final Fantasy XII

</div>
<p class="menu_titles">Extra Saga</p>
<div class="submenu">
Kingdom Hearts

Kingdom Hearts II

</div>

mentre il css è questo:

#menu {
width: 240px;
padding-left: 2px;
padding-top: 2px;
float: left;
margin-top: 50px;
background-color: #CEEDC6;
border: 1px solid #469832;
}

#menu img {
margin-bottom: 2px;
}

#menu p {
margin: 0%;
}

.submenu {
padding-left: 5px;
width: 110px;
float: left;
margin-bottom: 5px;
}

.menu_titles {
background-image: url(http://www.crystalmemories.it/nvff/img/submenu.jpg);
width: 238px;
display: block;
height: 15px;
text-align: center;
}

ho provato di tutto ma nn risolvo ;_;

[ricman]

Originariamente inviato da Darkstorm89
Con IE tutto perfetto (almeno con la 7.0) ma con firefox mi sballa tutto,

Io inizierei togliendo il float:left dal "submenu". Poi aggiusteri anche la semantica e tutti i particolari...

[Darkstorm89]

in che senso semantica °_°?

cmnq se tolgo il float left me li mette uno sotto l'altro ^^'''

[gadavitor]

<!--
#menu {
width: 240px;
padding-left: 2px;
padding-top: 2px;
float: left;
margin-top: 50px;
background-color: #CEEDC6;
border: 1px solid #469832;
}

#menu img {
margin-bottom: 2px;
}

#menu p {
margin: 0%;
}

.submenu {
padding-left: 5px;
width: 110px;
/*float: left;*/
margin-bottom: 5px;
}

.menu_titles {
background-image: url(http://www.crystalmemories.it/nvff/img/submenu.jpg);
width: 238px;
display: block;
height: 15px;
text-align: center;
}
-->
</style>

<p class="menu_titles">Sito</p>
<div class="submenu">
Final Fantasy VI

Final Fantasy VIII

Final Fantasy X

Final Fantasy XI

</div>
<p class="menu_titles">Final Fantasy</p>
<div class="submenu">
Final Fantasy VII

Final Fantasy IX

Final Fantasy X-2

Final Fantasy XII

</div>
<p class="menu_titles">Extra Saga</p>
<div class="submenu">
Kingdom Hearts

Kingdom Hearts II

</div>


Confermo che è necessario togliere "float left", funge, l'ho appena testato solo col codice incollato.

Se nella tua pagina non va ancora, allora il problema sta in qualche altro tag della pagina.

Dimenticavo, mancava <p class="menu_titles">Sito</p>.

[Darkstorm89]

ehm, forse non ho spiegato bene cosa intendo, io vorrei un effetto come quello che ottengo lasciando il float su IE, ovvero


invece senza float rimane così con firefox


magari però sbaglio io °_°

[kadriokur]

hi very thanks

[Darkstorm89]

eh? °_°

mi sa ke questo è uno spammer >.>"