HTML & CSSur HTML, XHTML & CSS
10 svar · 324 visningar · startad av connil
Med selektorer kan man sätta stil på taggar som finns i andra taggar. Exempelvis:
...
<style>
div span{
color: red;
}
</style>
...
<div><span>röd text</span></div>
...
Min fråga är om det går att göra tvärt om, dvs sätta stil på taggar som har en speciell tag i sig. Jag vill att alla A taggar som har en bild inte ska vara understrukna.
<style>
a ?{
text-decoration: none;
}
</style>
...
<a href="...">
<img src="...">
</a>
...
Är detta möjligt?
/c
Med
<style>
img {border:none;}
</style>
...
<a href="...">
<img src="...">
</a>
blir det en liten liten understrykning kvar efter bilden. Min gissning är att det är nyradstecknet som gör detta. Tycker inte det borde vara så men så är fallet i Opera 7.21, IE6 samt Mozilla 1.6.
Då tänkte jag att om det gick att sätta stilen på alla A-taggar som innehåller IMG-taggar så vore problemet ur vägen och det var bara det jag undrade.
För att lösa problemet kan man exempelvis ta bort nyradstecknena eller sätta klass på a taggen men jag var bara nyfiken på om det fanns någon alternativ (snyggare?) lösning.
<head>
<title></title>
<style>
img {border:none;}
</style>
</head>
<body> <a href="länk.html">
<img src="glowing.gif" alt="bild" width="50" heighet="50">
</a>
</body>
jag får ingen understräck med denna koden i moz åtminstonde (ingen border heller för den delen)
Min gissning är att du får en border från ett annat element (top-border som ser ut som understräck)
Posta en länk med komplett kod så kanske det under lättar felsökningen.
BTW: sa jag wälkommen till wF?
Inte? Wälkommen till wF :birp
Jag vet vad du menar, detta händer när du har en länk med text innehållande ett mellanslag till bilden.
Enklast vore nog att skapa en class som tar bort understrykningen.
a.noUnderline { text-decoration:none; }
<a class="noUnderline">
Men för att svara på din fråga... Kollade igenom CSS2 och CSS3 selectors och fann inget som matchade det du ville ha.
Jag har nog fått svar på min fråga, det går alltså inte. Tack PepeJeria!
frankof> Inte jag heller :)
Läste någonstans på wF att man ska testa koden först! Så rätt, så rätt.
Nåväl, jag har lyckats återskapa problemet. Följande kod gör litet streck mellan bilderna:
<a href="">
<img src="img.gif">
</a>
<a href="">
<img src="img.gif">
</a>
Detta gör det inte
<a href="">
<img src="img.gif"></a>
<a href="">
<img src="img.gif">
</a>
Eftersom det inte finns blanksteg så hävdar jag fortfarande att det är nyrad som är boven. Ska det vara så?
BTW: sa jag wälkommen till wF?
Inte? Wälkommen till wF
Bock och tack!
Japp där får du det, och det är "blanksteg"/"nyrad" som är boven, den läses ut som ett täcken och hanteras derefter.
det är bara låta bli radbrytningen.
Testade lite med din "bug" ;)
Vad händer om du ger sidan en docktype?
[b]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">[/b]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="Frank Ofstad">
<title></title>
<style>
img {border:none;}
</style>
</head>
<body>
<a href="">
<img src="img.gif">
</a>
<a href="">
<img src="img.gif">
</a>
</body>
</html>
Då försvann "understräcken" för min del åtminstonde
Ahh, coolt. Men bara i Moz, inte IE eller Opera.
Hade innan doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
men med den var det ingen skillnad.
Den DOCTYPE:n gör absolut inget i någon browser, kolla in denna sida för hur browsers agerar med olika DOCTYPE:s
http://www.hut.fi/u/hsivonen/doctype.html
Den "gamla" doctypen har bara följt med utan att jag reflekterat vad den gör i detalj. Verkar dock vara rätt viktigt (något jag iof läst om någongång men lyckats förtränga)
Det var en upplysande länk!