http://outdoorsindoors.net/DEV/MLB2/...owprod&catid=1

looks the way I want in FF, not in IE. in ie they are stacked on top of each other. I am learning a lot about the differences of IE vs FF regarding css but cant spot this one.

I can apply a float left to the thumbnail container and they will be on the same line, but obviously over to the left


Css for the items is

<!--Container for product thumbnails-->
.thrColFixHdr #container #mainContent .ProdCatalog{
margin-left:auto; 
margin-right:auto; 
text-align:center; 
width:995px;  
padding:10px;  }
<!--Style for each thumbnail (includes img, name, price)-->
.thrColFixHdr #container #mainContent .ProdCatalog .ProdThumb {
font-weight:bold; 
font-size:16px; 
text-decoration:none;  
text-align:center;  
width:250px; 
display:inline-block;  }
<!--style for a element link-->
.thrColFixHdr #container #mainContent .ProdCatalog .ProdThumb a{
font-weight:bold; 
font-size:16px; 
text-decoration:none; }

Without looking into it very much my first "advice" would be to use float left, wrap them in a div and then center the div.

thanks for the tip. I gave that I try which I had many times without it working. This time dropped the width of the div that I had the thumbnails in. That allowed it to work.

Not real sure why, I wanted the container div to be full width while the thumbnail divs were a relative side and centered. either way it looks fine in both IE and FF.

the learning process continues .... thanks again

set the container with text-align: center; and set the images to display: inline;

the images are actually containers themselves though with an image a title and a price in it which are all href links. would this still work with that approach?

also any downfalls to how I currently have it working based on lizciz's feedback

.thrColFixHdr #container #mainContent .ProdCatalog{
margin-left:auto; 
margin-right:auto; 
text-align:center; 
width:750px; 
margin-top:10px; 
margin-bottom:10px; }
.thrColFixHdr #container #mainContent .ProdCatalog .ProdThumb {
font-weight:bold; 
font-size:12px; 
text-decoration:none;  
text-align:center;  
width:250px; 
float:left;}
.thrColFixHdr #container #mainContent .ProdCatalog .ProdThumb a{
font-weight:bold; 
font-size:12px; 
text-decoration:none; 
line-height:12px;}

You can only put an image in an image container.

I take it you mean you have a container with a image and text contained in it?

correct. i know the code is ugly below because it is html in php but this is what it is doing.

<div>image, price, link</div>

 echo"<div class=\"ProdThumb\">
      <a href=\"index.php?page=mods/Products/itemdetail&itemid=".$prod['id']."\">
      <img src=\"".$img." \" width=\"".$pref['item_thumb_width']."\" border=\"0\"><p>".$prod["name"]."</p><p>".$price."</a></p>
      </div>\n";

Of course there are many ways to center something. But I normally put the thing(s) i want to center in a container and set its' horizontal margin to auto. This requires the container to have a limited width though. By default a div stretches horizontally to cover all available area, which means it wouldn't be centered at all. So I either use a fixed width (width:?? px; ) or make it behave like a table (display:table; ) since it will then instead use a minimal width that still makes room for its' contents.

Where are the captions set?

alongside with the image left or right?
Below the image?
Or above the image?

Oh and is the idea for the images to start from the centre then "bump" the leftmost image further left each time?

The mythical "float: center;" property?

Why are you guys going at this image centering the hard way?
If the image is inside a div or 'container' already, just do this:

.container-name img{
display:block;
margin: xx auto;
}

You're done, the image already has it's width, all you do is make it a block and center it.

Originally Posted by LadynRed

Why are you guys going at this image centering the hard way?
If the image is inside a div or 'container' already, just do this:

You're done, the image already has it's width, all you do is make it a block and center it.

For IE as I know must be also a text-align:center

Originally Posted by ElmanF

For IE as I know must be also a text-align:center

For IE5 & 5.5 yes, however as they are long dead, they don't really count.