Text-Align: Center Moving Block Elements in IE

[Bjorn2404]

I have a left-hand navigation column on a template where text-align: center is moving block elements slightly in Internet Explorer (looks fine in FF, Opera, etc.) - it's moving the entire block, not just the text.

If I remove the text-align rule from my stylesheet it looks fine in IE but then the margins aren't correct that I've got set up in all other browsers (I prefer not to write any custom browser rules if possible).

It's happening in IE7 on down.

Anyone know how to get around this?

[fredda]

Are you using a list for your menu? Any chance you could post your code?

[Bjorn2404]

Oh, I fixed it. I had the text-align center in the container but moved it to the link (a) identifier.

[fredda]

hmm the only thing I can see is the double margin bug but that doesn't affect IE7.

#left-column
{
		float: left;
		margin-top: 10px;
		margin-left: 8px;
		width: 230px;
		height: 499px;
		background: url(../images/left-column-back.png);
}

Should be

#left-column
{
		float: left;
		margin-top: 10px;
		margin-left: 8px;
		width: 230px;
		height: 499px;
                display: inline;
		background: url(../images/left-column-back.png);
}

Otherwise IE6 will add 16px left margin instead of 8px.

Could you post all your code here or better yet to a live server? I think the problem lies somewhere else in your code.

[Bjorn2404]

Thanks, I edited my post above with a fix.

I moved the text-align rule to the link identifier and that worked.