The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I can't see a pink bar at the bottom so not sure what you're after but here's a couple of suggestions.

Validate your code at http://w3.validator.org there's a few problems in that you're using multiple ID's. Presumably you're using it for styling so where you have multiple instances you should always use a class.

In your CSS use the following as the first line in your code

Code:

* {
padding: 0; margin: 0;
}

All browsers have different default's set for different elements so what this does is set every element on the page to zero instead of relying on the browser default.

You'll then need to go through your code and apply it where you need it but you'll get much more consistent results and will probably help solve your problem with things lining up correctly in Firefox and IE.

I'd initially look at using floats and the padding/margin on an element along with a background image to get a foreground image to lineup with a background image but it isn't clear from your page what you're after which is probably why you've not had any responses.