Fluid Image List

[dtm32236]

I've tried 'googling' for something similiar, but haven't come up with anything good yet...

What I'm trying to is to create a list of horizontal images that is fluid with browser width... this will make more sense if you check out this link:
www (dot) foremostgroups (dot) com/dev/2007corporate/outdoor_furniture/veranda_classics/frame_finishes.html

Check out how the list changes if you resize the browser width. I've played with multiple ways making this work, and haven't came up with anything perfect. Where's Stu Nicholls when you need him? :p

Here's what I've come up with:

CSS:
.swatch_list li {float:left; width:135px; text-align:center; margin:20px 0; font-size:.9em;}
.swatch_list li img {display:block; margin:0 auto; border:1px solid #ccc;}
<div style="margin-right:400px;">
<ul class="swatch_list">
<li><img src="images/frame_finishes/aged_bronze.jpg" alt="Aged Bronze">Aged Bronze</li>
<li><img src="images/frame_finishes/aged_pecan.jpg" alt="Aged Pecan">Aged Pecan</li>
<li><img src="images/frame_finishes/am01_1e.jpg" alt="AM01-1E">AM01-1E</li>
<li><img src="images/frame_finishes/antique_gold.jpg" alt="Antique Gold">Antique Gold</li>
<li><img src="images/frame_finishes/cinnamon.jpg" alt="Cinnamon">Cinnamon</li>
<li><img src="images/frame_finishes/copper_hammertone.jpg" alt="Copper Hammertone">Copper Hammertone</li>
<li><img src="images/frame_finishes/cx_474h.jpg" alt="CX-474H">CX-474H</li>
<li><img src="images/frame_finishes/glossy_white.jpg" alt="Glossy White">Glossy White</li>
<li><img src="images/frame_finishes/granite_pearl.jpg" alt="Granite Pearl">Granite Pearl</li>
<li><img src="images/frame_finishes/hammered_bronze.jpg" alt="Hammered Bronze">Hammered Bronze</li>
<li><img src="images/frame_finishes/old_spice.jpg" alt="Old Spice">Old Spice</li>
<li><img src="images/frame_finishes/sw0215.jpg" alt="SW0215">SW0215</li>
<li><img src="images/frame_finishes/text_black.jpg" alt="Text Black">Text Black</li>
<li><img src="images/frame_finishes/text_white.jpg" alt="Text White">Text White</li>
</ul>
</div>

This renders a list of horizontally arranged images perfectly in FF, Opera, Safari, etc - but, as usual, it doesn't work out as great in IE6/7.

Does anyone have a good alternate way of creating a fluid list like this (it doesn't have to be a UL/OL - I'm perfectly fine with wrapping the images in P or DIV or whatever tags will work).

A side issue: for whatever reason, the UL ignores the containers DIV's margin-right:400px; in IE. I can't figure out a way to make that work either.

I feel like I rambled - I hope this made sense. Thanks for any help guys!

[tracknut]

Feels like you're making this more complicated than it needs to be. Try something like:

<div style="margin-right:400px;">
<img src="images/frame_finishes/aged_bronze.jpg" alt="Aged Bronze">Aged Bronze
<img src="images/frame_finishes/aged_pecan.jpg" alt="Aged Pecan">Aged Pecan
<img src="images/frame_finishes/am01_1e.jpg" alt="AM01-1E">AM01-1E
<img src="images/frame_finishes/antique_gold.jpg" alt="Antique Gold">Antique Gold
<img src="images/frame_finishes/cinnamon.jpg" alt="Cinnamon">Cinnamon
<img src="images/frame_finishes/copper_hammertone.jpg" alt="Copper Hammertone">Copper Hammertone
<img src="images/frame_finishes/cx_474h.jpg" alt="CX-474H">CX-474H
<img src="images/frame_finishes/glossy_white.jpg" alt="Glossy White">Glossy White
<img src="images/frame_finishes/granite_pearl.jpg" alt="Granite Pearl">Granite Pearl
<img src="images/frame_finishes/hammered_bronze.jpg" alt="Hammered Bronze">Hammered Bronze
<img src="images/frame_finishes/old_spice.jpg" alt="Old Spice">Old Spice
<img src="images/frame_finishes/sw0215.jpg" alt="SW0215">SW0215
<img src="images/frame_finishes/text_black.jpg" alt="Text Black">Text Black
<img src="images/frame_finishes/text_white.jpg" alt="Text White">Text White
</div>


You'll probably want a span or something around each line if you want to manage the width.

Dave

[dtm32236]

hahaha - maybe you're right.

What if I wanted the text under the image though? In the example above, I made the images display:block; to a) fix the extra spacing IE adds to images, and to b) allow for the text under the image.

I figure if I add <br> between the image tag and the text, it won't allow for horizontal alignment. Maybe I'm just being dumb about this and missing something though.

[tracknut]

Are all those images the same size? How about something like:


.sp {width:100px;text-align:center;float:left}

<span class="sp"><img src="images/frame_finishes/aged_bronze.jpg" alt="Aged Bronze">Aged Bronze</span>


edit: Urp. I just looked at that in IE, and the text doesn't look right. Grr... I'll fiddle with it some more.

edit: Looks like you do need the display:block in there for the img tags

[dtm32236]

yeah - I've tried a bunch of different ways, and IE screws it up every time.

I would think that this is a commonly used format - I was surprised that I couldn't find a good solution, or any solution at all when I was tried to google it.

Thanks for try this out - I really appreciate it.

[tracknut]

No problem. It's working fine for me (only looked at IE7 and FF3) with the display:block style set on the img tags. It's not too horrid :)

Dave

[dtm32236]

Awesome!

So, you did this?

.sp {width:100px;text-align:center;float:left;}
.sp img {display:block;}

<span class="sp"><img src="images/frame_finishes/aged_bronze.jpg" alt="Aged Bronze">Aged Bronze</span>

[tracknut]

yep, exactly.

Dave

[dtm32236]

nice, that worked great!

thanks a lot, tracknut.... you're awesome.