I've got a new theme I've hacked together at http://nunnone.com that I'm in love with, but it's massively broken across different browsers. Normally when I've made sites in the past, they've all looked pretty much the same across each of the 'standards compliant' browsers (Opera/firefox/safari) and are somewhat broken in IE7. This time however, my left hand margin has a different problem on each browser I've tried.
For instance: Opera renders the photo captions correctly (.caption) but shifts .postmetatext up. Firefox renders .postmetatext correctly but .caption is too low. Safari renders both correctly, but 'blockquote cite' is all wrong. 'blockquote cite' is too low in camino, but too high in firefox. And don't get me started on IE.
In the past I've just dealt with IE's minor annoyances, but this time round they're all giving me grief. I expect it's something simple like leaving a width off a crucial div, or not adding z-index or something equally as random.
Am I missing a simple attribute that will bring the majority of browsers into line? Or do they all just interpret this kind of thing differently. This is the most complex CSS I've ever tried, and I'm positive there's a little trick I've missed in my setup that will make it all good. Please let there be...
OK. Thanks to this site: http://www.wp-themes.designdisease.com/testrun/ I was able to check where my coding might be wrong. I'd tried adding top:0; before, but it was shooting to the top of the page. But by going back to each parent element and adding 'position:relative' to them, then fixing my code with