www.webdeveloper.com
Results 1 to 6 of 6

Thread: link bleeding outside image area

  1. #1
    Join Date
    Oct 2010
    Posts
    3

    link bleeding outside image area

    I'm not sure whether this would be best posted here or in the CSS forum, as I suspect its caused by both. I have an image link on my new site, but the <a> box seems to be larger than the image it contains. The code is as follows:

    HTML Code:
    <a class="imglink" name="top" href="index.php">
    <img id="mainlogo" src="siteimages/mainlogo.jpg" width="300" height="100" alt="The Railways Archive"></img>
    </a>
    CSS relating to this is as follows:

    Code:
    a.imglink {
    	background: none;
    	margin: 0;
    	padding: 0;
    }
    
    #mainlogo {
    	margin: 0;
    	padding: 0;
    }
    you can see the result here:

    http://www.railwaysarchive.co.uk/new

    The maroon logo image (strictly a temporary image!) at top left is 100px deep. But an extra 4 pixels is being added to the link size in both FF and IE, forcing the banner to be bigger and wrecking the look.

    Can anyone help and tell me what I'm doing wrong?

  2. #2
    Join Date
    Jul 2010
    Posts
    12
    I'm not seeing the problem being reproduced in any browser, so it's hard to say for certain - but it's likely a line-height problem within the anchor with the imglink class: You can set a line-height within a.imglink of 0 (may affect link-clicking ability, depending on the rest of your css), 1em (may make matters worse, depending on the rest of your css) or an exact pixel size (may affect other links since it's a class) and see if any of those sort it.
    Learn PHP: nodehead.com

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    #mainlogo {vertical-align:top}
    https://developer.mozilla.org/en/Ima...ysterious_Gaps
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Oct 2010
    Posts
    3
    I'm pretty sure it's there in every browser - I just checked Chrome and its there too. It's highlighted in this screen grab:

    http://www.railwaysarchive.co.uk/temp/screen.jpg

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use the fix given in #3
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Oct 2010
    Posts
    3
    Quote Originally Posted by Fang View Post
    Code:
    #mainlogo {vertical-align:top}
    https://developer.mozilla.org/en/Ima...ysterious_Gaps
    thats cracked it, thanks Fang! your link reminded me that I have come across this problem in the distant past - too distant to remember the solution. Thansk again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles