IE 6 Display Problems (big surprise)

Hello Everyone,

I just started using CSS and I am having some quirky issues with IE6. My Site works on every other browser but IE6 is having some issues. My content boxes are floated left (there are three of them) and each of them has a fixed width of 180px. In the middle of each box is a picture (55px in width) and I use the margins to center them. These images display fine in all other browsers but on IE6 they are all pushed to the very right of the box.

Does IE6 translate a margin left or right in px differently than other browsers? Should I be using a percent instead of px? Here is some of the code and I will include the image files so it will display properly.

Thanks as always,
Jeff

If you're floating your images, IE6 will double your margins.
To counter this, use margin: 0 auto; to center your images instead.

Or display them inline should cancel the double margins... but the above method (as long as they have a width set) will work very nicely to center them in the divs.

Thank you so much for the advice. I will certainly give it a shot. Will this fix work on other browsers (IE7, firefox etc..)? Also could someone possible put the snippet of code that will make this work? Is it as simple as replacing my current margin code with the code mentioned here? Or does something have to be done to the body of the document as well?

Thanks a million,
Jeff

#left1 p.pic1{
display:block;
background:url(../images/lft_pic1.gif) 0 0 no-repeat;
width:88px;
height:78px;
margin: 0 auto;
}


You'll need to do that for all of them. Or, because they should all have the same properties you can simply use one class for all three images

Or maybe not use a class at all, and insert your images as actual images. You shouldn't be using paragraphs as the holders anyway: they're not. Use a div, if you must.

You should read up on the semantic web; left and right aren't exactly the best names to use. What if you change your mind and want your left on the right?