Rollover fungere ikke riktig i IE.

[Equerm]

Jeg får ikke rollover på menyen til å fungere sjikkelig i IE på denne siden.

 

>>Siden

 

Problemet er at når siden visest i IE så blir menybildet for høyt slik at litt av rollover bildet vises.

 

 

 

Siden Arve er så lat tenkte jeg at jeg skulle legge ut koden her

 

#main {
display: block;
float: left;
margin: 8px 0 0  5px;
background-image:url(menu_buttons/main.jpg);
background-position: top;
background-repeat: no-repeat;
width: 79px;
height: 13px;
}

Endret 13. juli 2004 av Equerm

[Arve Systad]

No har eg ikkje sett på koden din, men husk på at total høgde = margin+padding+height+border

 

For å få en slik rollover til å funke skikkeligAST () så bør du gjøre slik (i eksempelet er knappane 25px høge):

 

.knapp {
background: url(image.gif);
background-position: (posisjon);
height: 0 !important;
height /**/: 25px;
padding: 25px 0 0 0;
overflow: hidden;

 

Gjorde det i full hast, deng meg om eg har gjort noke feil.

[Equerm]

Jeg fikk til menyen men nå er den ikkje helt bra på hover

 

bruker denne koden

#main {
overflow: hidden;
float: left;
margin: 8px 0 0  5px;
background-image:url(menu_buttons/main.jpg);
background-position: top;
background-repeat: no-repeat;
width: 79px;
height: 13px;
}

#members {
overflow: hidden;
float: left;
margin: 8px 0 0	30px;
background-image:url(menu_buttons/members.jpg); 
background-position: top;
background-repeat:no-repeat;
width: 167px;
height: 13px;
}

#contact {
overflow: hidden;
margin: 8px 0 0 30px;
float: left;
background-image:url(menu_buttons/contact.jpg);
background-position: top;
background-repeat: no-repeat;
width: 154px;
height: 13px;
}

#admins {
overflow: hidden;
margin: 8px 0 0 200px;
float: left;
background-image:url(menu_buttons/admins.jpg);
background-position: top;
background-repeat: no-repeat;
width: 125px;
height: 13px;
}

 

Og denne på hover:

 

#main:hover, #members:hover, #contact:hover, #admins:hover  {
background-position: bottom;
}

[Haraldson]

http://absentvoid.com/index.php?section=tutorials/rollover

 

Under "Cleaning som bugs" er svaret.

[joffar]

http://absentvoid.com/index.php?section=tutorials/rollover

 

Under "Cleaning som bugs" er svaret.

Ser ikke helt hva flickering har med Equerms problem å gjøre...

 

Tror problemet ditt kommer av at du har en meny som er satt til 30px height, og deretter setter du knappene dine til 13 + 8+5 = 26.. du har med andre ord 4 px tilovers..

[Haraldson]

Under "Cleaning som bugs" er svaret.

Ser ikke helt hva flickering har med Equerms problem å gjøre...

Han sa han fikk det til, men at :hover ikke så så veldig fin ut. Følg med?

[joffar]

Han sa han fikk det til, men at :hover ikke så så veldig fin ut. Følg med?

 

Nettopp det jeg gjorde, jeg sjekket siden hans, og for meg så virket det ikke som flickering var et problem, meny teksten består av ett bilde med den samme teksten i to forskjellige farger..., en som skal være den vanlige, en som skal komme frem ved hover... ved hover vises begge.. dvs at bildet ikke flyttes korrekt.

 

... tror fremdeles at det ikke har mye med flickering å gjøre...

 

edit typo....

Endret 19. juli 2004 av joffar

[Haraldson]

#halomann {
float: none; <--- ?

Ikke nødvendig med float i det hele tatt, her.

 

#main {
display: block;
float: left;
margin: 8px 0 0  5px;
background-image:url(menu_buttons/main.jpg);
background-position: top;
background-repeat: no-repeat;
width: 79px;
height: 13px;
}

#members {
display: block;
float: left;
margin: 8px 0 0	30px;
background-image:url(menu_buttons/members.jpg); 
background-position: top;
background-repeat:no-repeat;
width: 167px;
height: 13px;
}

#contact {
display: block;
margin: 8px 0 0 30px;
float: left;
background-image:url(menu_buttons/contact.jpg);
background-position: top;
background-repeat: no-repeat;
width: 154px;
height: 13px;
}

#admins {
display: block;
margin: 8px 0 0 200px;
float: left;
background-image:url(menu_buttons/admins.jpg);
background-position: top;
background-repeat: no-repeat;
width: 125px;
height: 13px;
}

#main:hover, #members:hover, #contact:hover, #admins:hover  {
background-position: bottom;
}

..kan du gjøre om til

 

#menu a {
display: block;
float: left;
height:13px;
}

#main {
background-image:url(menu_buttons/main.jpg) top no-repeat;
width: 79px;
}

#members {
background-image:url(menu_buttons/members.jpg)  top no-repeat; 
width: 167px;
}

#contact {
background-image:url(menu_buttons/contact.jpg)  top no-repeat;
width: 154px;
}

#admins {
background-image:url(menu_buttons/admins.jpg)  top no-repeat;
width: 125px;
}

#menu a:hover  {
background-position: bottom;
}

/* PLUSS */

#menu {
margin: 0 auto;
border-left: 3px solid black;
border-right: 3px solid black;
background-color: #356766;
width: 800px;
text-align: center;
font-family: Trebuchet MS;
font-size: 12px;
padding:8px 0 0 5px;
}

 

Det som forårsaker feilen, er som tidligere påpekt av Arve IE's boxmodel.

Det vil si at Høyde ikke er høyden, men høyden + marginer er den egentlige høyden (IE).

 

Den siste kodesnutten vil nok virke.

 

Edit: Så nå at det så ut til å fortsatt funke fint i FF, med unntak av noen borders som selvfølgelig plusser seg på den totale bredden, men det finner du ut av.

 

*Håpe at det funker i IE*

 

Edit2: Jeg tok meg den friheten å sette grøten sammen til et komplett stilark, og det kan du finne her.

Endret 19. juli 2004 av Mr.Berg