Jump to content
xisto Community
darran

Link Image Css Bug In Firefox Can anyone help me?

Recommended Posts

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?

post-29189-1207969022_thumb.gif

Edited by darran (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.