 Link Image Css Bug In Firefox, Can anyone help me? |
|
|
|
|
  |
 Apr 12 2008, 03:07 AM
Post
#1
|
|
|
Privileged Member  Group: Members Posts: 661 Joined: 31-August 06 From: Singapore Member No.: 29,189  |
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
Attached File(s)
|
 |
 
|
|
Apr 12 2008, 05:13 AM
Post
#2
|
|
|
Ephesians 6:10-17  Group: [MODERATOR] Posts: 1,916 Joined: 22-June 05 From: The World of Gentoo Member No.: 8,528 |
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.
|
|
|
|
|
Apr 12 2008, 06:02 AM
Post
#3
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing. Group: [MODERATOR] Posts: 4,077 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787  |
CODE #post-content a.lightview { style.css (line 240)
background-color:#FAFAFA; // same background-color as the surrounding area on the page } |
|
|
|
|
Apr 12 2008, 09:17 AM
Post
#4
|
|
|
Privileged Member Group: Members Posts: 661 Joined: 31-August 06 From: Singapore Member No.: 29,189 |
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. |
|
|
|
|
Apr 12 2008, 03:47 PM
Post
#5
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing. Group: [MODERATOR] Posts: 4,077 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787 |
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. |
|
|
|
|
Apr 12 2008, 04:43 PM
Post
#6
|
|
|
Advanced Member Group: [HOSTED] Posts: 121 Joined: 5-March 08 Member No.: 58,905 |
Try using this:
CODE <img src="IMAGE URL HERE" border="0"> I used that on my site and it works fine. |
|
|
|
|
Apr 12 2008, 07:16 PM
Post
#7
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing. Group: [MODERATOR] Posts: 4,077 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787 |
QUOTE(Inhuman @ Apr 12 2008, 10:43 AM)  Try using this: CODE <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. |
|
|
|
|
Apr 12 2008, 10:48 PM
Post
#8
|
|
|
Advanced Member Group: [HOSTED] Posts: 121 Joined: 5-March 08 Member No.: 58,905 |
HA! Totally misinterpreted that. I think I should pay more attention.
|
|
|
|
|
Similar Topics