Div che non circonda il menu orizzontale

[Alhazred]

Sto realizzando un template, ho quasi finito, ma ho un problema col menu orizzontale

In alto sulla pagina ho
<div id="topbar">
   <jdoc:include type="modules" name="top" style="xhtml" />
</div>

In questa posizione ho messo sia il modulo "cerca" che un menu orizzontale.
Il modulo "cerca" viene correttamente visualizzato con una riga bianca attorno, mentre il menu no.
Con firebug ho provato ad inserire all'interno del menu un tag <h3> e subito il div si è adattato alle dimensioni del menu, quindi a quanto pare non capisce quanto è grande il menu essendo solo una lista e non avendo altri tag.

Per ora il menu appare così

come potete vedere il div che dovrebbe circondare il menu è alto 1px e il bordo bianco passa sotto al menu.

Come faccio a sistemare questo problema?
Alla classe .moduletable non posso aggiungere float:left (che risolverebbe) altrimenti si sballa la visualizzazione degli altri moduli.
C'è qualcosa che posso fare al css del menu?

la classe moduletable è

Codice: [Seleziona]

.moduletable  {
margin-top:5px;
background-color:#020086;
padding:0px;
border: 1px solid #fff;
}

Il CSS del menu è questo

Codice: [Seleziona]

.moduletable > ul
{
height:30px;
padding-left: 0;
margin:0;
background-color: #020086;
color: White;
float: left;
width: 100%;
font-family: courier new, arial, helvetica, sans-serif;
}

.moduletable > ul li { display: inline;}

.moduletable > ul li a
{
height:18px;
padding: 6px 1em;
background-color: #020086;
color: white;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

.moduletable > ul li a:hover
{
background-color: #0400D4;
color: #fff;
}


[jonxduo]

prova a modificare così:

Codice: [Seleziona]

<div id="topbar">
   <jdoc:include type="modules" name="top" style="xhtml" />
<div class="clr"></div>
</div>

css:

Codice: [Seleziona]

.clr{clear:both;}


[Alhazred]

Fatto, ma resta uguale.

[Alhazred]

Il problema non è il div topbar, ma il div moduletable generato da Joomla, è quello che non viene esteso, dunque l'aggiunta del div clr risulta esterno, per questo non ha effetto.

C'è un modo per risolvere questa situazione?

[jonxduo]

l'altra volta ero impegnato ed ho risp di fretta... allora

inizia con li sostituire così:

Codice: [Seleziona]

#moduletable > ul
{
height:30px;
padding-left: 0;
margin:0;
background-color: #020086;
color: White;
float: left;
width: 100%;
font-family: courier new, arial, helvetica, sans-serif;
}

#topbar > ul li { display: inline;}

#topbar > ul li a
{

è più corretto, in questo modo se vuoi inserire un secondo menù in un altra posizione non avrai problemi...

poi cambia anche .modultable (non toccare le classi di joomla se non sai proprio bene bene quello che fai)

Codice: [Seleziona]

#topbar  {
margin-top:5px;
background-color:#020086;
padding:0px;
border: 1px solid #fff;
}

poi fai come ti hogià detto:

Codice: [Seleziona]

<div id="topbar">
   <jdoc:include type="modules" name="top" style="xhtml" />
<div class="clr"></div>
</div>


Codice: [Seleziona]

.clr{clear:both;}

vedrai che funziona... ;P fammi sapere