Image link css bug in FireFox

[Darran]

I have a problem in a site I am creating.

I have styled my post content <a> links in the following way.

#post-content a {
	background-color: #bf6f3c;
	color: #fff;
	padding: 2px 2px 1px 2px;
	border-bottom: 1px solid #7f4926;
}

#post-content a:hover {
	color: #f5fac7;
}

And when I insert an link image like so: <a href=""><img src="" /></a>

There seems to be an extra border inherited from my #post-content a style. I have attached the screenshot to show the problem.

This was how my link image should look like:

#post-content a img {
	background-color: #bf6f3c;
	padding: 5px;
	border-bottom: 1px solid #7f4926;
	border-right: 1px solid #7f4926;
}

Can anyone guide me as to how I can fix this problem?

My site URL is here

 

[angelwatt]

Well, it's not just Firefox, and also not a bug. It's behaving correctly. I see you've put a class name on the surrounding link tag for that image. Given that you can add the following CSS.

#post-content a.test {
 padding: 0;
 background: #fff;
 border: none;
}

This'll simply undo the other CSS for links. Not sure there's another way to get around it. I've run into the same type of thing before.

 

[Darran]

I have done what you said.

But take a look.

I added this

#post-content img {
	padding: 5px 5px 4px 5px;
	border-bottom: 1px solid #7f4926;
	background-color: #bf6f3c;
}

It works fine, but I want the background to change when I hover, and it is not possible to do it using the previous class. Any workarounds?

Crash that, I fixed it. Thanks for your help!

 

[Darran]

I have made some changes, and it is looking good.

But there seems to be an extra pixel below the border, such that hovering it, will change the background color, when there is nothing there. I wonder is it just me or is there really a pixel there?

 

[angelwatt]

I have made some changes, and it is looking good.

But there seems to be an extra pixel below the border, such that hovering it, will change the background color, when there is nothing there. I wonder is it just me or is there really a pixel there?

I only see the pixel border that you have define with the CSS in the previous post that's one pixel tall.

 

[Darran]

Thank you for your help, I am almost done with my WordPress theme, just some stupid fixes for IE6 left to be done.

 

[Photomax]

Sometimes you will get an unwanted border around images. One of the things I do before adding any specific CSS to my html code structure is to starting with a CSS declaration of:

fieldset,img { border : 0; }