[HTML/CSS] Onverklaarbare border onder image link

[symvar]

Hallo,

Zoals de titel al zegt, een wellicht zeer makkelijk op te lossen doch vervelend probleempje:

Op de pagina http://koisekai.nl/index.php/test heb ik een logo geplaatst, het logo staat in een a tag en in de header div in een 100% height layout.

Het probleem is dat er onder de afbeelding een border onstaat die ik niet weg krijg, de border is te zien in in ieder geval Firefox 7.0.1 en IE9. Het viel me ook op dat als ik de "Compatibility view" in IE9 aanklik deze border weg is (lol).

Ziet iemand misschien het probleem? html en css zijn gewoon te benaderen op de pagina zelf.

[ Voor 5% gewijzigd door symvar op 22-10-2011 12:59 ]

[-LA-]

de border van je "img" op 0 of none zetten

code:

style="border:none;"

[crisp]

Zet gewoon dit standaard in je css:

Cascading Stylesheet:

a img {
    border: 0;
}

[symvar]

-LA- schreef op zaterdag 22 oktober 2011 @ 12:36:
de border van je "img" op 0 of none zetten

code:

style="border:none;"

Thanks voor je reactie maar dat staat ie al zowel in css als inline css (even als test gedaan).

[symvar]

crisp schreef op zaterdag 22 oktober 2011 @ 12:37:
Zet gewoon dit standaard in je css:

Cascading Stylesheet:

a img {
    border: 0;
}

Hm, ook geprobeerd

[ReneDD]

text-decoration: none?

Een andere optie is om de a-tag met display:block precies de grootte te geven van de afbeelding en om daarna de afbeelding als backgroundimage in te stellen.

code:

display: block; height: 200px; width:412px; background: url("../../images/koisekai_small.png"); background-repeat: no-repeat;

[ Voor 118% gewijzigd door ReneDD op 22-10-2011 12:44 ]

[symvar]

ReneDD schreef op zaterdag 22 oktober 2011 @ 12:40:
text-decoration: none?

Een andere optie is om de a-tag met display:block precies de grootte te geven van de afbeelding en om daarna de afbeelding als backgroundimage in te stellen.

Text-decoration had ik geprobeerd maar display:block nog niet, thanks ga ik proberen.

---

Check dit heeft gewerkt..

Het blijft me een raadsel maar als dit werkt, prima. Thanks!

[ Voor 11% gewijzigd door symvar op 22-10-2011 12:46 ]

[NMe]

symvar schreef op zaterdag 22 oktober 2011 @ 12:39:
[...]

Hm, ook geprobeerd

Dan heb je toch niet goed gekeken toen je dat probeerde want dat is toch echt de gedoodverfde manier om borders om plaatjes in links weg te krijgen. Verder kan het inderdaad bijna alleen maar de text-decoration zijn geweest die on hover een underline onder je tekst (en dus ook onder je inline images) tekende. Maar ook daar had je best zelf uit kunnen komen. Zo te zien bén je er nu ook uit gekomen want je site laat nu geen border zien op die plek.

Ik refresh net en zie dat je nu display: block wil proberen en dát vind ik dan weer met een kanon schieten op een mug. Ik heb het vermoeden dat je gewoon geen harde refresh hebt gedaan (control + f5) om zeker te weten dat je browsercache niet denkt nog steeds naar de oude CSS te kijken.

Overigens wordt het niet gewaardeerd dat je domweg linkt naar een livesite die je tegelijkertijd aan het developen bent. Nu vraag je om hulp maar over 2 maanden is je site af en is dit topic een gratis link naar je site. Ik haal de link uit je startpost weg; als je hem terug wil zie ik liever een uitgeklede testcase op een andere locatie.

edit:

Overigens is deze topictitel ook niet bepaald handig. De titel is het visitekaartje van je topic en hoort je probleem te omschrijven zodat mensen die je kunnen helpen je ook daadwerkelijk komen helpen. 99.9% van alle probleemtopics in dit subforum laten zich omschrijven als een "vervelend html/css-probleempje", dus je titel zegt niks. Ik zal het nu even aanpassen, maar in de toekomst zou het fijn zijn als je zelf een betere titel bedenkt.

[ Voor 15% gewijzigd door NMe op 22-10-2011 12:50 ]

[Beatboxx]

Zet anders eens een testcase online? Kunnen we zien of je niet een typefoutje hebt gemaakt;)

[ReneDD]

NMe schreef op zaterdag 22 oktober 2011 @ 12:46:
[...]
Overigens wordt het niet gewaardeerd dat je domweg linkt naar een livesite die je tegelijkertijd aan het developen bent. Nu vraag je om hulp maar over 2 maanden is je site af en is dit topic een gratis link naar je site. Ik haal de link uit je startpost weg; als je hem terug wil zie ik liever een uitgeklede testcase op een andere locatie.

Misschien is het een domme vraag hoor, maar wat is het verschil met een URL plaatsen in een startpost van een topic, of dat deze zelfde persoon misschien wel die link in zijn handtekening heeft staan. Of is dat ook niet toegestaan? Ik zag het namelijk bij jou ook in de handtekening, dat helpt toch net zo goed mee als 'gratis link'?

[symvar]

NMe schreef op zaterdag 22 oktober 2011 @ 12:46:
[...]

Dan heb je toch niet goed gekeken toen je dat probeerde want dat is toch echt de gedoodverfde manier om borders om plaatjes in links weg te krijgen. Verder kan het inderdaad bijna alleen maar de text-decoration zijn geweest die on hover een underline onder je tekst (en dus ook onder je inline images) tekende. Maar ook daar had je best zelf uit kunnen komen. Zo te zien bén je er nu ook uit gekomen want je site laat nu geen border zien op die plek.

Ik refresh net en zie dat je nu display: block wil proberen en dát vind ik dan weer met een kanon schieten op een mug. Ik heb het vermoeden dat je gewoon geen harde refresh hebt gedaan (control + f5) om zeker te weten dat je browsercache niet denkt nog steeds naar de oude CSS te kijken.

Overigens wordt het niet gewaardeerd dat je domweg linkt naar een livesite die je tegelijkertijd aan het developen bent. Nu vraag je om hulp maar over 2 maanden is je site af en is dit topic een gratis link naar je site. Ik haal de link uit je startpost weg; als je hem terug wil zie ik liever een uitgeklede testcase op een andere locatie.

edit:

Overigens is deze topictitel ook niet bepaald handig. De titel is het visitekaartje van je topic en hoort je probleem te omschrijven zodat mensen die je kunnen helpen je ook daadwerkelijk komen helpen. 99.9% van alle probleemtopics in dit subforum laten zich omschrijven als een "vervelend html/css-probleempje", dus je titel zegt niks. Ik zal het nu even aanpassen, maar in de toekomst zou het fijn zijn als je zelf een betere titel bedenkt.

Prima hoor.. ik zet een testcase neer, mocht iemand dit tegenkomen en het echt antwoord weten dan ben ik alsnog benieuwd.

Ik weet dat e.e.a gedoodverfd is, daarom had ik die dingen al geprobeerd..

p.s.

Dit is inderdaad een betere titel, thanks

[NMe]

ReneDD schreef op zaterdag 22 oktober 2011 @ 12:50:
[...]

Misschien is het een domme vraag hoor, maar wat is het verschil met een URL plaatsen in een startpost van een topic, of dat deze zelfde persoon misschien wel die link in zijn handtekening heeft staan. Of is dat ook niet toegestaan? Ik zag het namelijk bij jou ook in de handtekening, dat helpt toch net zo goed mee?

offtopic:

HTML:

<a rel="external nofollow" href="http://omines.nl" target="_blank">Omines</a>

[ReneDD]

Zo ver had ik dan weer niet gekeken Helder!

[symvar]

Ik heb even een testpage aangemaakt hoor, de link staat in de eerste post.

[Raynman]

En bij die testpage zie jij nog steeds een border? Edit: ah, ik begrijp nu geloof ik wat het probleem is (mede door R4gnax).

[ Voor 42% gewijzigd door Raynman op 22-10-2011 13:13 ]

[R4gnax]

symvar schreef op zaterdag 22 oktober 2011 @ 12:33:
Het probleem is dat er onder de afbeelding een border onstaat die ik niet weg krijg, de border is te zien in in ieder geval Firefox 7.0.1 en IE9. Het viel me ook op dat als ik de "Compatibility view" in IE9 aanklik deze border weg is (lol).

Zo klaar als een klontje; dat is een gevalletje van standards mode versus almost standards mode.

Kort samengevat; in standards mode is de positionering van image elementen onderhevig aan de baseline van op dat moment lopende inline elementen. Oftewel; op het moment valt de bodem van je image element samen met de baseline van de tekst in je anchor element en niet met de bodem van je anchor element zelf. De bodem van je anchor element ligt nog wat lager en dat zorgt voor dat gat.

Zie ook: Images, Tables, and Mysterious Gaps
(Ja de titel van het artikel refereert specifiek aan tables, maar hetzelfde verhaal gaat ook op andere punten op.)

De oplossing is vrij simpel:
Het anchor element geef je met behulp van CSS een inline-block display en het image element geef je een block display. Op dat moment zit de baseline niet meer in de weg.

[ Voor 5% gewijzigd door R4gnax op 22-10-2011 13:11 ]

[symvar]

R4gnax schreef op zaterdag 22 oktober 2011 @ 13:10:
[...]


Zo klaar als een klontje; dat is een gevalletje van standards mode versus almost standards mode.

Kort samengevat; in standards mode is de positionering van image elementen onderhevig aan de baseline van op dat moment lopende inline elementen. Oftewel; op het moment valt de bodem van je image element samen met de baseline van de tekst in je anchor element en niet met de bodem van je anchor element zelf. De bodem van je anchor element ligt nog wat lager en dat zorgt voor dat gat.

Zie ook: Images, Tables, and Mysterious Gaps
(Ja de titel van het artikel refereert specifiek aan tables, maar hetzelfde verhaal gaat ook op andere punten op.)

De oplossing is vrij simpel:
Het anchor element geef je met behulp van CSS een inline-block display en het image element geef je een block display. Op dat moment zit de baseline niet meer in de weg.

Dat klinkt inderdaad aannemelijk R4gnax, ik ga het even proberen en ondertussen het artikel lezen.
Voor dit moment heb ik het header div een inline block display gegeven en de img een block. Er zit nog steeds een soort randje tussen de elementen. Maargoed, ik ga nu het artikel even lezen, wellicht moet ik het nog iets anders aanpakken.

Thanks voor je suggestie in ieder geval

---

Het image een display: block geven lijkt alles op te lossen. Dit heb ik nu ook gedaan op de testpagina.

Nice Bedankt allemaal.

[ Voor 4% gewijzigd door symvar op 22-10-2011 13:50 ]

[NMe]

Inline-block is sowieso niet al te handig omdat oudere browsers dat negeren en er alsnog gewoon een inline van maken.

[R4gnax]

NMe schreef op zaterdag 22 oktober 2011 @ 14:29:
Inline-block is sowieso niet al te handig omdat oudere browsers dat negeren en er alsnog gewoon een inline van maken.

Welke oudere browsers? Firefox 2?

Voordat er IE6 / IE7 gezegd wordt door iemand: voor IE6 en IE7 is display: inline-block een layout trigger. Inline elementen (zoals anchors) die layout hebben, gedragen zich in IE6 en IE7 hetzelfde als inline-block elementen in andere browsers.

[martin149]

Dit is een beetje irrelevant, vaal aangezien je met een rewrite lijkt te werken is heb misschien handig om statische opjecten vanuit de root op te vragen, dus dvm

code:

<link href="/test.css" rel="stylesheet" type="text/css">

in plaats van

code:

<link href="../../test.css" rel="stylesheet" type="text/css">

Hierdoor wordt het bestand direct uit de root van de site gehaalt door se slash waarmee de url begint.

[ReneDD]

martin149 schreef op zondag 23 oktober 2011 @ 21:25:
Dit is een beetje irrelevant, vaal aangezien je met een rewrite lijkt te werken is heb misschien handig om statische opjecten vanuit de root op te vragen, dus dvm

code:

<link href="/test.css" rel="stylesheet" type="text/css">

in plaats van

code:

<link href="../../test.css" rel="stylesheet" type="text/css">

Hierdoor wordt het bestand direct uit de root van de site gehaalt door se slash waarmee de url begint.

Is dat niet lastig wanneer je op een omgeving als domein.nl/test werkt? Heb ooit aan een actiesite gewerkt die in de eerste instantie op actiedomein.nl zou komen. Later werd dat domein.nl/actie. Was toch jammer ;p.

[mcDavid]

R4gnax schreef op zaterdag 22 oktober 2011 @ 13:10:
[...]
De oplossing is vrij simpel:
Het anchor element geef je met behulp van CSS een inline-block display en het image element geef je een block display. Op dat moment zit de baseline niet meer in de weg.

waarom dan niet gewoon vertical-align: bottom;

[NMe]

mcDavid schreef op zondag 23 oktober 2011 @ 23:14:
[...]

waarom dan niet gewoon vertical-align: bottom;

Omdat dat alignt op de baseline van je tekst en niet op de onderkant van je container. Zie ook http://phrogz.net/css/vertical-align/index.html.

[symvar]

martin149 schreef op zondag 23 oktober 2011 @ 21:25:
Dit is een beetje irrelevant, vaal aangezien je met een rewrite lijkt te werken is heb misschien handig om statische opjecten vanuit de root op te vragen, dus dvm

code:

<link href="/test.css" rel="stylesheet" type="text/css">

in plaats van

code:

<link href="../../test.css" rel="stylesheet" type="text/css">

Hierdoor wordt het bestand direct uit de root van de site gehaalt door se slash waarmee de url begint.

Ha die Martin,

Dat is een goeie tip inderdaad, ik heb het even op de testpagina geprobeerd en dat werkt prima.
Ik wou een keer een php framework gebruiken en met deze site ben ik CodeIgniter aan het testen.

Het liefst zou ik trouwens de index.php/ helemaal uit de url willen halen maar dat is nog niet gelukt

Dus i.p.v.
www.test.c0m/index.php/test
www.test.c0m/test

Op het CodeIgniter forum staat er een standaard werkwijze maar volgens mij heeft mijn webhost net een andere configuratie ofzo. Anyway, dat zoek ik nog wel eens uit.

Cheers