Horizontally scrolling photographs - without tables

I can't get it to work in IE for Mac

[elliot_n]

Hi

I'm new here and new to CSS. I posted my first question a few days and it got pulled, understandably, because it was long and rambling and had links to other sites.

I've been doing my homework and have now learnt the basics of CSS using Style Master (Mac CSS editor).

So I'm going to start with a very simple question.

I'm trying to create a photographic portfolio site with horizontal scrolling. No thumbnails. Just a navigation bar, with about 10 links to 10 sections of 10 images.

I think I have the navigation sorted (though I've yet to work out how to connect it to the content, without using frames).

The problem I'm having at the moment is simply laying out the images in a horizontal line. I can get it to work in Safari, but not IE for Mac. (A significant chunk of my audience - art directors - still use IE on the Mac, so it must work for them).

In IE for Mac, the images are breaking out of the DIVs I put them in, and just flow down the page vertically. Maybe my code is wrong? Or maybe I should just being do this simple layout with tables?

Here's exactly what I'm trying to do (but maybe for now its best to forget about captions, margins etc, and just try to get the images themselves to scroll left to right in IE for Mac):

10 images, each one 555px wide x 420px high, laid out in a line, left to right. Each image with a 1px grey border, and then a 30px white margin. Caption on that margin, aligned with the right hand corner of the image. And a 1px dotted grey line around margins.

Thanks for any advice you can me.

(I can post my HTML and style sheet, if that helps).

Elliot

[jessejump]

>>>>>> the images are breaking out of the DIVs I put them in, and just flow down the page vertically.

Put the images in a div and set the width of the div to 7000px or whatever you need.

[elliot_n]

Thanks.

I decided to start again from scratch, and so far things seems to be working.

I've laid out 3 images, and they scroll horizontally in both Safari and IE Mac.

Next step is to add the captions for the photographs - I have a feeling that this is where I ran into problems when I tried to do it yesterday.

But so far I have this HTML and this CSS, and it works (please let me know if there's anything wrong here):

HTML:

<div class="image_strip">
<div class="image_surround">
<img src="20050213_011.jpg" width="555" height="420">
</div>
<div class="image_surround">
<img src="20050316_047.jpg" width="555" height="420">
</div>
<div class="image_surround">
<img src="20050322_036.jpg" width="555" height="420">
</div>
</div>

CSS:

.image_strip {

position: absolute;
top: 70px;
left: 200px;
right: 0px;
bottom: 0px;
width: 2000px;
height: 482px;
border: 1px #bfbfbf dashed; }

.image_surround {
float: left;
border-right: 1px #bfbfbf dashed; }

img {
border: 1px #bfbfbf solid;
margin: 30px; }

[elliot_n]

Hmmm, can't figure out how to add the caption at all today.

I change the HTML to this (adding a div for the caption):

<div class="image_strip">
<div class="image_surround">
<img src="20050213_011.jpg" width="555" height="420">
<div class="caption">
caption here
</div>
</div>

And I add something like this to the CSS:

.caption {
text-align: right;
font-weight: normal;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.6em;
color: #7f7f7f; }

The aim is to get something like this (a screen grab I took yesterday, just of the bottom corners of two images laid out, as I want, in Safari):

Oh wait, I can't post images...

Well, I want the caption running just under the image (say with a 3px gap), and aligned to the right of the image.

[elliot_n]

Ok. I remembered how I was styling it yesterday.

I give my image a 1px grey border and then I add a 30px margin on the left, top and right, to create a white border. On the bottom I just add a 3px pargin, then the caption appears, and then I give the caption a margin along it's bottom of 15px, to create an even white border around the image.

Works fine in Safari, but broken in IE Mac (images are laid out vertically).

Why? This is simple stuff, surely?

Here's my stylesheet:

.image_strip {
position: absolute;
top: 70px;
left: 200px;
right: 0px;
bottom: 0px;
width: 2000px;
height: 482px;
border: 1px #bfbfbf dashed; }

.image_surround {
float: left;
border-right: 1px #bfbfbf dashed; }

img {
border: 1px #bfbfbf solid;
margin-top: 30px;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 3px; }

.caption {
text-align: right;
font-weight: normal;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.6em;
color: #7f7f7f;
margin-right: 30px;
margin-bottom: 15px; }

[SuzyUK]

Hi elliot_n, Welcome to WebmasterWorld..

I think but am not positive as I don't have a Mac, but maybe someone else can confirm..
IE/Mac is still one of those browsers that require a width on floats to keep it playing nice..

are your images all the same width? if so try adding a width to that float (or just try it anyway to see if that helps the Mac)

>>captions
There is thread here [webmasterworld.com] which might help if images are different widths..

Suzy