Fast bredd på meny.

Jag undrar hur jag kan få en viss fast bredd oavsett innehåll på denna meny.
Som det är nu blir vissa av menyerna bredare än de andra pga att de innehåller längre ord.
Går det att få att även de menyer som innehåller färre bokstäver ändå får samma bredd?

CSS mall:

h1 {font: 150% Verdana; color: #CCCCCC; margin: 0;}

body {padding: 0; margin: 0;}
#content{margin: 1em 1em 1em 1em; padding: 0; float: left;}

#menycontainer{float: left; margin: 1em 0 0 1em; padding: 0;}
#meny{margin: 0; padding: 0; list-style-type: none; font: 70% Verdana, Helvetica, sans-serif;}
#meny a{width: 5em; text-decoration: none; display: block; padding: 0.3em 2em; margin-bottom: 0.8em; border: 1px solid #990099;}
#meny a:link{color: #990066;}
#meny a:visited{color: #990099;}
#meny a:hover{background: #FFEAFF;}
#meny a#current{font-weight: bold;}

Eller är det kanske inte mallen som styr detta?
Är lite nybörjare

mvh

Lägg till "display:block;" (utan citat förstås) till varje meny id.
P.S. Måste du använda så mikroskopiskt liten text i menyn? :)

Det är alltså här någonstans jag ska lägga in "display:block;" ?

<div id="menycontainer">
<ul id="meny">
<li id="active"><a href="sida1.htm" id="current">Meny 1</a></li>
<li><a href="sida2.htm">Meny 2</a></li>
<li><a href="sida3.htm">Meny 3</a></li>
<li><a href="sida4.htm">Meny 4</a></li>
<li><a href="sida5.htm">Meny 5</a></li>
</ul>
</div>

Och kan jag bestämma hur bred jag vill ha menyn i t ex pixlar?

nej

display:block

ska vara i mallen
kolla min meny om du är nyfiken på var man kan sätta vidd etc...

.navcontainer
{
width:160px; [blue]<<-- här är vidden på själva menyn[/blue]
padding: 0 0 1em 0;
margin-top:50px;
margin-bottom: 1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:transparent;
color: #c00;
float:right;
}

.navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

.navcontainer li
{
margin: 0;
}

.navcontainer li a, .navcontainer li a:active, .navcontainer li a:visited
{
display:block; [blue]<<--- här sitter display:block[/blue]
padding: 5px 5px 5px 0.5em;
background-color:transparent;
color: #663;
text-decoration: none;
width:100%; [blue]<<--- här är vidden på länkarna[/blue]
}

html>body .navcontainer li a { width: auto; } [blue]<<--- här är en vidd-fix[/blue]

.navcontainer li a:hover
{
color: #c00;
text-decoration:underline;
}

Lasse H skrev:

Det är alltså här någonstans jag ska lägga in "display:block;" ?

<div id="menycontainer">
<ul id="meny">
<li id="active"><a href="sida1.htm" id="current">Meny 1</a></li>
<li><a href="sida2.htm">Meny 2</a></li>
<li><a href="sida3.htm">Meny 3</a></li>
<li><a href="sida4.htm">Meny 4</a></li>
<li><a href="sida5.htm">Meny 5</a></li>
</ul>
</div>

Och kan jag bestämma hur bred jag vill ha menyn i t ex pixlar?

Sorry, jag var lite snabb och otydlig i mitt svar. "display:block;" ska du ha i mallen, där du har den nu (#meny a) så att alla varianter av "a" också tar upp det. Om det inte fungerar, måste du titta på vad har för variabler och värden i övrigt.

Exempelvis har du bredden för "#meny a" till bara 5em och då du har en vänster och höger "padding" på 2em innebär det att det bara finns 1em kvar för IE att använda till texten. IE lägger ju paddingen innanför den totala angivna bredden, medan Mozilla/Firefox lägger till paddingen och boxen blir då bredare än dom 5em som du angett. Vill du centrera texten i blocket, är det bättre att använda text-align:center;

Men bredden måste också anpassas till det längsta ordet i menyn, så att den är tillräckligt bred och så att övriga menyn med kortare ord blir lika långa.

:stud

Okej, tack för svar, jag tror jag börjar få kläm på det här (kanske).

Men hur får jag "menyknapparna" att lägga sig tätare på höjden?
Och hur får jag hela menyn att lägga sig längre till vänster?

Se bifogad fil.