different div positions in IE9 FF and chrome

I have already asked this question but I didn't get a specific answer. so I thought to ask a simplified version of the questionI am making a website and want to place the div at a specific height. I cannot set the margin-top in px terms as if the browser window re sizes, the div remains at that px. I have specified this in %. if the margin-top is in px, it is fine in all browsers but if it is in % then IE9 IE10 and FF behave crazy.The code below is very simple with nothing difficult. I even tried reset css but didn't get it right. can anyone please spare few moments and help me in this.and i am currently loading the page from the harddisk not from the internet.Thanks\[code\]> <!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"><html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Train of Thought</title> <style type="text/css">div.content { height:200px; visibility:visible; border-style: none; display: block; position: fixed; text-align: center; z-index: 1; padding-top: 0px; border-top: 0px; padding-bottom: 0px; border-bottom: 0px; background-color: #00FFFF; font-family:Arial,sans-serif; overflow: auto; margin-left: 23%; margin-right:25%; font-size:150%; margin-top: 40%;} </style></head><body><div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.</div></body></html>\[/code\]
 
Back
Top