18 svar · 865 visningar · startad av superc
Tjena,
det är så att border-bottom inte vill försvinna på bildlänkar. Vad jag jag för fel? Kolla koden nedan.
#content a:link {
color: #c9c9c9;
text-decoration: none;
}
#content a:visited {
color: #c9c9c9;
text-decoration: none;
}
#content a:hover {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #ffc87e;
}
#content a:active {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #ffc87e;
}
#content a:hover img {
border: none;
}
Vilken läsare testar du koden på?
firefox
<div id="content">as<a href="#"><img src="test.jpg"></a>sd</div>
fungerar för mig.. bli någon orange border och att den försvinner.. vad har du för doctype?
lägg till
img {border:none; display:block}
till stilmallen och se vad som händer.
precis så ska det bli... konstigt det här. Doctypen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Danne V skrev:
lägg till
img {border:none; display:block}
till stilmallen och se vad som händer.
Det tog bort bordern :) men då blev det som att man la in en radbrytning innan den aktuella bilden :/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bob</title>
<link rel="stylesheet" href="core2.css" type="text/css" />
</head>
<body>
<div id="content">as<a href="#"><img src="bild.jpg"></a>sd</div>
</body>
</html>
och CSS:
#content a:link {
color: #c9c9c9;
text-decoration: none;
}
#content a:visited {
color: #c9c9c9;
text-decoration: none;
}
#content a:hover {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #f00;
}
#content a:active {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #ffc87e;
}
#content a:hover img {
border: none;
}
img {border: 0}
fungera 100% för mig i Firefox.
hmm, för mej fungerar det inte :S Det ska alltså inte bli någon border när man hovrar en bild. Det blir det för mej när jag testar din kod.
Då missförstod jag helt din fråga...
superc skrev:
Det tog bort bordern :) men då blev det som att man la in en radbrytning innan den aktuella bilden :/
Ta bort display:block, då.
superc skrev:
Nä, för då kommer bordern tillbaka :p
Det hänger en häst i luften här, helt klart.
Jag ber alltid folk att ladda upp hela, kompletta sidan till en server och ge en länk, eftersom man då ser ALLT och inte bara det som trådskaparen tycker är relevant. Orsaken till problemen döljer sig nämligen nästan alltid nån helt annan stans än vad man först tror.
Kan du göra det?
Danne V skrev:
Det hänger en häst i luften här, helt klart.
Jag ber alltid folk att ladda upp hela, kompletta sidan till en server och ge en länk, eftersom man då ser ALLT och inte bara det som trådskaparen tycker är relevant. Orsaken till problemen döljer sig nämligen nästan alltid nån helt annan stans än vad man först tror.
Kan du göra det?
Du kan ju egentligen bara ta koden som voigtann1 paste'ade här ovanför.. Samma problem upstår där.
superc skrev:
Du kan ju egentligen bara ta koden som voigtann1 paste'ade här ovanför.. Samma problem upstår där.
...eller så kanske du kan göra dig besväret att hjälpa folk hjälpa dig?
Folk har nämligen sällan tid eller lust att ta den koden, kopiera in i ett dokument tillsammans med stilmallen, göra en bild, spara och ladda upp på egen server för att sen, så småningom, kunna se hur sidan egentligen ser ut.
Vill du ha hjälp, så tycker jag det är ditt jobb - inte mitt eller andras.
Danne V skrev:
...eller så kanske du kan göra dig besväret att hjälpa folk hjälpa dig?
Folk har nämligen sällan tid eller lust att ta den koden, kopiera in i ett dokument tillsammans med stilmallen, göra en bild, spara och ladda upp på egen server för att sen, så småningom, kunna se hur sidan egentligen ser ut.
Vill du ha hjälp, så tycker jag det är ditt jobb - inte mitt eller andras.
ja självklart,.. ska tänka på det i framtiden. :) Här kommer en länk där problemet uppstår:
http://www.e-hotellet.se/~ccc/
css: http://www.e-hotellet.se/~ccc/text.css
Om du fortfarande har tid/lust att kolla på det här så skulle det vara jättesnällt :)
Problemet består i vad du sätter border på.
Sätter du border på #content a:hover så får a-elementet en röd border, precis som du vill.
Men sätter du border på #content a:hover img så definierar du plötsligt bildens border, eftersom det är det element du faktiskt specificerar i din css. Och den är redan osynlig.
Mitt förslag är att du skapar en klass för bilden som du sätter i
a.enbild:hover {border: 0pt; }
superc skrev:
ja självklart,.. ska tänka på det i framtiden. :) Här kommer en länk där problemet uppstår:
http://www.e-hotellet.se/~ccc/
css: http://www.e-hotellet.se/~ccc/text.cssOm du fortfarande har tid/lust att kolla på det här så skulle det vara jättesnällt :)
Kanon! (y)
Nu kommer folk att vara MYCKET mer benägna att hjälpa!
Själv sitter jag på Mac, så kan inte kolla i IE. Headbugs tips är nog ganska säkert. Det brukar det vara.
Men en sak kan jag ju bidra med: Din kod validerar inte. Tror inte det har med just det här felet att göra, men det kan ju vara bra att fixa det på den riktiga sidan...
http://validator.w3.org/
Tack headbug, det fungerade :) Lite synd att man måste använda ytterligare en klass för att det ska fungera, men så är det ibland :)
Tack till Danne V och voigtann1 som också hjälpt mej :)