Image Link Underline

[Sven Lennartz]

Hallo,

recently I purchased the Modern Studio Pro theme and the framework (for the first time). Everything is very well. But there is one thing which annoys me much.

The theme uses CSS border-bottom : 1px for it's linkage. Unfortunately linked images do have also an ugly link beneath. The demo file of the theme does not have any linked images.

how to get rid of this? I tried what I could and varied some additional CSS, but whatever I tried, the ugly border did not vanish. something like

a IMG {border : 0px!Important;}
IMG A:link {border : 0px!Important;}
IMG A {border-bottom : 0px!Important;}
etc

is not working. and yes, I need linked images.
I know there is a way - as always - because there are some linked images without a border-bottom (in the sidebar). but I couldn'd figure out why.

I'm pretty desperate about this ...

Is anyboby out there with an idea?

http://www.svens-fiction.de

[blaster]

You could either add a class to every anchor that contains an image (i.e., .no-border {border: 0;}) or in this particular case you could actually try .entry-content a > img {vertical-align: middle;} to remove the space below the image to overlap/hide the border.

Or ideally, you'd just remove the border altogether and use text-decoration instead:
.entry-content a {border: 0; text-decoration: underline; text-decoration-color: #f7a27f;}
That is, if you don't mind the current browser support for text-decoration-color or don't care about having the color..

[Sven Lennartz]

Hi Blaster,

great help!

I tried what you told me and dropped the border.
So this is my workaround:

a {border : 0px;}
.entry-content a {border: 0; text-decoration: underline;text-decoration-color: #0D4F8B;vertical-align: bottom; }
.entry-content a:hover {border: 0; text-decoration: none;vertical-align: bottom; }

The output is not the same as before. But it seems to work. The image bporder is gone. I guess I can live with it 😉

thank you very much!

[Author]

Posts