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: image

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

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -