Anchor around images

HTML & CSS
1
  1. I’m having a CSS problem when an anchor surrounds an image, i.e. a clickable image. As per my stylesheet, I have a dotted bottom border below all anchors, whether text or image and a border-bottom-width of thin. However, with images I’m getting a large gap between the image and the dotted border.

This is on a WordPress site and using Firebug in Firefox (which I’m trying to understand) it doesn’t point out any anchor styles or image styles. The only style that seems to be relevant is in default.css line 8:

p,ol,ul,dd,pre {margin-bottom:13 px;}

Why it is applying this I do not know, and why only to image anchors is even a greater mystery.

You can view the problem in one image at http://peterwade.com/links and with a heap of book cover images in the sidebar at [URL=“http://peterwade.com/in-christ-treasures”]http://peterwade.com/in-christ-treasures .

  1. There is also a problem at the top of the sidebar on http://peterwade.com/in-christ-treasures (see when using Web Developer and choosing Images / Outline images / All) with space above the row of flags in the Translate selection (though this involves Javascript and may be another problem). The same Translate box is on the top of the Home Page and doesn’t show the gap above.

Can anyone head me in the right direction on these two matters?

Many thanks,
Peter

2

Hi,
It looks like your images have a bottom margin set on them as well.

You can set vertical-align:bottom on the #main img but that does not take care of it completely. When I set margin:0 on it too I was able to remove it.

Try one of these two and adjust to your liking


[B]#main a img[/B] {
    vertical-align:bottom;
    margin:2px 0;
}

[B]#main a img[/B] {
    margin:0;
}
3

Thanks, Rayzur,

[B]#main a img[/B] {
    margin:0;
}

[/QUOTE]

That fixed the unwanted space.

I’ve tried

a img {border: none; }

to get rid of the

border-style: none none dotted;

but to no avail. I’ve even put it in the main style.css file. (I use the dotted bottom border for text links but don’t want it for image links.)

In Firebug, it still seems to be controlled by line 473 style.css –

#main a:visited {
    border-bottom: thin dotted;
    color: #4A4752;
    text-decoration: none;
}

Thanks,
Peter

4

Unfortunately, because you’ve applied the dotted bottom style to all links, you can’t then say—“o, but don’t do it if there’s an image inside” … because CSS can’t work in reverse like that, styling a parent element on the basis of a child.

So, in this situation you could change

#main a:link, #main a:active, #main a.postlink {
}

to something like

#main a.border:link, #main a.border:active, #main a.postlink {
}

and add a class of border (or whatever) to the links that you really want to have links. However, that’s a bit inefficient, and a bit of work to correct now.

Perhaps you could just use underline instead.