Borders on hyperlinked images

  • Hey all. Recently I fiddled with the coding on my site to replace all underliing for hyperlinks with borders. The idea was that if I used borders I could get dotted and dashed effects, whereas hyperlinks only allow solid bars.

    This post should show the problem. Hover over an image:

    https://michaeldowney.net/adventures-on-yakushima/

    I changed the code to add dotted borders to the links:

    a{
text-decoration: none;
color: #00736a;
border-bottom: 1px dotted #00736a;
}
a:hover {border-bottom: 0 none;}
a img{ border: 0 none; }

    But this also adds borders to the hyperlinked images. I managed to remove it from my sidebar images (the flags), but have been unsuccessful in doing it from the images in my posts I’m guessing because I cannot apply the following code to the .entry class where my posts are placed. (If I applied a border-bottom command there, it would negate the borders on everything, including my links).

    Here is the code in my sidebar to stop borders on the flag images:

    #sidebar .language a{
		border-bottom: 0 none;
		}

    Any ideas how I can do the same thing for images on the whole site? I only want hyperlinked text to have a bottom-border.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Tremor

    (@tremor)

    Any ideas?

    Thread Starter Tremor

    (@tremor)

    I have made some progress. I figured out that I could put the relevant code directly onto the class tags I used for images I use in my posts. In my case, left-aligned images and right-aligned images. But of course, it only counts for those classes – not normal images I use in posts… I coudl still use some help!

    Here is the code I have used so far:

    .thumbleft {
float:left;
margin: 0 10px 3px 0
}

a.thumbleft {
border-bottom: 1px solid #293624;
}

a:hover.thumbleft {
border-bottom: 1px solid #293624;
}

    As is usual, IE is still playing up a bit though…

    Hey, Tremor!

    I think that adding classes is the only way that works everywhere — but, unless you can automate it in some way, it is not practical. There is another method that would be perfect if all people used modern browsers:

    https://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

    It does not work in IE6. It does work in IE7.

    Thread Starter Tremor

    (@tremor)

    Thanks for the link demetris! It’s an excellent post. I’m looking into what I can do about adding classes now. If that fails I might have to use the method in that post.

    Any ideas?

    I need to remove the mouseover disappearing borders from normal medium-sized images in my posts, but I don’t want to go back and edit them all… Is there any way?

    Thread Starter Tremor

    (@tremor)

    Ah… it was causing too many problems in other areas of my site to bother with it. I decided to go back to regular old hyperlinks. Making websites cross-browser compatibile is really tough o.O

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Borders on hyperlinked images’ is closed to new replies.