Edit Question - KnowledgeHub

Title Body

I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <style type='text/css'> </style> </head> <body> <button style='height:100px;width:100px;position:relative;'> <span style='position:absolute;top:0;left:0;'>text</span> </button> </body> </html> <span> is placed relative to the vertical- middle line (with 3px padding I can't explain). Replacing <button> with <div> does places <span> at the top-left corner. Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div> ? And how do I fix it? Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners. EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).

Tags (comma-separated) Cancel