Need help with the alignment in IE

Hi guys i just launch my new site. You can see it here Arcetal.com

When you visit it with firefox the alignment is just fine. But in IE it is aligned on the left...

I cant figure it our whats wrong with the css.

Please advice experts...

 

No doctype, so IE is in quirks mode... margin:auto doesn't work in quirks mode. I would add a doctype (without an XML prolog) to get IE6 and later out of quirks mode, and then just so that there might be a chance of the page working in IE 5.x (since some people are still stuck on that) I'd toss text-align:center on BODY so that in browsers still stuck in quirks the page is still centered.

Here's a tip, before suspecting your css, validate your markup - since this is something that should have been caught by validation... The ten currently listed errors are likely just the tip of the iceberg since the validator is making random assumptions without the doctype.

Not that one actually expects good code out of a turdpress template.

 

Thanks a lot deathshadow. Its fixed Now..

I will remember what you thought..


But another question for you. Notice the navigation at top at firefox you can see the bottom border there. But in ie its none at all... Any advice on that..?

 

Well, being that's a menu the first thing I'd do before even trying to fix it is turn that into a list... meaning we get rid of that div around it... as to the border not showing, that's simple - your anchors aren't set to display:block, so IE won't render borders on it.

I'd probably change the markup for that from that DIV to

<ul id="mainMenu">
	<li><a href="http://www.arcetal.com">Home</a></li>
	<li><a href="about-us.html">About us</a></li>
	<li><a href="client.html">Arcetal as your Client</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="contact-us.html">Contact Us</a></li>
</ul>

Code (markup):

With this as the CSS:

#mainMenu {
	list-style:none;
	float:right;
	padding-top:44px;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	float:left;
	margin-right: 22px;
	font:bold 100%/120% "trebuchet MS",arial,helvetica,sans-serif;
	color:#333;
	border-bottom:3px solid #06C;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	border-color:#F60;
}

Code (markup):

You'll notice I used margin instead of padding on the outer container - just to avoid collapse. Since you appear to be clearing it after with a DIV (also pointless) there's no reason to worry about a sideways margin. I also condensed the properties since there's no reason to say things that don't change, and of course added the OTHER psuedostates to the anchor so keyboard navigators aren't left out in the cold.

Little trick a lot of people don't realize, float left inside a float:right will actually still move the whole menu to the right side of the screen, and collapses the white-space between elements, AND trips display:block on your elements.

You've got a LOT of unneccessary stuff in there - all those clearing div's, multiple wrapping DIV on elements that don't appear to need them, a lack of heading tags on elements that appear to be headings, etc, etc.

 

Thanks again for spending time helping me.. I will keep that in mind.

I really need this kind of advice coz sometimes my coding is messed up. Do you think using ID's instead of classes is good? Because i am used in classes and sometimes i am having trouble to put styles on different ul, li tags...