darran 0 Report post Posted April 12, 2008 (edited) 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? Edited September 3, 2009 by darran (see edit history) Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 12, 2008 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
jlhaslip 4 Report post Posted April 12, 2008 #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
darran 0 Report post Posted April 12, 2008 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
jlhaslip 4 Report post Posted April 12, 2008 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
Inhuman 0 Report post Posted April 12, 2008 Try using this: <img src="IMAGE URL HERE" border="0"> I used that on my site and it works fine. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted April 12, 2008 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
Inhuman 0 Report post Posted April 12, 2008 HA! Totally misinterpreted that. I think I should pay more attention. Share this post Link to post Share on other sites