CSS left margin not working in ie 7

[countrygirl]

Hi There;
I am relatively new to css and am having a big problem. My left margin is showing up fine in all browsers including ie8 but it put my navigation images in the center of the page in ie7. I have been searching google for hours and trying many suggestions I have found, but nothing I have tried fixes it. Can anyone tell me what I am doing wrong here?

This is my css

#div4 { 
	background-image: url(plank.gif);
	background-repeat: no-repeat;
	height: 36px;
	width: 136px;
	position: relative;
	top: 300px;
	left: -15px;
	
}

Here is the html:

<div id="div4">Home</div>

[websteralex]

#div4 {
	margin-right: auto;
	margin-left: auto;
	background-image: url(plank.gif);
	background-repeat: no-repeat;
	height: 36px;
	width: 136px;
	position: relative;
	top: 300px;

}

try using this

[abduraooft]

Can anyone tell me what I am doing wrong here?

We don't get anything useful from the above posted html/css. Could you post a link?

[countrygirl]

Thanks for your help, the first suggestion did not work. The link is
http://andersonranch.sasktelwebsite.net

[venegal]

When I view the CSS file linked on the site, it's empty.

[countrygirl]

I am so sorry about that, I was trying a few things but my filezilla at work overwrote the css file with a blank one. I have reuploaded it and the css file is there now. Please try again.

[venegal]

Your problem is the "text-align:center" in the body. Internet Explorer incorrectly uses text-align to center block elements (your ".sidelinks" divs).

A working solution would be to delete the positioning stuff from .sidelinks and instead put div4 - div7 in a wrapping div, which you can position absolutely. And maybe add "position:relative;" to your containing div (#div3), so that the absolute position of the sidelink wrapper is relative to that, and not relative to the whole viewport.

[zooeyglass]

try it on firefox