PDA

View Full Version : Removing Background Color/Padding from images



shanparker
Nov 15th, 2006, 06:24 AM
I'm redesigning my journal and sometimes I don't always quite have the hang of CSS! I put a background color and padding on my links on my site be default, like such:


a:link { color: #333; background-color:#cf3; padding:2px 5px 2px 5px; text-decoration: none;}
a:visited { color: #333; background-color:#cf3; padding:2px 5px 2px 5px; text-decoration: none; }
a:hover { color: #333; background-color:#cf3; padding:2px 5px 2px 5px; text-decoration: none; }
a:active { color: #666; background-color:#cf3; padding:2px 5px 2px 5px; text-decoration: none; }

But now the issue is that all my images that are links are also getting this style, which I do not want. I've tried cancelling everything out on the img tag and nothing is working, this is what I have:


img {
border: 0px none;
background-color:#fff;
padding:0px none;
margin:0px none;
}

Any ideas :)

_Aerospace_Eng_
Nov 15th, 2006, 07:55 AM
Assign a class to the links that have images in them then cancel stuff out that way.

<a href="#" class="nobg"><img src="..." alt=""></a>

a.nobg {
padding:0;
border:0;
background:none;
}
You should read up on CSS as the question you asked was pretty simple.

Graft-Creative
Nov 15th, 2006, 10:42 AM
img {
border: 0px none;
background-color:#fff;
padding:0px none;
margin:0px none;
}

Shan, you're thinking along the right lines, but try specifically targeting images that are contained within < a > tags, see if this works:


a img {
border: 0;
background-color:#fff;
padding:0;
margin:0;
}

Kind regards,

Gary

VIPStephan
Nov 15th, 2006, 03:39 PM
Uhm Shan, Gary, I think both of you are thinking slightly along the wrong lines because it's the links (anchors) whose styles need to be reverted, not the images. Nothing will happen if you address the images within anchors since the anchors themselves are having the padding and background color. And currently there is no "parent selector" so the only way would be to use JavaScript to detect links that have images inside and set specific syling, or to go with what Aero said about assigning classes to the links that have images inside and revert the styles for these links then.

Hope that makes sense?

shanparker
Nov 15th, 2006, 04:07 PM
Uhm Shan, Gary, I think both of you are thinking slightly along the wrong lines because it's the links (anchors) whose styles need to be reverted, not the images. Nothing will happen if you address the images within anchors since the anchors themselves are having the padding and background color. And currently there is no "parent selector" so the only way would be to use JavaScript to detect links that have images inside and set specific syling, or to go with what Aero said about assigning classes to the links that have images inside and revert the styles for these links then.

Hope that makes sense?

Can you believe, I've tried everything suggested and it's still not working! I don't get why not though :(

rmedek
Nov 15th, 2006, 04:45 PM
Just start from the top…

First, style the normal links:


a:link, a:visited, a:hover {
color: #333;
background-color: #cf3;
padding:2px 5px 2px 5px;
text-decoration: none;
}

a:active {
color: #666;
background-color:#cf3;
padding:2px 5px 2px 5px;
text-decoration: none;
}


Then, take a look at the image:

<a href="#"><img src="image.gif" alt="" /></a>

You want to overwrite the link styles when you are using them with images. There's no way to target that with CSS just yet, so add a class to your link:

<a href="#" class="img_link"><img src="image.gif" alt="" /></a>

Then use this class to overwrite your previous link styles:

a.img_link {
background: none;
padding: 0;
}

Hope this helps…