Center a div inside another div

[Lynxo]

Hi.

I'm currently practising my skills by looking at existing sites and try to recreate it. Of course, it's all copyrighted material, but I'm not planning to publish it anywhere so...

Anyway, the problem I ran into, was (of course) that it looked different in Firefox and IE. I have two divs, one that runs across the whole screen (width: 100%) and a div inside it containing a picture, a img tag (the logo) and a list (the menu).

The problem is that in Firefox, the menu list kinda overlaps the image, which I don't want it to. I took this picture to illustrate it (with a border in the left image, showing the problem in Firefox).

The ul's padding is set to zero, but if I change it, the menu moves in both IE and Firefox, making it look bad in Internet Explorer instead...

BTW, the menu is supposed to be under all the pink stuff, mainly because I'm gonna edit the logo myself, and when I do that, I want the menu links to be RIGHT under the logo.

Grateful for any help.

EDIT: sorry about the misleading title, did a mistake, and I can't seem to edit it...

[Wickham]

It looks like another ul or li padding or margin difference between IE and Firefox. There was a post involving this only yesterday or the day before and it crops up regularly. The two browsers set the defaults differently.

In these situations get it right for Firefox first as it is the most standards compliant browser and likely to be OK with other browsers except IE.

This will involve putting a style for the ul or li tag in your stylesheet or in style tags in your html page head section:-
ul { padding-top: 5px; }

You will have to use trial and error. It could be the ul or li tag that needs editing, it could be a different size or even a minus size and it could be padding-bottom or margin-top or margin-bottom.

If it then looks different but acceptable in IE, leave it.

If you find IE is displaying unacceptably, you either have to fiddle with the padding until it looks OK on both (but this is often difficult), or add a conditional comment that revises the padding only in IE (probably to reverse the style edit for Firefox).

Add this as the last item in your html page head section:-

<!--[if IE]>
<style type="text/css">
ul { padding-top: ?px; }
</style>
<![endif]-->

You will probably have to use trial and error to find out what works best and the size (it might even be a minus size). It might be padding-bottom or margin-top or margin-bottom.

If you have many pages with the same problem you can create a separate stylesheet with only the revised code and link to the stylesheet in the conditional comment:-
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css"/>
<![endif]-->