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>

[lord_havoc]

I do have list-style: none; and yet again, it seems to not work. But that isn't quite a problem. The client said they liked the bullets so I won't worry about it.
---
Edit: and I do think it would be good to at least test Mac IE, we still have kids who take after our photography teacher and prefer to learn on the macs in his classroom. But they are so out dated it's crazy.

[lord_havoc]

Another question: why does IE6 bump the first picture down to the next line? If there is enough space to do it on one line in IE7 there should be enough space to do it in IE6... right?

[boogyman]

the more browsers you can test the better although I usually only go back 2 versions per browser type, as anything further back is very outdated anyway and needs to be updated



Another question: why does IE6 bump the first picture down to the next line? If there is enough space to do it on one line in IE7 there should be enough space to do it in IE6... right?
No - IE box model
non-IE7 versions have rendering problems