[CSS]Link + img werkt niet goed

[Megamind]

Ik heb dit stukje code:

code:

<style>
.photos {
    text-align:center;
    width: 100%;
}

.photos a {
    border: 1px solid #ccc;
}

.photos a:hover{
    border: 1px solid #778899;
}

.photos td img {
    padding: 4px;
    margin-top: 10px;
    border:0px;
}
</style>
<table class="photos" cellpadding="0" cellspacing="0">
    <tr>
        <td><a href="link"><img src="http://www.stemadviseur.com/images/icons/test.gif" width="48" height="48" alt="" /></a></td>
    </tr>
</table>

Vrij eenvoudig, hij moet een border om de link + image trekken die dan veranderd van kleur als je eroverheen gaat.

In IE7 gaat dit perfect, een mooi lijntje tot helemaal boven, maar kijk in firefox, dan heb ik maar een zielig balkje dat half door de img heen gaat. De link border wordt dus niet opgerekt door de img.

Ik had al zitten spelen met display's e.d. maar ik krijg het niet voor elkaar.

[Sebazzz]

Ik denk dat je beter een :hover kan toepassen op je img. Of dat in IE6 werkt weet ik niet.

[Verwijderd]

De grijze border die je ziet is niet de 'link' border, da's gewoon een losse border die je om de table .photos heen tekent. Daarnaast moet je bij img niet zeggen dat je border '0' is ander werkt het ook niet. Wat jij wilt is (waarschijnlijk) dit:

code:

<style type="text/css">
.photos {
    text-align:center;
    width: 100%;
}

.photos a {
    color: #ccc;
}

.photos a:hover{
    color: #778899;
}

.photos td img{
    padding: 4px;
    margin-top: 10px;
}

.photos td {
    border:0px;
}
</style>

[ Voor 9% gewijzigd door Verwijderd op 30-01-2008 18:45 . Reden: wat verbeteringen ]

[DeZzL]

Is er een reden om het geheel in een tabel te zetten?
Zo niet dan zou zoiets zou een nettere oplossing zijn

code:

<style>


a.photos {
border : 1px solid #000;
display:block;
height:48px;
width:48px;
background: url(http://www.stemadviseur.com/images/icons/test.gif) left no-repeat;
text-indent:-999px
}

a.photos:hover{
border-color:#33bbbb;
}

</style>



<a class="photos" href="link">Link</a>

[ Voor 9% gewijzigd door DeZzL op 30-01-2008 19:03 ]

[Zoefff]

Je anchor is een inline element. De afbeelding rekt zijn parent element dus niet uit waardoor je een "zielig balkje" door je image heen krijgt. Je kan het oplossen door je anchor een blokelement te maken (display: block;) of anders het lijntje en hover op de afbeelding te zetten. Dat laatste werkt echter niet in IE6 (kent de pseudo class :hover alleen op anchors) dus daar zal je dan nog een workaround voor moeten toepassen (hint: csshover.htc)

Verwijderd schreef op woensdag 30 januari 2008 @ 18:44:
De grijze border die je ziet is niet de 'link' border, da's gewoon een losse border die je om de table .photos heen tekent. Daarnaast moet je bij img niet zeggen dat je border '0' is ander werkt het ook niet. Wat jij wilt is (waarschijnlijk) dit:

De CSS van de TS is correct hoor. De border staat gewoon om anchors binnen de .photos tabel

DeZzL schreef op woensdag 30 januari 2008 @ 18:45:
Is er een reden om het geheel in een tabel te zetten?
Zoiets zou een nettere oplossing zijn

Dat is onzin natuurlijk. De context is onbekend dus je kan niet zeggen wat semantisch de juiste oplossing is. Voor het zelfde geld is dit gewoon tabulaire data en hoort het dus gewoon in een tabel thuis.

[ Voor 46% gewijzigd door Zoefff op 30-01-2008 18:52 ]

[DeZzL]

Zoefff schreef op woensdag 30 januari 2008 @ 18:46:
[...]
Dat is onzin natuurlijk. De context is onbekend dus je kan niet zeggen wat semantisch de juiste oplossing is. Voor het zelfde geld is dit gewoon tabulaire data en hoort het dus gewoon in een tabel thuis.

Vandaar ook dat ik vraag of er een reden is waarom het in een tabel staat. Als dat niet zo is dan lijkt dit me een betere oplossing.

[Megamind]

Het is inderdaad doordat het een inline element is, maar als ik er een blok element van maak wordt hij nog vreemder. Ik zal toch anders naar een zonder table oplossing kijken.

Btw ik heb een soortgelijk probleem in dezelfde sfeer die ik niet begrijp:

code:

<style>
.album {
    width: 600px;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom:10px;
}
.album a img {
    border: 0px;
    float: left;
}
.album .info {
    float: left;
    margin-left: 15px;
}
.album a {
    font-size: 1.1em;
    font-weight: bold;
}
.album .gray {
    color: #778;
    margin-top: 4px;
    display: block
}
.album .normal {
    display: block;
    margin-top: 4px;
}
</style>

<div class="album">
    <a href="link"><img src="http://www.stemadviseur.com/images/icons/test.gif" width="200" height="150" alt="" /></a>
    <div class="info">
        <a href="link">Album titel</a>
        <span class="gray">10 photos</span>
        <span class="normal">Album description</span>
        <span class="gray">Created on January 14 2008</span>
    </div>
</div>

Ik wil dus weer een border om het geheel krijgen. Met IE lukt dit prima, maar in FF krijg ik nu alleen bovenaan een smalle border.

Dit omdat er geen block elements instaan, maar omdat het floats zijn kan dat niet want dan komt het raar onder elkaar te staan.

Is er iets dat ik over het hoofd zie?

[Zoefff]

Megamind schreef op woensdag 30 januari 2008 @ 18:52:
Het is inderdaad doordat het een inline element is, maar als ik er een blok element van maak wordt hij nog vreemder. Ik zal toch anders naar een zonder table oplossing kijken.

Wat er gebeurt is logisch (en correct) gedrag hoor. Je hebt de tabel 100% breed gemaakt; een anchor als blokelement erft die 100% breedte over en daardoor ziet het er raar uit. Maar het is wel precies wat jij vertelt dat er moet gebeuren

Btw ik heb een soortgelijk probleem in dezelfde sfeer die ik niet begrijp:

code:

<style>
.album {
    width: 600px;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom:10px;
}
.album a img {
    border: 0px;
    float: left;
}
.album .info {
    float: left;
    margin-left: 15px;
}
.album a {
    font-size: 1.1em;
    font-weight: bold;
}
.album .gray {
    color: #778;
    margin-top: 4px;
    display: block
}
.album .normal {
    display: block;
    margin-top: 4px;
}
</style>

<div class="album">
    <a href="link"><img src="http://www.stemadviseur.com/images/icons/test.gif" width="200" height="150" alt="" /></a>
    <div class="info">
        <a href="link">Album titel</a>
        <span class="gray">10 photos</span>
        <span class="normal">Album description</span>
        <span class="gray">Created on January 14 2008</span>
    </div>
</div>

Ik wil dus weer een border om het geheel krijgen. Met IE lukt dit prima, maar in FF krijg ik nu alleen bovenaan een smalle border.

Dit omdat er geen block elements instaan, maar omdat het floats zijn kan dat niet want dan komt het raar onder elkaar te staan.

Is er iets dat ik over het hoofd zie?

Dat komt inderdaad doordat er alleen maar floatende elementen binnen de .album container zijn, waardoor deze dus geen hoogte krijgt. Je kan dit oplossen met een "overflow: auto;" op de .album container.

[DeZzL]

- te laat. Dat zeg ik, gamma!

[ Voor 120% gewijzigd door DeZzL op 30-01-2008 19:01 ]

[Megamind]

Perfect die overflow werkt!

Toch nog over die eerste, daar zou dan toch ook overflow:auto op moeten werken? Aangezien die image in die href moet flowen?

[Zoefff]

Nee. De anchor is een inline element en geen blokelement, daardoor gedraagt het zich anders. Zie ook de CSS 2.1 specificaties als je de precieze werking en regels wilt weten