7 replies to this topic

[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?

Attached Files

•  firefox_bug.gif   50.17K   8 downloads

Edited by darran, 03 September 2009 - 11:24 AM.

[truefusion]

I've had this problem before when making my gallery script. This "extra border" is really the anchor element that's surrounding the image element. Since the anchor element is a inline-level element, it doesn't stretch to go around the image which is block-level. The easiest way to fix it is to remove the style which you attached to all anchors in the parent element. Another way is to make these anchor elements block-level with a predifined height and width, and probably just set the image as a background to these specific anchors. You could probably also force everyone to upgrade their Firefox to version 3. I'm not sure of any other ways to try and solve this problem.

[jlhaslip]

#post-content a.lightview {		   style.css (line 240)
background-color:#FAFAFA;		// same background-color as the surrounding area on the page
}

[darran]

I am not sure whether I have fixed that problem. Take a look again.

What I did was to set a class 'lightview' to my anchor and then reset the styles I used with this:

#post-content a.lightview, #post-content a.lightview:hover { /* Reset link styling */
	background: none;
	border: none;
	padding: 0;
}

Not sure if that is the 'correct' method of doing things.

Is version 3 already out? I haven't received any updates.

[jlhaslip]

That code will work.
The only trouble with it is that the "newest" browsers, Firefox 3 Beta, IE8 Beta and Opera 9.2something, treat the pixel values of a page as data for enlargement now, so even images are enlarged according to the magnification factor.
Your page at least stays within the boundaries of the header background, so it looks pretty good even up to 200% enlargement.

FF3 and IE8 are released for Development testing only. They are not "public" releases yet. They can be freely downloaded at the appropriate sites.

[Inhuman]

Try using this:

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

I used that on my site and it works fine.

[jlhaslip]

Inhuman, on Apr 12 2008, 10:43 AM, said:

Try using this:

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

I used that on my site and it works fine.

The problem is not the border on the image. The opening poster wants that border.

The issue is the background colour of the inline anchor tag which needed to be eliminated.
Adding the class to the anchor and removing the background colour handles the issue nicely, in a standards compliant fashion.

[Inhuman]

HA! Totally misinterpreted that. I think I should pay more attention.