Why my site is not centered in IE?

It is really frustrating that I am trying a lot to center my site in IE but it is not still working. It is working fine in other browsers but not in IE. anyone can help ?

http://www.tayyabsurgical.com/

above is the link of site.

Asalaam malaikum (i figured that since you location is in Pakistan, you are muslim too but if not It is an arabic-greeting that means may peace be with you and i wish it to all :slight_smile: )

Could you link so code and in i tried it in IE it seems fine :slight_smile:

Could u also link / attach some screenshots of what you seeing

Hope to hear from you soon and Regards,
Team 1504

I have attached what I am looking in my IE8

Wa alikum Salam bro ! am Muslim :wink: Alhumdolillah

What I normally do for IE is add

text-align:center;

to the body tag

and

text-align:left;

to the container tag. This influences IE to place the content centered.

as Stomme poes very good explained in this post:

http://www.sitepoint.com/forums/showthread.php?t=683888

and here i quote him:

Only in IE. text-align: center cannot center blocks in modern browsers. Automargins will center blocks in modern browsers and IE, so long as IE sees a complete doctype and doesn’t fall into Quirks Mode.

I hope his will solve your IE problem

Or Instead of applying the styling just to the text content You could wrap the text content in its own div tag. Then you could use margins to centre that div tag

In head:
<style>
#contentContainer{
margin: 0px auto 0px auto;
<!-- In other words, margin-top, margin-bottom: 0px;
And for margin-left, margin-right: auto;
This is the typical standard.for centering an element
In CSS using margins –>

in body:

<div id=“contentContainer”>
<!-- <p>'s and text go here –>
</div >

If.you want an html5 alternative to the body code then:
Or Instead of applying the styling just to the text content You could wrap the text content in its own div tag. Then you could use margins to centre that div tag

In head:
<style>
#contentContainer{
margin: 0px auto 0px auto;
<!-- In other words, margin-top, margin-bottom: 0px;
And for margin-left, margin-right: auto;
This is the typical standard.for centering an element
In CSS using margins –>

in body:

<div id=“contentContainer”>
<!-- <p>'s and text go here –>
</div >

If.you want an html5 alternative to the body code then:
<article id=“contentContainer”>
<header> <h1> title of content goes here </h1></header>
<p> Content Lorem Ipsum Content. </p>
</article>

Regards,
Team 1504

Hiddenpearls:

your site is not centered in IE because you told it not to be:


[b]<!--[if IE]>[/b]
<style>
.wrapper {
width: 940px;
[b]margin: 0 40px; <-- right here[/b]
position:relative;
}
#featured li img {
float:right;
position: relative;
top: 5px;
left: -170px;
}
</style>
<![endif]--> 

If you remove that (your regular CSS already says width: 940px, margin: 0 auto and position: relative) then IE will act like everyone else.

Margin: 0 auto tells the browser, no margin top or bottom, and automatically make the sides equal. This ends up centering anyone not 100% width of their parent container.

When you say margin: 0 40px, that’s no longer automatically making the sides equal in relation to width of the container. It’s just 40px from left, and 40px from right. So IE shows your page 40px from left.

As said donboe text-align: center on your body tag shoud do the trick. But don’t forget to reset this propriety in wrapper content or you’ll get a surprise: all text will be centered

Please, folks, do not continue telling people to use deprecated methods. This only drags down the web development industry.

Text-align: center was never intended to center block elements such as divs. It is an IE bug that became popular because long ago IE was the only browser people used.

Do not cater to Microsoft’s terrible products’ bugs or to their total disregard for standards. So long as your page has a valid and complete doctype, IE6 and above will obey automargins for centering the same way all the other browsers in the universe do.

Use text-align: center for IE5 and below. Hiddenpearls’ site is not built for IE5 at all (which is fine).

I completely agree with stomme Poes! I just didn’t know how to say it so instead of confronting text-align as a valid solution, I came up with the completley different margin solution.

have a look at site now. I remove margin: 0 40px; but IE doesn’t take that margin defined in CSS.

Funnily enough, if I copy your HTML and place it on my site, IE centers it.

http://stommepoes.nl/temp.html

http://stommepoes.nl/temp.png Notice some stuff in the black box doesn’t line up correctly too.

Because you reference your CSS stylesheets and images with absolute url’s (with http: etc), I didn’t have to do anything else. All I did was copy the main page HTML and move it.

Is there some local file causing this?? It would also be making the stuff under the Javascript slider line up as well.

You could start (temporarily, for testing) moving your main page, then each of the files over to another machine (even a local machine) to find the file that’s causing the issue.

Agree this methods drags down the web dev industry, but make the client happy.

Could you tell us what is the right doctype that will make IE6 to center a wrapper without a hack. I know may webdesigners who will be glad to know. Me to as well

There are other ways to get the client happy while still not dragging down the web dev industry. It’s just as easy to use proper methods and center instead of using deprecated methods.

Any full doctype with margin:0 auto (and width) will center.

Any doctype with a URI that is, transitional, strict, using HTML 4.01, or XHTML 1.0 etc.

Here is one example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

-transitional.dtd"> 
<html>
<head>
<title>Holy balls I'm centered</title>
<style>
.wrap{margin:0 auto;width:800px;border:1px solid 

red;height:400px;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

Allow me to raise my hat (even i don’t have one right now) (i’ve just test it the code). All this years i though the aligning problem is an IE6 bug, and the solution is text-align hack. Tnx this was indeed something useful for me!

Well it technically is a bug if you don’t have a full doctype (because then quirks mode triggers and behaves like IE5, which doesn’t allow auto margins for centering)

So technically you thought right in thinking it was a bug :wink:

Anyone have any luck finding whatever file it might be that’s screwing with hiddenpearls’ page?? Every link I see on that page is an absolute link, yet simply copying that main page’s HTML over to my server magically fixes the problem. wtf??

how you copy the pages + css + js files ?
when i copy the pages, It puts all js+css files after body tag. but I saw in your uploaded files that , js + css files are in head tag.

but this is a wordpress page and I put wp_head() in head tag.
and the important is , see products page. It is in center.

how you copy the pages + css + js files ?
when i copy the pages, It puts all js+css files after body tag. but I saw in your uploaded files that , js + css files are in head tag.

All I did was, I had your main page open. I went to View Source in my browser (which shows me your HTML). I copied that text, saved it as a whole new file (temp.html), and just put that new file on my server.

Your JS and CSS are referenced in the head by absolute urls (meaning, anyone looking at my temp.html page, their browser is following those links to YOUR server and grabbing your Javascript and CSS).

So, in your main page, the js and css files must really also be before the <body> tag, because I did not change any line of code. They certainly must not be allowed after the body tag!

Which is why I think somehow a local file is causing the issue. I don’t have any of your local files, only your main page HTML. This could also explain why your other pages are fine (centered).

The way I do it is, open your source, copy that to my file (asdf.html), first line after <head> I add <base href=“” />. In the quotes I put the URL of the page. Wala. Magic.