Avatar billede hresben Nybegynder
12. marts 2008 - 14:48 Der er 5 kommentarer

CSS popup virker ikke i IE

Endnu et IE-vil-ikke-spise-min-CSS spørgsmål.

Jeg har lavet et link, som viser en boks med noget tekst på rollover. Dette virker fint i Firefox og Safari, men jeg kan ikke få det til at fungere i IE. Den viser ikke min skjulte popup-boks på rollover/hover.
Er der et skarpt hoved herinde som kan knække koden?

Her er den relevante CSS-kode:
a {
    text-decoration: none;
    font-weight: normal;
    color: Red;
}
a#popup span{
    text-decoration: none;
    display: none;
    clear: none;
    color: Red;
}
a#popup:hover span {
    position: absolute;
    text-decoration: none;
    display: block;
    font-weight: normal;
    color: black;
    left: 390px;    
    top: 93px;
    height: 550px;
    width: 245px;
    background-image: url('/assets/images/page_column.jpg');
    padding-top: 10px;
    padding-left: 15px;
}
Avatar billede roenving Novice
12. marts 2008 - 16:20 #1
Det kan du ikke med IE, da pseudoclasses skal være det allersidste i en selector ...

-- i øvrigt er det principielt noget vrøvl at have funktionalitet placeret i css, så egentlig er reaktionen ikke ligefrem overraskende !-)

-- de løsninger jeg har set, har opereret med enten behaviors eller scripts til IE, og egentlig er det efter definitionen af forholdet mellem html, css og javascript det rigtigste at have det som noget javascript !o]
Avatar billede hresben Nybegynder
12. marts 2008 - 16:35 #2
Hmmm...
Jeg er tilbøjelig til at give dig i ret i, at CSS skal holdes til designet, men jeg surfede lidt rundt, og kunne forstå på det jeg læste, at CSS fungerede bedst til denne popup-funktion, eftersom man bare skulle tagge en bestemt tekst, og dermed kunne genbruge funktionen på hele siden, ligemeget hvor man befandt sig.

Har du (eller andre) en alternativ løsning, som virker bedre?
Skal jeg bruge javascript?
Avatar billede hresben Nybegynder
12. marts 2008 - 17:55 #3
Nu har jeg fulgt dit råd og tyvstjålet et javascript, som virker i IE.
Nu er problemet at den positionerer det helt forkert i IE.

#hoverpopup {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}

Den viser det ligeså fint i Firefox, den lægger det helt forkert i IE.
Burde den ikke lægge det samme sted uanset browser?
Jeg har også prøvet med absolute positioning, og det er samme problem.
Avatar billede olebole Juniormester
12. marts 2008 - 20:03 #4
<ole>

Nu er det ikke til at se, hvad du gør - men husk, du ikke må give spannet 'display:block' ... det skal have 'display:inline'. Men derudover må du nok lægge et link, hvis vi skal forholde os til din kode  :)

/mvh
</bole>
Avatar billede hresben Nybegynder
12. marts 2008 - 20:50 #5
Tak for svaret.

Siden er ikke published endnu, så jeg kan desværre ikke linke.
Min oprindelige comment er slettet, og jeg har på opfordring fra roenving erstattet min CSS med #hoverpopup {}.
Jeg har et javascript som ændrer visibility hidden til visible på rollover, så i praksis er det faktisk bare ren tekst I skal forholde jer til.

Hvis denne forklaring ikke gør det, må jeg lige forsøge at smide det op i et test environment.

Hvis bare hele verden var som eksperten.dk, behøvede folk aldrig være i tvivl om noget igen...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester