Scrollbar funker i FF og IE, men ikke i Opera

[Kenneth Dammyr]

Hei

 

Trykk på linken på denne siden: Link

Åpne deretter alle kategoriene.

 

 

Den funker slik vi vil i FF og IE, men i Opera kommer det ingen scrollbar. Noen som har forslag som fikser dette?

 

(Jeg har brukt "overflow-x" og "overflow-y" i CSS-en, som tydeligvis er neste generasjonsgreier, kan det ha noe med saken å gjøre?)

[PT]

overflow: auto; på #meny burde vel holde?

[the_fire]

Problemet da er at horisontal scrollbar kommer opp.

 

Kan noen sjekke om det bare er Opera det ikke virker i? Hva med Safari?

[PT]

Så det nå, men det er bare fordi menyvalgene på 1. og 2. nivå har samme bredde, samtidig som 2. nivå blir indentert en smule fra venstre kant. Bredden på 2. nivå må da selvsagt gjøres en lik smule mindre, og problemet er løst.

 

Hva er forresten poenget med å sette class="sub" på li-ene i 2. nivå?

Endret 10. april 2007 av PT

[the_fire]

Har virkelig prøvd å få dette til, men jeg har ikke klart dette.

 

Slik ser koden ut nå:

Klikk for å se/fjerne innholdet nedenfor

*{border:0; padding:0;}
body {
background-color: #ffffff;
margin: 0px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
}
/** L A Y O U T **/
#header1 {
position: absolute;
margin-left: 0px;
width: 90px;
height: 50px;
background-image: url('logo.gif');
}

#header2 {
position: absolute;
margin-left: 90px;
width: 410px;
height: 50px;
background-image: url('headerbg.gif');
background-repeat: repeat-x;
padding: 5px;
}

#header3 {
position: absolute;
margin-left: 500px;
width: 200px;
height: 50px;
}

#meny {
position: absolute;
margin-top: 50px;
width: 150px;
height: 420px;
background-color: #ff6800;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
overflow: auto;
}

#video {
position: absolute;
margin-left: 150px;
margin-top: 50px;
width: 550px;
height: 350px;
background-color: #000000;
border: 1px solid #ffffff;
color: #ffffff;
}

#desc {
position: absolute;
margin-left: 150px;
margin-top: 400px;
width: 550px;
height: 100px;
background-color: #ffffff;
border: 1px solid #ffffff;
}

#sok {
position: absolute;
margin-top: 470px;
margin-left: 0px;
height: 30px;
width: 150px;
z-index: 2;
background-color: #ff6800;
}

/** M E N Y **/
.open {
display: block;
margin-bottom: 10px;
}
.closed {
display: none;
}

#navcontainer { 
width: 150px; 
}

#navcontainer ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a {
display: block;
padding: 3px;
width: auto;
background-color: #ff6800;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover {
background-color: #0099ff;
color: #fff;
}

li.sub {
width:auto;
margin-left: 15px;
color: #eeeeee;
border-left: 1px solid #ffffff;
}

.bold {
font-weight: bold;
}

/** S T I L **/
.velkommen {
margin-left: 20px;
color: #ffffff;
font-size: 20px;
}
.direkte {
margin-left: 600px;
color: #ffffff;
font-size: 20px;
}

img {
border: 0px;
}

input.text {
margin-top: 5px;
margin-left: 5px;
border: 1px solid #ffffff;
width: 105px;
font-size: 10px;
}

input.submit {
margin-top: 5px;
border: 1px solid #ffffff;
background-color: #ff6800;
width: 30px;
font-size: 10px;
color: #eeeeee;
}

input.submit:hover{
border: 1px solid #ffffff;
background-color: #0099ff;
width: 30px;
font-size: 10px;
color: #eeeeee;
}

a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }

Det er flere ting som fører til at horisontal scrollbar kommer:

- Når man trykker på en link kommer det opp en striplet linje rundt listeelementet man har valgt. Dette gjør at elementet blir en-to piksler bredere. (Firefox)

- Når man ekspandert alle menyvalgene kommer vertikal scroll. Dette er ønsket. Men vertikal scroll gjør at plassen til den totale bredden på elementet blir 5-6 piksler mindre, og dermed kommer horisontal scroll (Firefox/IE 7).

 

Problemet er at IE og Firefox sier at width:auto er en konstant verdi, mens Opera sier dette er relativt. FF og IE har sakt at bredden på li-elementet er 127 piksler uansett om vertikal scrollbar er der eller ikke.

 

Så hvordan løses dette?

Endret 10. april 2007 av The_Fire