Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Background-image in hover (IE en FF) werkt niet

3 antwoorden
  • Hoi, Tijdens een hover over een link in het navigatiemenu wil ik een background-image laten tonen. Zowel in IE als in FF werkt het niet. Ik kan er niet achterkomen wat de oorzaak is. Tips van reeds bekende topics mochten ook niet baten. Voor de duidelijkheid geef ik de CSS [code:1:8981e0584c] /* CSS Document */ a:link {color:#479DD6;} a:visited {color:#CC0000;} a:hover {color: #479DD6;} html, body { height: 100%; background: #FFFFFF; color: #000000; behavior:url("csshover.htc"); } body { margin: 0; padding: 0; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 500; } #wrap { position: relative; height: 200%; width: 100%; } #header { position: absolute; top: 0; left: 0; height: 10em; width: 100%; overflow: hidden; background: #FFFFFF; z-index: 3; } #search span { font-size: 14px; } #nav { margin: 0; padding: 0; position: relative; display:block; float: right; width: 200px; background-color: #479DD6; z-index: 8; height: 300%; } #nav a { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #DEEFF7; text-decoration: none; padding: .4em .1em; } #nav a:hover { color: #333333; background-image: url(../Knoppen ed/triangle.gif); background-repeat: no-repeat; background-position: right; } #subnav a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 200; display: block; width: 10em; padding: .2em .1em; } #nav ul { text-align: left; list-style-type: none; padding-top: 2px; margin-top: 2px; padding-left: 15px; margin-left: 15px; } #nav ul ul { position: absolute; left: -123%; top: 0.5%; } #nav li { position: relative; padding: .3em; } div#nav ul ul { display: none; z-index: 10; background-color: #479DD6; border-style: groove; border-width: thin; } div#nav ul li:hover ul { display: block; background-image: url(../Knoppen ed/triangle.gif); background-repeat: no-repeat; background-position: right; } /* content styles */ .big { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight:bold; color: #479DD6; } .xbig { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #479DD6; } .style3 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; } #content, #nav { padding-top: 10em; padding-bottom: 10em; } #content { position: relative; float: left; width: 750px; margin-left: 2px; margin-right: 2px; } /* Kop van de content */ .testclass { color: #0033FF; font: 28px arial,helvetica; font-style: normal; font-weight: bold; text-align: left; z-index: 1000; } #test { position: absolute; top: 105px; left: 461px; width: 270px; text-align: left; } /* style voor dankwoord startpagina en contact */ .footer { font-family: "Times New Roman", Times, serif; font-size: 16px; color: #479DD6; } #voet { clear: both; position: relative; width: 100%; height: 5em; } [/code:1:8981e0584c] Ik gebruik XHTML 1.0 Transitional. Heeft iemand de oplossing zodat de background-image wel getoond word? M.vr.gr., Dalertje
  • Eerst even dit: klopt het pad naar het achtergrondplaatje? Als ik deze code: [code:1:e86ceb3ab2] #nav { margin: 0; padding: 0; position: relative; display:block; float: right; width: 200px; background-color: #479DD6; z-index: 8; height: 300%; } #nav a { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #DEEFF7; text-decoration: none; padding: .4em .1em; } #nav a:hover { color: #333333; background-image: url(../Knoppen ed/triangle.gif); background-repeat: no-repeat; background-position: right; } [/code:1:e86ceb3ab2] in een testbestandje plaats, en alleen een ander plaatje neerzet (zonder spaties btw, misschien is dat het probleem?), dan werkt het prima.
  • Tips om verkeerde verwijzingen naar bestanden te voorkomen: - gebruik geen uppercase urls ('Knoppen'), alleen lowercase ('knoppen'); - gebruik geen spaties ('knoppen ed'); - gebruik geen bijzondere symbolen, gebruik alleen 0 t/m 9, a t/m z, _ (underscore) en - (dash). (En de slash en de punt natuurlijk.)

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.