padding problem in IE

[magicpants]

I'm getting different results in firefox and IE for my CSS layout. Basically I'm getting more padding in IE than the way i designed the site in firefox. I've created some pics so you can see what I mean.

Unfortunately, I majorly screwed up when upgrading to 1.3 by using files in the classic template. So, I'm using both stylesheet_original and stylesheet_new. I will absolutely fix this later on, but for now I gotta get this site launched. Please bear with me, but I'm so lost in my CSS, I can't figure out how to solve these problems.

Problem #1: My header is drawn to swoop down lower on the right side than the left -- so I need to pull the left sideboxes up a bit so visually it looks good. Like this in firefox: Example 1 in Firefox
In IE, it's sitting immediately under the header (leaving some whitespace on the left side): Example 1 in IE

The footers on all of the sideboxes are set too low on IE, but looking good in firefox. Here it is in firefox: Example 2 in Firefox
In IE: Example 2 in IE

And, the last problem is the padding in some of my defined pages. I set these up while looking at Firefox so they look good. In IE, there's way too much padding between the elements I've defined in the pages_define area. Here it is in firefox, the way I want it to look: Example 3 in Firefox
Here it is in IE: Example 3 in IE

Here's the defined page area for Example 3. This is about the only way I know to place things on the page, so I might be using some wonked method:
---------------------------------------
<p><div style="width:400px; position:relative; left:35px; top:-20px; text-align:center; background-color:#003366; color:#FFFFFF; border-width:5px; border-style:double; border-color:#FFFFFF; padding:4px; font-size:14px;">
<strong>B R O W S I N G</strong></div></p>

<p><span style="position:relative; left:35px; top:-25px; line-height:20px;">You can browse through all of our storefronts at the top of the page.<br>Click on the Bakery button to enter our bakery.</span></p>

<span style="position:relative; left:85px; top:-35px;"><img src="./includes/templates/yellow/images/icons/red_arrow.gif" align="top" alt="" /></span>
---------------------------------------

[kuroi]

Hi magicpants

There are a number of different causes of the sort of unwanted whitespace that you're seeing here in IE, each of which has several possible solutions. Unfortunately diagnosing the cause and getting the right soilution isn't really feasible from screenshots (unless you're very lucky and hit the right combination by accident). IS there a link to a site where we can see these behaviours in action?