Hot do I center a set pixel size div in IE?

[lord_havoc]

I have my container div that is 800 px wide. I know its best to use percentages and I usually do but if it is smaller than it cuts the images to the next line. So how can I center it in IE? I am trying to use the underscore hack so it won't mess with my CSS for FF. Does anybody know how to fix this problem so it is centered in all resolutions?

The site is question is http://cyanideperfection.net/test/index.html

[TMPS]

Did you try margin:auto; for your div.container ?

I know it will move you to the middle horizontally but I am not sure about vertical position...

[Spiritvn]

margin: auto; will center the div.container both horizonal and vertical. Try to use margin: 0px auto;

[naiani]

Using margin: 0px auto; will center the page on FF.
To center it on IE, you have to apply text-align: center; to the body and text-align: left; to the div.container.

-----

EDIT: I forgot to re-enforce that this won't do anything for your layout on FF, so don't worry about screwing up your layout on it. The only effect it will have on your layout is the center positioning on IE.

[lord_havoc]

Yeah, that is what I use, but IE aligns it all the way to the left for some reason. FF shows it centered. And I haven't even gotten to check it in Opera or Safari yet.

#container{
        width: 800px;
	margin: 0px auto;
}

That is the CSS I am using and yet it still isn't centered.

[jscheuer1]

What version of IE are you using? With IE 6 and later, using a valid DOCTYPE, that will work. In fact, when I tested your page last night in IE 7, the content was centered. Perhaps you need to clear your cache.

[naiani]

Now I know why only setting the margins didn't work on IE7 with my page: I was using XHTML DOCTYPE.
Now that I'm using HTML DOCTYPE, it works. But anyway, it's always better to be prepared for everything. And it's not like two lines will add a lot to the code...

[lord_havoc]

Oh thats right! I was reading another thread and forgot to change my DOCTYPE when I realized that it was causing the problem. I am testing in IE 6 by the way because I am not on my own computer and the owner won't let me download IE7 to test it. Is there somewhere I can go or something I can install rather than download all those browsers just to test them?

Also, how do make lists not show the bullets in IE?

[naiani]

Apply list-style: none; to the UL style.

There's a website that generates an image of the website showing how it's rendered on every version of IE: http://ipinfo.info/netrenderer/. It's an image, but it's better than nothing, I think. At least you can check how the positioning/dimension, which are the most problematic issues on IE, will look like on them.

-----

EDIT: I just re-checked. It's not every version of IE. It doesn't test on IE Mac and IE4. I wonder if it's still possible/necessary to test the website on these versions...

[boogyman]

I believe there was a site posted before in a post that will allow you to test render a page in different versions of browsers... maybe said person will share again... if not just search google
and to center your content within the page
you need to center the body and then left align the content text

 
<style type="text/css">
<!--
body {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
#container {
   text-align: left;
}
-->
</style>

Also, how do make lists not show the bullets in IE?

add this to your your css file

<style type="text/css">
<!--
ul li {
   list-style: none;
}

-->
</style>