Søg
Avatar billede bongii Nybegynder
12. november 2008 - 23:29 Der er 13 kommentarer og
2 løsninger

Problemer med div:hover

Hej.

Jeg har dette testside:
http://www.movievizion.dk/upload/test.html

Er der en der kan se hvorfor hover ikke virker  i IE, men fint i FF?

... og hvordan undgår jeg at billedet skal loade første gang man laver hover? Kan jeg preloade hover billedet, eller kan jeg ændre style sheetet så det virker perfekt?
Avatar billede olebole Juniormester
12. november 2008 - 23:36 #1
<ole>

Fordi du disabler store og vigtige dele af CSS i IE, når du bruger en ufuldstændig DTD. Mon ikke det virker, hvis du bruger denne i stedet:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

/mvh
</bole>
Avatar billede olebole Juniormester
12. november 2008 - 23:38 #2
- og så burde HTML 4.01 Transitional efterhånden være udfaset for omkring 8 år siden, så det var måske på tide at begynde at bruge Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Andre flavours af en markup-standard end den stringente er kun ment som en kort overgangsløsning, mens man vænner sig til 'de nye tider'  ;o)
Avatar billede olebole Juniormester
12. november 2008 - 23:40 #3
PS: Husk også, at IE6 under ingen omstændigheder kan håndtere hover på andet end links - så det er nok lige lovlig tidligt at bruge hover på divs, hvis effekten er vigtig
Avatar billede ssv Nybegynder
13. november 2008 - 00:09 #4
Som jeg ser kurven der, kan du sagtens bruge et a-tag til at lave hoveren. Ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<STYLE type="text/css">
a.kurv { background: url(http://www.movievizion.dk/upload/test.jpg) no-repeat; height: 127px; width: 160px; display: block; float: left; }
a.kurv:hover { background: url(http://www.movievizion.dk/upload/test_hover.jpg) no-repeat; }
</STYLE>
</head>

<body>
<a class="kurv" href="#">
test
</a>
</body>
</html>

--

Og det ovenstående kode virker også i IE6. Ellers findes en javascript løsning der kan få IE6 til at opføre sig som IE7 (http://code.google.com/p/ie7-js/). Det er dog overhovedet ikke en sikker måde løse problemet på :-)
Avatar billede olebole Juniormester
13. november 2008 - 00:18 #5
Dels er scriptet ikke en sikker løsning - dels er det ikke i valid kode  =)

Jeg er også helt klart mere til link-løsningen indtil videre - men der skal i øvrigt lige et block-element rundt om linket under 4.01 Strict  ;o)
Avatar billede ssv Nybegynder
13. november 2008 - 11:26 #6
Jeg skrev også at javascriptløsningen var en dårlig måde at løse det på - men det kan lade sig gøre ;-)

Og jeg var lige for hurtig til ikke at få testet koden før jeg postede den, så rigtigt som olebole påpeger, skal du lige wrappe <a>'erne i et par <div>'s :-)
Avatar billede olebole Juniormester
13. november 2008 - 11:32 #7
ssv >> det var også ment som en bekræftelse af din kommentar  ;o)
Avatar billede bongii Nybegynder
13. november 2008 - 17:26 #8
Super tak! Smider i et svar begge?
Avatar billede bongii Nybegynder
13. november 2008 - 17:53 #9
Var det forresten muligt at preloade billedet? Syntes ikke safari casher hover billedet.
Avatar billede ssv Nybegynder
13. november 2008 - 19:04 #10
Jeg synes umiddelbart ikke at der er et problem med Safari. Men her et svar i hvert fald :-)
Avatar billede ssv Nybegynder
17. november 2008 - 12:01 #11
Skal vi få afsluttet tråden..? :-)
Avatar billede bongii Nybegynder
17. november 2008 - 12:44 #12
Yes, Ole kan du ikke også smide et svar?
Avatar billede olebole Juniormester
17. november 2008 - 14:12 #13
- kastet!  =)
Avatar billede olebole Juniormester
17. november 2008 - 14:42 #14
Tak for points  =)
Avatar billede ssv Nybegynder
18. november 2008 - 17:03 #15
Same here :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:10 Tomt felt i Start Af ErikHg i Windows
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
White papers
Flere white papers »