html - Why does the <a> tag sit BELOW an <img> on screen (Firefox 4 + Chrome only!) -
i'm not sure if glitch/quirk in latest firefox , chrome, i've got <img> tag that's been encapsulated <a> tag turn image link.
the problem arises in click box link sits below image. image clickable, dead space under image clickable well.
the <img> has left , bottom margin rule applied it, think what's causing issue, don't understand why... i've tried using explicit </img> closing tags didn't solve issue either.
internet explore 8 works expected! not display issue below. shows box below image, dead space not clickable in ie 8. how think should work.
here's image clarify mean: 
i've added rule border <a> tags.
and here's code...
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> { text-decoration: none; border: 1px solid #f00; } #testimg { margin-left: 20%; margin-bottom: 25px; } </style> </head> <body> <div><a href="#"><img id="testimg" alt="" src="imgs/landing/popup_sendbtn.png" /></a></div> </body> </html> this driving me crazy! appreciated.
the clickable area beneath <img> textual content supposedly go in <a> element.
if want image area clickable, give <a> same width , height, make display: block, , move margins <a>.
a { display: block; width: /* width of image */; height: /* height of image */; text-decoration: none; margin-left: 20%; margin-bottom: 25px; border: 1px solid #f00; }
Comments
Post a Comment