nachumk Posted November 7, 2009 Share Posted November 7, 2009 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> Link to comment Share on other sites More sharing options...
Synook Posted November 7, 2009 Share Posted November 7, 2009 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. Link to comment Share on other sites More sharing options...
nachumk Posted November 7, 2009 Author Share Posted November 7, 2009 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, Link to comment Share on other sites More sharing options...
jeffman Posted November 7, 2009 Share Posted November 7, 2009 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). Link to comment Share on other sites More sharing options...
nachumk Posted November 7, 2009 Author Share Posted November 7, 2009 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? Link to comment Share on other sites More sharing options...
Ingolme Posted November 7, 2009 Share Posted November 7, 2009 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. Link to comment Share on other sites More sharing options...
jeffman Posted November 7, 2009 Share Posted November 7, 2009 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.) Link to comment Share on other sites More sharing options...
nachumk Posted November 7, 2009 Author Share Posted November 7, 2009 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 .... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.