Link Image Css Bug In Firefox - Can anyone help me?

darran

Apr 12 2008, 03:07 AM

I have a problem in a site I am creating.

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

CODE

#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:

CODE

#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

truefusion

Apr 12 2008, 05:13 AM

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

Apr 12 2008, 06:02 AM

CODE

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

darran

Apr 12 2008, 09:17 AM

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:

CODE

#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

Apr 12 2008, 03:47 PM

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

Apr 12 2008, 04:43 PM

Try using this:

CODE

I used that on my site and it works fine.

jlhaslip

Apr 12 2008, 07:16 PM

QUOTE(Inhuman @ Apr 12 2008, 10:43 AM)

Try using this:

CODE

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

Apr 12 2008, 10:48 PM

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

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE