[css crossbrowser] menù orizzontale impossibile!

[Gunn]

devo realizzare una barra contenente un menu lunga quanto la finestra, solo che non ci riesco, secondo me non c'è soluzione a meno di non usare qualche hack

il codice che ho è

<div class="menu">
Pagina Principale
Pagina Principale
Pagina Principale
</div>

(è solo una prova semplificata, dopo userò UL)

div.menu
{
background-color:green;
width:100%;
}

div.menu a
{
background-color:green;
padding:5px;
border-right:1px black solid;
display:block;
float:left;
}

con internet explorer si vede come vorrei
però su mozilla si vede correttamente, ossia il div container, dato che contiene solo elementi float, non si allarga a seconda del contenuto
adesso come faccio ad avere lo stesso risultato di ie su mozilla?

io avrei usato display:table table row e table cell, che è il metodo corretto ( al contrario di float) solo che non è supportato da internet explorer

inline neanche a dirlo, i padding e i margin non vanno quindi niente
ho provato a sparare nella soluzione sopra un div clear both ma per qualche oscuro motivo non va... cosa mi consigliate?

grazie 1000!

[Gunn]

ho risolto, non so come ma ci sono riuscito, anche se il risultato è abbastanza seccante
<br style="clear:both;" /><div style="clear:both;"></div>
altrimenti neanche per il piffero... vabeh! meglio di niente

[Gunn]

riuppo la discussione
è impossibile fare questo menu utilizzando UL

infatti il codice sarebbe
<ul>[*]<a></a>[*]<a></a>[*]<a></a>[*]<a></a>[*]<a></a>
<br style="clear:both" />[/list]

naturalmente il tag br lì non è concesso: consigli?

[thomas_anderson]

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
display: inline; /* ie5+  win */
float: left;
margin: 0 0.5em;
padding: 0;
}

a {
display: block;
width: 5em;
float: left;
padding: 0.2em 0;
margin: 0;
text-align: center;
font-weight: bold;
text-decoration: none;
}

[Gunn]

Originariamente inviato da thomas_anderson
[CODE]

perchè la gente non legge

grazie per la risposta, ma a me serve che il background dell'UL sia pari al background dei li
con il tuo codice:

<style>
ul {
margin: 0;
padding: 0;
width: 100%;
background-color:red;
}

li {
display: inline; /* ie5+ win */
float: left;
margin: 0 0.5em;
padding: 0;
}

a {
display: block;
width: 5em;
float: left;
padding: 0.2em 0;
margin: 0;
text-align: center;
font-weight: bold;
text-decoration: none;
}

</style>

<ul>[*]ddd[*]ddd[*]ddd[*]ddd[*]ddd
<br style="clear:both;" />[/list]

[thomas_anderson]

perchè la gente non prova? per avere l'effetto che vuoi tu, imposti il background per <ul> e lo lasci così per gli altri (ereditarietà).

[Gunn]

Originariamente inviato da thomas_anderson
perchè la gente non prova? per avere l'effetto che vuoi tu, imposti il background per <ul> e lo lasci così per gli altri (ereditarietà).

allora scusa, forse non mi sono spiegato io, voglio ottenere questo risultato

<style>
div.menu
{
background-color:green;
width:100%;
}

div.menu a
{
background-color:yellow;
padding:5px;
border:1px black solid;
margin:2px;
display:block;
float:left;
}
</style>
<div class="menu">
Pagina Principale
Pagina Principale
Pagina Principale
<br style="clear:both" />
</div>


utilizzando ul li e a

non credo che si possa portare l'ul al livello dei lì senza usare un clear

[Gunn]

up

[Gunn]

up

[Gunn]

up