Gå til innhold

Rollover fungere ikke riktig i IE.


Anbefalte innlegg

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.

 

 

example.JPG

 

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

 

#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 av Equerm
Lenke til kommentar
Videoannonse
Annonse

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 (:D) 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.

Lenke til kommentar

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;
}

Lenke til kommentar
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 av joffar
Lenke til kommentar

#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 av Mr.Berg
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...