Problemer med størrelse på en rollover-meny

[Svinat]

Jeg kom over denne her for en stund siden, og nå tenkte jeg at jeg ville prøve den. Alt funker fint til nå, det eneste er problemet med størrelsen.

 

For det første er lengden lik i Opera og Firefox, men den er kortere i IE. Greit nok, IE fuc*ker opp det meste, så det betyr kanskje ikke så veldig mye.

 

Hovedproblemet er lengden på knappene. Jeg vil at den skal være 500px på knappene, akkurat slik som logoen og hovedboksen med tekst. Jeg har satt div-en til størrelse 500px, men det eneste stedet er her:

 

#navlist a { padding: 3px 10px; }

Altså på den borterste der det står 10px. Det går greit nok, selv om det blir forskjellig størrelse i IE, men det er litt kjipt å måtte justere dette for hver gang jeg legger til/fjerner/endrer en knapp.

 

Det jeg vil da er egentlig at den justerer størrelsen på knappene selv etter tekstinnholdet og stopper på 500px, om det er mulig. Her er koden som jeg bruker:

 

body {
background-color : #BF6900;
}
#boks {
       width: 500px;
background-color : #008DE5;
margin: 0 auto;
padding-top: 0px;
}
#logo {
       width: 500px;
       background-color: none;
       margin: 0 auto;
       padding-top: 0px;
}
p.tekst {
       text-align: left;
       font-size: 16px;
       font-family: arial;
       color: #005E99;
}
#navcontainer {
       width: 500px;
       background-color: none;
       margin: 0 auto;
       padding-top: 0px;
}
ul#navlist {
       margin: 0 auto;
       padding-left: 0;
       padding-top: 0px;
       white-space: nowrap;
}
#navlist li {
       margin: 0 auto;
       display: inline;
       list-style-type: none;
}
#navlist a { 
       margin: 0 auto;
       padding: 1px 22px;
}
#navlist a:link, #navlist a:visited {
       color: #005E99;
       background-color: #008DE5;
       text-decoration: none;
       margin: 0 auto;
}

#navlist a:hover {
       color: #008DE5;
       background-color: #005E99;
       text-decoration: none;
       margin: 0 auto;
}

 

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

 

Takk for all hjelp.

[Arve Systad]

Usikker på om eg forstår problemstillinga di, men du vil truleg ikkje få nettlesarane til å tilpasse lista til 500px i breidden automatisk. Ein knapp vil enten ha størrelse ut i frå innhald, eller ein fastsatt størrelse frå di side.

 

Hugs då på at total breidde på eit element er lik 2xPadding + 2xMargin + 2xBorder + Width

[Svinat]

Joda, å sette størrelsen på knappene burde gjøre susen, men så vet jeg ikke hvordan jeg gjør det da. Det er jo egentlig ikke knapper, bare tekst med bakgrunnsfarge og en url.