CSS image link attributes

[robertl]

Hi, My image links are taking on the attributes of text links (bottom border, specifically) how can i declare image link propertiesusing css that will over ride the text link properties?

Thank you for any help,

L

[nashultz07]

In the image code set border="0" and that should be all that you have to change.

Your code should look something like this (example has basic image coding):

Code: Select all

<img src="URL" border="0">

Hope this helps!

[Stuart]

It's better to do this with css. Img borders will not override the css-determined border. Put this into your css:

Code: Select all

a img {
border: 0;
}

Or, if you do not want this to apply to all anchored images, only a few, use the following:

Code: Select all

img.unstyled {
border: 0;
}

And put this into your img tag:

HTML: Select all

<img src="mypicture.gif" class="unstyled" />

That should do it...

Cheers,
Stuart

[karinne]

Originally Posted by nashultz07

In the image code set border="0" and that should be all that you have to change.

Your code should look something like this (example has basic image coding):

Code: Select all

<img src="URL" border="0">

Hope this helps!

The border attribute is deprecated for IMG and OBJECT elements.

See swagner's reply.

[robertl]

Hey guys, thanks for all the help. I tried to add

a img {
border: 0;
}

to the css, but I don't think it did the trick, although it seems to have worked in IE. I'm checking it in firefox with no change, though. Here is the site if it helps. I'm sure there are a hundred more erros y'all will see haha.. i'm just trying to figure this underline out..

thanks again!

[Stuart]

You forgot the link!

[robertl]

haha. whoops. http://www.timbarryrva.com

[Stuart]

Woah! What's with the frames? NOT GOOD! However, I found the css:

Code: Select all

<style type="text/css">
<!--
body {
    background-image: url(images/blback.gif);
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
body,td,th {
    color: #FFFFFF;
}
body,p,td{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
text-align:justify;
}
.text{
font-size:10px;
}
.bigtext{
font-size:12px;
font-weight: bold;
}
.datetext{
color: #5A5A3A;
font-size:13px;
font-weight: bold;
}
H1
{
    color: #5A5A3A;
    font: 2em Arial, Verdana, sans-serif;
    font-weight: bold;
}
a img {
border-bottom: 0;
}
a:link {
    color: #8F8F8F;
    text-decoration: none;
    border-bottom: 1px dotted #888;
}
a:visited {
    color: #8F8F8F;
    text-decoration: none;
    border-bottom: 1px dotted #888;
}
a:hover {
    color: #8F8F8F;
    text-decoration: none;
    border-bottom: 1px dotted #888;
}
a:active {
    text-decoration: none;
}
a img {
border-bottom: 0;
}

-->
</style>

Now, what I highlighted in red, needs to go! That should not be inside a css document.

Back to the problem. Try using border-bottom: none; for the 'a img' styling. '0' and 'none' are sometimes read differently by browsers. Then, also get rid of ':link' from in front of the 'a' styling. The anchors can be addressed by simply using:

Code: Select all

a {
styles: whatever;
}

':link' is unnecessary and might be causing the problem.

[Monie]

you could combine this two css into one!

HTML: Select all

a:visited, a:hover {
 color: #8F8F8F;
 text-decoration: none;
 border-bottom: 1px dotted #888;
}

and you could put a class in your link for your link that contain image