vertical/horizontal alignment, CSS

Two Issues:

The alignment of the menu items.

First, I had to use a negative value to align these horizontally. And the vertical alignment is different in IE vs. FF. The way it appears in IE is where I want it placed vertically.

#navlistdiv {position: absolute;left: -22px;top: 72px;z-index: 2;}

How would I place them horizontally without using a negative value, and get the same results in IE & FF vertically?

Second, the background aligns in IE, but not in FF. Link below:


http://www.ekigroup.com/temp/veProto.html

How to fix this?


The entire CSS:

html, body {margin: 0px;padding: 0px;background: url(images/bg3.gif);}
#bgImg {position: absolute;left: 50%;width: 758px;height: 650px;background: url(images/veProtoDrop.gif);margin-left: -379px;}
#navlistdiv {position: absolute;left: -22px;top: 72px;z-index: 2;}
#navlist li {display: inline;list-style-type: none;text-align: left;font-family: arial;font-size: 11px;color: #000000;}
.mainnav {text-decoration: none;color: #000000;}

Any help is appreciated.



-james

The alignment of the menu items.

First, I had to use a negative value to align these horizontally. And the vertical alignment is different in IE vs. FF. The way it appears in IE is where I want it placed vertically.

How would I place them horizontally without using a negative value, and get the same results in IE & FF vertically?
I have had similar problems before, and as far as I can work out this seems to be caused by IE interpreting margin values in a different way to other browsers.

It often seems to ignore margin settings applied to body and html.

I have had similar problems before, and as far as I can work out this seems to be caused by IE interpreting margin values in a different way to other browsers.

It often seems to ignore margin settings applied to body and html.

Thanks for responding.

Can anyone propose a solution? Especially, to the second [vertical alignment] issue.



-james

As for the navigation I think it may have something to do with the different default margin and padding browsers apply to lists (and other elements).

To keep things consistent across browsers it can help to set both margin and padding to zero and adjust from there. If you let different browsers apply their own default values it can have unpredictable results.

Are you attempting to center the background image?

If so you can do something like this... give your body text-align:center; this will center it in IE. Then give your bgImg div text-align:left; and margin:0 auto;.

The text-align:left; is to override the text-align:center; of its parent and margin:0 auto; gives top and bottom zero margin while the auto centers bgImg horizontally in standards compliant browsers.

Are you attempting to center the background image?

If so you can do something like this... give your body text-align:center; this will center it in IE. Then give your bgImg div text-align:left; and margin:0 auto;.

The text-align:left; is to override the text-align:center; of its parent and margin:0 auto; gives top and bottom zero margin while the auto centers bgImg horizontally in standards compliant browsers.

mcdougals4all:

Thanks for responding!

I already centered the background image using a negative margin. That's not an issue.

I had already set my body margin and padding to 0 as well. I added auto to that, but it didn't affect the layout.



-james