img link code not working

[ModernRevolutions]

Okay so my site is here: http://www.modernrevolutions.net
I currently have this code in my stylesheet so that linked images have no border or underline:

img {border:0px;}
I have tried almost every variation of this code I could think of, even adding !important to it and everything, but for some reason it all the linked images have a underline/bottom border. Can someone please help me??

[deathbycheese]

Do you have the link (that contains the image) set to be underlined? AND is it located in your css after the img {0 !important;} ? If so, this will probably override it.

dbc

[davelf]

img{
border:none;
}

[jscheuer1]

Ordinarily the way to be sure is:


img { border-width: 0 !important; }

The !important keyword is to override any other style that might contradict this one. And explicitly setting the border-width to 0 has proven to be the most cross browser way of eliminating the border.

But I see from looking at the page that this will not take care of it in this case. I'm not 100% sure why (I think it's because the style isn't on the img tag at all), but it's obvious that (starting at line #69 in wordpress/wp-content/themes/Kaley/style.css) these are the culprits:


a:link, a:visited, a:active {
color :#000000;
font-size:12px;
font-family: Georgia;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
text-decoration:none;
border-bottom:1px dotted #363636;
}

a:hover {
color :#363636;
font-family: Georgia;
font-weight: normal;
letter-spacing: 1px;
border-bottom:1px solid #000000;
}

The only way I can think of to have it both ways would be to use class, one way of doing that is:


.lined:link, .lined:visited, .lined:active {
color :#000000;
font-size:12px;
font-family: Georgia;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
text-decoration:none;
border-bottom:1px dotted #363636;
}

.lined:hover {
color :#363636;
font-family: Georgia;
font-weight: normal;
letter-spacing: 1px;
border-bottom:1px solid #000000;
}

And then, going back over the markup giving that class name to only those links that you want to have receive that treatment.

[ModernRevolutions]

I am just a little confused. So I'd have to change my link code to a class and then add that class to every link?

[jscheuer1]

Yes to the first part about changing the css as suggested to key off of a class. And to every link that you want to have that bottom border, yes you would have to add that class in the markup to each of those links. This is little different than is already done with the .navi1 class for another set of links..

If you look at the page most of the text links have that dotted bottom border. On hover it becomes solid. So yes, if you want to keep that for those, make the change as suggested to the css and give those links the class. Do not give the class to the links that are linked images.

Or, if you don't want that bottom border for any links, just get rid of the highlighted lines:


a:link, a:visited, a:active {
color :#000000;
font-size:12px;
font-family: Georgia;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
text-decoration:none;
border-bottom:1px dotted #363636;
}

a:hover {
color :#363636;
font-family: Georgia;
font-weight: normal;
letter-spacing: 1px;
border-bottom:1px solid #000000;
}

Or, you could leave it alone and make up another class for the links with images:


a.imglnk:link, a.imglnk:visited, a.imglnk:active, a.imglnk:hover {
border-width: 0 !important;
}

And apply its class to all of the a tags that are linking images.

[ModernRevolutions]

Ahh the class for linked images would be much easier. Thanks a million! :)
Are you good at HTML too? because i have a thread posted in HTML and it seems nobody can figure it out D: lol

[deathbycheese]

John's good at everything! He's the DD guru. :D

Affectionately,
dbc