I style.css content så har jag följande kod:
Sedan så har jag några bilder som länkar men jag vill inte ha en linje under bilden. Jag har testat massvis med olika sätt men inget har fungerat. Hur gör jag?

kanske

Funkar inte tyvärr

Kan inte komma på någon annan lösning än att sätta "border: 0;" i a-taggen för varje bildlänk. Men det kanske är omständigt?

Kanske detta fungerar?

Tack det fungerade. Nej då det blir inte för omständigt. Det verkar ju som att det inte finns något annat alternativ för jag har testat det mesta. Tack än en gång! :)

koala och Blackex:

a img { border: none; }

fungerar förstås inte eftersom border-bottom är satt på ankarelementet, a, och inte på bilden, img.
(och eftersom det inte finns något css-sätt att styra bakåt i precision, typ a<img, så går det inte att göra på något smidigt sätt) Att sätta en class="medbild" på <a> eller liknande är nog smidigast. Då kan man ju i alla fall styra upp ett konsekvent beteende för alla bildlänkar med:

a#medbild { border: none; } /* bildlänkar */
a { border-bottom: 1px solid red; }

Ska förstås vara a.medbild eftersom det är en class...

Jag skulle skriva:

#content a.bild {border: none;}

<a class="bild" ...>

jag skulle skriva

img {
border: 0px;
}

Hur ofta vill man liksom ha en border på en bild man länkar?

Frågan/Problem från ovan var ju hur man slipper att få en border-bottom på länken inte på bilden. (Den oönskade ramen/understykningen sitter ju på länken <a> och inte på <img>)

Ganska ofta vill man ha en snygg och enhetlig ram på sina bilder på hela siten, men inte en länk-ram.
Typ: img { padding: 3px; background-color: white; border: 2px solid #456; }

Om du har en bild innanför en länk-tag så blir det en ram runt hela bilden. På den gamla (goda?) tiden så skrev man ofta
[img]...[/img] för att få bort ramen som skapades vid länkning. Det är exakt vad min lösning ovan gör också fast med css.

Men vill man ha en ram på bilder ändå så får man väl göra det så om man vill. Dock fungerar min lösning fint och jag använder det själv på flera sidor. Om jag nu skulle vilja ha en ram på bilder på sidan så har jag förmodligen de bilderna inom ett eget lager och ger då lageregenskaper som då renderar i en ram på bilderna. Men generellt är jag inte intresserad av att ha en ram på bilderna i t.ex. menyer, rubriker etc.

Ja, det är vad ditt förslag gör. Med du kanske skulle läsa frågan och svara på den istället för att föreslå en lösning på ett gammalt problem. Läs första inlägget så ser du vad det handlar om.
Det tvivlar jag inte på. (Men man kan ju fråga sig varför du anger px när du anger 0, 0px är väl samma sak som 0em... Om man inte vill ha någon ram är det väl mest logisk att använda ram: ingen; dvs. border: none; )

Vad menar du för lager? Pratar vi Netscape 4 <layer> här eller vad menar du? Det finns ingen anledning att sno in <img>-element i extra <div>-element eller liknande. Det leder bara bara till tyngre html-kod och bör undvikas om det går. Varför skulle du vilja ha bilder i rubriker eller menyer??? Och om du skulle vilja ha det så är ju en enkel lösning att använda:
h2 img { bla: bla; }

Jag tror du missförstått den egentliga frågan, skilj bild-elementet från ankar-elementet i ditt tänkande. Frågan var hur man slipper att få en border-bottom på ett <a> som följs av <img>.

Det kan hända att vi har olika tankesätt om hur css bör användas men din lösning med ett img {border:0px} verkar ju inte särkilt avancerad, mer än en motsvarighet till gamla border="0" (Det finns, för den som är intresserad, ett logiskt glapp här: border="0" i html innebär att länken inte ger någon ram runt bilden fastän ramen är orsakad av länken och inte av bilden. Man sätter alltså ram-storleken på bilden trots att den uppstår genom länkningen)

Edit: koala och Blackex, några kommentarer?

Jag gav ett sätt att lösa det på, ett sätt som fungerar fint för mig.

När jag pratar om lager så pratar jag om div. Normalt sett när man använder css för att styra en sidas innehåll använder man lager, dvs div:ar för specifika delar av sidan. Detta för att slippa använda class-taggen överallt utan man kan istället ha <div id="lager1">innehåll som formateras</div> och sedan bara skriva #lager1 a {... } . Du får mindre kod än om du ska skriva .... på alla taggar. Dvs. sidan laddas snabbare samt att det är enklare att ändra(Färre ställen att ändra på).

Vem har sagt att lösningar måste vara avancerade? Fungerar det så är jag nöjd. Visst skriv border:none; om du vill det, det är mer logiskt korrekt.

Men alla som arbetar med css vet att bara följa vad som är semantiskt korrekt räcker inte för att sidan ska visas rätt i alla webbläsare då dom har tolkat och implementerat det olika. Mitt sätt fungerar fint för mig i alla webbläsare och därför använder jag det. Jag säger inget om att ditt sätt är fel men alla sätt är väl bra utom dom dåliga(Dom som inte funkar)?

Vad jag försöker göra dig uppmärksam på är att ditt förslag inte löser frågan som ställdes i den här tråden. I något annat sammanhang är jag säker på att din lösning tillfredsställande löser ett annat problem. Eftersom du inte verkar ha läst de tidigare inläggen ordentligt så upprepar jag den egentliga frågan:

Om man har:
a { border-bottom: 2px solid red; }
och vill slippa "understrykningen" på länkade bilder:
[img][/img]
men behålla den om det är en textlänk:
bla
Hur gör man då?

Din föreslagna lösning:
img {border:0px}
löser inte problemet eftersom ramen inte sitter på bilden utan på länken. Istället behövs som guran och elofsson konstaterat t ex (om man inte vill använda none)
a {border:0px}
(och förstås sätta det i sin kontext t ex: div#content a.bild {border:none} med länkade bilder [img][/img])

Det verkar som du (och tidigare Blackex och koala) missat denna "finastilta" detalj. (Vilket antagligen beror på att i gammal html så satte man border="0" på img även fast ramen uppstod på grund av a-elementet)

Slutsats: Din lösning löser inte det här problemet utan något annat (eftersom du menar att den fungerar bra).

Håller helt med. Jag är bara lite skeptisk till att använda termen lager eftersom man får intrycket att det alltid handlar om lägga lager på lager (jfr t ex Photoshop), till förvirring kommer ju också att det (en gång i tiden) även fanns ett layer-element för att just lägga lager på lager. Det känns mer rätt att prata om lager om man t ex lägger två positionerade div-element ovanpå varandra. Om man menar div-element så är det, enligt min åsikt, bättre att vara tydlig och säga div-element eller divvar så att man inte behöver gissa vad som menas beroende på vem som skriver.

Dessvärre kan i alla fall inte jag komma på någon lösning där man löser just det här problemet utan en class (i alla fall inte utan att fläska på med mer html...). (Om det hade funnits en "parent selector" (t ex p<a) och inte bara en "child selector" (p>a) i css så hade man kunnat gå bakåt med t ex a<img skulle ha varit praktiskt, som jag redan påpekat, i detta fall...)

I övrigt ser man rätt ofta hur sidor fylls med onödiga divvar som omsluter bilder, listor och andra element. Ofta går det att lösa utan divven, t ex med <ul id="lager1a"> (om man nu vill kalla det för lager) och på så sätt ha en "måltavla" för sin css. I synnerhet att lägga en <img> direkt i en <div> utan någon annan anledning än att sätta en ram på bilden är ganska överflödigt. (Men det är ju förstås inte det du menar ovan, så detta är ingen känga till dig...)

Visst, det är klart. Det där med none var bara ett påpekande i en parantes. Jag har inte haft något problem med att det inte skulle fungera.

ponera att bakgrunden är vit, länkramen är röd
det borde funka...

Har ni blivit helt galena i denna tråd?

Från början var text-decoration: none, vilket ju innebär att länken inte har ett streck under sig.

Sedan har det lagts ett streck under länken via border-bottom.

När länken är en bild ska det inte vara något streck med hjälp av border-bottom.

Det är problemet och inte om bilden har en ram eller inte!

Tack för att man äntligen får lite stöd för vad man menar, jag började nästan tro att jag själv blivit galen i mitt korståg mot förvirrade inlägg...

alldeles sant guran, men eftersom det lagts till ett border-bottom så funkar inte a img { border:none} , därav den bakgrundsfärgade ramen på a img.

Kan följande lilla kod göra det bättre då:

...

Jag skulle nog låta bli att använda en border-bottom och hålla mig till text-decoration underline eftersom det är den mest pedagogiska och minst komplexa lösningen. Varför måste linjen absolut vara streckad? Nåja, är designen så viktig får man väl kompromissa med kodens struktur. Själv föredrar jag pedagogik i koden framför perfekt design.

guran, vill du verkligen lägga till en klass på varje bild?
men som svar på din fråga - nej. länkade bilder "vill" ha ram, har länkar ram vill också bilden "ha" det. bättre är då att sätta en alternativ ramfärg.
att lägga till klasser gör det bara krångligare... imnsho

koala, jag håller med dig.

Det man måste tänka på är hiarkin i koden, exempelvis att inline styling skriver över övrig CSS. Det är färför det nu fungerade för JeZZifelt. Dock så skulle jag aldrig göra så själv då jag inte tycker inline styling inte riktigt är rätt. Men nu är ju det inte frågan längre så skitsamma...

Men i det här fallet så är ramen på Länk taggen och inte bilden, tänk att ankaren blir en liten container som i sin tur har ramen på sig (alltså spelar det ingen roll hur mycket du ändrar ramen på bilden). Precis som många redan har sagt.

Det det ända vettiga sättet vad jag kan se är att sätta en class på alla länkar som är en bild, eller tvärtom. Att föredra är ju förstoss att använda text-decoration och/eller text-underline för att slippa allt krångel. Ännu en gång; precis som andra redan har sagt. Är lite osäker på hur pass text-underline fungerar på vissa webläsare?

http://www.w3.org/TR/2003/CR-css3-te...coration-style

Nja, det verkar vara på det viset att en bild som hamnar inne i en a-tagg automatiskt får en ram av FF och MSIE men inte av Opera. Denna ram kan inte tas bort med border eller text-decoration satt på a-taggen utan ramen måste tas bort med border på img-taggen.

Men problemet i denna tråd är inte huruvida bilden har en ram eller inte utan att a-taggen ska ha border-bottom: 0 när a-taggen innehåller en bild.

Det är vid såna här tillfällen jag brukar ta till DOM-script. I det här fallet kanske man skulle använda en klass med text-decoration som default och med DOMs hjälp byta ut den mot en med border på de ankare som inte har en bild som child.