 Image Wrapped By Anchor - Anchor Height?, anchor height is smaller than image by half? |
  |
 Nov 7 2009, 03:24 AM
Post
#1
|
|
|
Newbie  Group: Members Posts: 55 Joined: 19-October 09 Member No.: 34,612  |
I placed a single anchor with an image inside. How do I get the anchor to be sized equal in height and width to the image? I use a background color and an image margin left to show it on the page. This is messing up some effects that I'm trying to implement.
Thanx, http://nkcorner.com/tmp.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> </head> <body> <a href="tmp.php" style="background-color:red;"> <img src="get_adobe_reader.gif" style="width:112px;height:33px;margin-left:50px"></img> </a> </body> </html> This post has been edited by nachumk: Nov 7 2009, 04:30 AM |
 |
 
|
|
Nov 7 2009, 10:50 AM
Post
#2
|
|
|
53 79 6E 6F 6F 6B 0D 0A Group: Members Posts: 4,746 Joined: 14-July 07 From: Australia Member No.: 15,617 Languages: (X)(HT)ML, CSS, PHP, SQL, JavaScript, Java (a bit) |
The actual clickable area will be extended to the entire image, but since the anchor element is an inline one, the apparent height of the background will only be as high as the font-size. As for the width, remember that, for the parent element, the width of the image really does include the margin. The best way to fix that is probably to just apply the margin to the anchor element instead.
|
|
|
|
|
Nov 7 2009, 03:27 PM
Post
#3
|
|
|
Newbie Group: Members Posts: 55 Joined: 19-October 09 Member No.: 34,612 |
QUOTE (Synook @ Nov 7 2009, 05:50 AM)  The actual clickable area will be extended to the entire image, but since the anchor element is an inline one, the apparent height of the background will only be as high as the font-size. As for the width, remember that, for the parent element, the width of the image really does include the margin. The best way to fix that is probably to just apply the margin to the anchor element instead. That makes sense to me. Is there any way to force an anchor to take up the full size of the image? I don't need to add a margin - that was only for testing purposes. I would like to apply styles in general to the anchor and not the element underneath if possible. Thanx, |
|
|
|
|
Nov 7 2009, 04:28 PM
Post
#4
|
|
|
Devoted Member Group: Members Posts: 3,319 Joined: 16-January 08 Member No.: 19,529 |
If you give the anchor a display:inline-block property, you can give it a height property that will work. I don't know what your application is, so display:block might actually work better for you. Block causes the next element to appear after a "line break." Inline-block is useful when you want to preserve a continuous, horizontal appearance (like images run inline with text).
|
|
|
|
|
Nov 7 2009, 04:30 PM
Post
#5
|
|
|
Newbie Group: Members Posts: 55 Joined: 19-October 09 Member No.: 34,612 |
QUOTE (Deirdre's Dad @ Nov 7 2009, 11:28 AM) If you give the anchor a display:inline-block property, you can give it a height property that will work. I don't know what your application is, so display:block might actually work better for you. Block causes the next element to appear after a "line break." Inline-block is useful when you want to preserve a continuous, horizontal appearance (like images run inline with text). Yes but then I have to either use js or hard code the height in. Is there a way to make the anchor be resized to the full size of it's children ie the image? |
|
|
|
|
Nov 7 2009, 04:32 PM
Post
#6
|
|
|
Duotone Fox Group: Members Posts: 3,584 Joined: 6-November 07 Member No.: 18,212 Languages: (X)HTML, CSS, Javascript, PHP, SQL, XML [DOM]. |
QUOTE (nachumk @ Nov 7 2009, 04:30 PM) Yes but then I have to either use js or hard code the height in. Is there a way to make the anchor be resized to the full size of it's children ie the image? Both a block and inline-block display should do that. |
|
|
|
|
Nov 7 2009, 05:00 PM
Post
#7
|
|
|
Devoted Member Group: Members Posts: 3,319 Joined: 16-January 08 Member No.: 19,529 |
Yeah, sorry. As Ingolme says, the anchor will size itself automatically to its contents if it has one of the block display properties. I simply meant that a block-styled element will, in addition to this, accept a height definition if you need it to have one.
An inline anchor will not accept a height definition at all, which is the frustration you've been experiencing. Auto-sizing and the ability to accept a CSS dimensional property pretty much go together. If you have one, you have both. If not, neither. (As with everything else, exceptional circumstances--nothing that you're up to now--can mess with this.) |
|
|
|
|
Nov 7 2009, 05:03 PM
Post
#8
|
|
|
Newbie Group: Members Posts: 55 Joined: 19-October 09 Member No.: 34,612 |
Thanks for all the information. I know the key thing I just learned is that the anchor is originally the height of the font. Never would've thought of that on my own. The display:inline-block or display:block will definitely be useful. I'm kinda curious as to why there's a tiny bit of height sticking out beneath the image but I'm guessing that's tied into the font issue too. Extra vertical space for g j p ....
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd November 2009 - 12:24 AM |