horizontal image lists

[Abby]

I'm messing with a new page (here), trying to get the horizontal image lists centered instead of floated left. That's proving to be very difficult. So I have questions.First, here's the CSS that I'm using to force the image lists to be horizontal.

.across img{		display:inline-block; /* IE7-8 */		float:left; /* IE6-7 */		margin-left:auto; margin-right:auto;}

My questions: 1) Why does the above code work for img, but not for li? To my mind, they should display the same way. Aren't they both inline elements on the same line? But when I change img to li, all the images snap to the far left of the browser window and pile on top of each other.Here's what the HTML looks like:

<ul class="across"><li><img src="logo_sloth.png" width="175px" height="129px" alt="sloth">

2) From what I understand, margin-left:auto; margin-right:auto; should center the content (in this case, .across) in its container. Instead, it seems to be causing the list items to be displayed in a row instead of overlapped on top of each other. Why does it work in this mysterious way? And if I can't center the content using auto margins, how else can I do it?

[real_illusions]

Add a width to the <li> in the CSS. That might help solve the issues..across li{display:inline-block; /* IE7-8 */float:left; /* IE6-7 */margin-left:auto; margin-right:auto;width:175px;}Presuming all the images are of equal width.

[dsonesuk]

any element that uses float, the margin: 0 auto; won't centre. using float takes them out of the flow of other elements, and they have no defined boundary for li or ul to wrap round. If you try highlight the ul, li in firebug, both of these don't highlight at all, as these are empty because of the float element in side of them, they produce zero height in both ul and li.

[Abby]

Thanks. Adding width to the <li> helped.Is there any way to get these horizontal lists centered? Here's my updated page.

[dsonesuk]

easy way, find the width of total images in row, make the ul this width, then use margin: 0 auto;.hard way (used long time ago, might not have all facts to get this to work), use position relative for ul, left:50%, position: absolute; and right 50%; for all li's.

[Abby]

easy way, find the width of total images in row, make the ul this width, then use margin: 0 auto;.

Thanks! But there's some strange math in there. I had to add extra width in order to keep the list items from wrapping. I'm not sure why. Here's my new CSS (which worked to center the horizontal image lists):

.center {width:80%;text-align:center;padding:0;margin:0;overflow:visible;}.down, .across, .acrossb {list-style:none outside none;}ul.across, ul.acrossb {text-align:center;margin:0 auto;}ul.across {width:1180px; height:129px;}ul.acrossb {width:800px; height:400px;}ul.across li, ul.acrossb li {		display:inline-block; /* IE7-8 */		float:left; /* IE6-7 */		}ul.across li {width:190px;}ul.acrossb li {width:247px;}

As you can see, the (6) list items in .across are 190px, and the (3) list items in .acrossb are 247px. Their total widths should be 1140px and 741px, respectively. However, I had to make them 1180px and 800px to keep the last item from wrapping. Any idea why this happens? Here's my page.

[dsonesuk]

Well?, I just checked in firefox, and IE 8/IE7 compatible, adjusted the width (1140px,741px) using firebug, and ie developer toolbar, and they fitted perfectly, 1px down (1139px,740px) and only then, did they wrap.I can't see where the 40px and 60px would come from to do this, no padding, borders or margin used, would from what i can see will produce this result.puzzling?