Display differences between Firefox and Chrome/IE

[iwama]

I'm at a loss to understand why I'm having HTML elements display in different places in Firefox compared to Chome and IE. I'm using position:absolute to place the title and subtitle text in a header where I want them to be but there seems to be about a 30px difference in the horizontal position of the text elements between FF and Chrome/IEThe HTML is simple and looks like this:\[code\]<div id="mainPage"><div id="mainContent" class="mainRounded"> <div id="header"> <div id="title"><h1>Longer Title Text</h1></div> <div id="subtitle"><h2>Subtitle text</h2></div> <div id="banner"></div> </div></div></div>\[/code\]and the CSS is this:\[code\].mainRounded {margin: 0 auto;width: 1000px;border-radius: 30px;background-color:#e9d7dc;box-shadow: 5px 5px 3px #888888;overflow:hidden;margin-bottom: 25px;}#header #banner {background-color: #0033CC;height: 150px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */position: relative;overflow:hidden;border-radius: 30px 30px 0 0;}#header #title {padding: 0 ;position: absolute;top: -40px;left: 710px;}#header #subtitle {padding: 0 ;position: absolute;top: 95px;left: 870px;}#header #title h1 {font-family: Georgia; font-size: 54px; font-style: italic; font-weight: normal;text-shadow: 2px 2px 5px #0033CC;}#header #subtitle h2 {font-family: Georgia; font-size: 26px; font-style: italic; font-weight: normal;}\[/code\]You can see this in situ on a test page here: http://mardona.org/test.phpI honestly don't understand what the difference is so any help would be appreciated.