Very basic float clearing not working in Safari

[Henri Sivonen]

URL: http://hsivonen.iki.fi/france-2005/

On the page, markup looks like this:
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 1</p>
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 2</p>

Images float right. imgparas clear right. Hence, as expected, in Firefox
and Opera 7.5, Caption 2 is aligned with the top of the second image.

In Safari, however, all the captions appear as a group next to the first
images. Clearly, clear: right; is not working. Any suggestions on
workarounds? (It amazes me that a case this simple does not work.)

--
Henri Sivonen
hs******@iki.fi
http://hsivonen.iki.fi/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

[RobG]

Henri Sivonen wrote:

URL: http://hsivonen.iki.fi/france-2005/

On the page, markup looks like this:
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 1</p>
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 2</p>

Images float right. imgparas clear right. Hence, as expected, in Firefox
and Opera 7.5, Caption 2 is aligned with the top of the second image.

In Safari, however, all the captions appear as a group next to the first
images. Clearly, clear: right; is not working. Any suggestions on
workarounds? (It amazes me that a case this simple does not work.)

Use a table.

Your page size is incredible - there must be 200 images of more than
40kB each - I hope none of your visitors are on dialup or broadband
below 1.5Mb/s.

--
Rob

[Henri Sivonen]

In article
<42***********************@per-qv1-newsreader-01.iinet.net.au>,
RobG <rg***@iinet.net.auau> wrote:

Henri Sivonen wrote:

URL: http://hsivonen.iki.fi/france-2005/

On the page, markup looks like this:
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 1</p>
<p class="imgpara"><a
href="..."><img
src="..."
alt="..." height="..." width="..."></a>Caption 2</p>

Images float right. imgparas clear right. Hence, as expected, in Firefox
and Opera 7.5, Caption 2 is aligned with the top of the second image.

In Safari, however, all the captions appear as a group next to the first
images. Clearly, clear: right; is not working. Any suggestions on
workarounds? (It amazes me that a case this simple does not work.)

Use a table.

I was looking for CSS-based workarounds.
Your page size is incredible - there must be 200 images of more than
40kB each - I hope none of your visitors are on dialup or broadband
below 1.5Mb/s.

I expect the people who might be the most interested in that page to
have broadband.

Making a Web photo gallery is hard.

Putting everything on one page means you can let it load first and then
you don't need to wait for each photo after following a "next" link or
somesuch. After all, splitting it would not reduce the overall data.
Also, personally, I strongly dislike having to follow "next" links.
However, the current attempt is problematic considering how the images
do not snap to the view port. It consumes RAM, too.

It is impossible to pick image sizes that please everyone. It's a
size/quality trade-off. And you can't know the view port size. :-(

--
Henri Sivonen
hs******@iki.fi
http://hsivonen.iki.fi/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

[Spartanicus]

Henri Sivonen <hs******@iki.fi> wrote:

> URL: http://hsivonen.iki.fi/france-2005/

Your page size is incredible - there must be 200 images of more than
40kB each - I hope none of your visitors are on dialup or broadband
below 1.5Mb/s.

I expect the people who might be the most interested in that page to
have broadband.

Photographs of a holiday in France, are you taking the piss?
Making a Web photo gallery is hard.
Nonsense.
Putting everything on one page means you can let it load first and then
you don't need to wait for each photo after following a "next" link or
somesuch. After all, splitting it would not reduce the overall data.
Also, personally, I strongly dislike having to follow "next" links.
First rule of web design: It's not about *you*.
However, the current attempt is problematic considering how the images
do not snap to the view port. It consumes RAM, too.
But you expect everyone to have 512Mb+ of RAM?
It is impossible to pick image sizes that please everyone. It's a
size/quality trade-off. And you can't know the view port size. :-(

Let the user pick a size they are comfortable with. And the main problem
with that page is that you simply dumped everything on one page. Create
a few groups, use *small* thumbnails with several links beneath each
thumbnail to larger formats users can choose from.

There are plenty of template based photo gallery generators available if
that sounds like to much work.

--
Spartanicus

[Henri Sivonen]

In article
<bu********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:

I expect the people who might be the most interested in that page to
have broadband.
Photographs of a holiday in France, are you taking the piss?

I expect the people who might be the most interested in holiday photos
to be a few friends, who I know to have broadband. I guess putting the
link on the public Web was a bad idea. And I should have had a minimized
test case for this thread.

Making a Web photo gallery is hard.

Nonsense.

I thought so, too, until I tried making one.

I know my page is bad. But I thought the output of the usual gallery
generators was even worse. I don't remember any Web photo gallery whose
UI I liked. :-(

Also, personally, I strongly dislike having to follow "next" links.

First rule of web design: It's not about *you*.

I know. But am I the only one who prefers something you can skim through
by scrolling instead of having to commit to following a "next" link
after each photo?

ObCSS: Dumping everything on one page with different style sheets is in
theory the way that makes CSS-based different presentations possible.

It is impossible to pick image sizes that please everyone. It's a
size/quality trade-off. And you can't know the view port size. :-(

Let the user pick a size they are comfortable with.

Ie. you can't pick *a* size that pleases everyone.
Create a few groups, use *small* thumbnails
Thumbnails are irritating, because they tend to be so small you can't
quite see the photos just by skimming through thumbnails and then you
end up having to do a lot of link following.
with several links beneath each thumbnail to larger formats
users can choose from.
What sizes would you suggest?
There are plenty of template based photo gallery generators available if
that sounds like to much work.

Can you suggest one that runs on the Mac and *makes captions easy to
enter*? (Tried iPhoto and GraphicConverter.)

--
Henri Sivonen
hs******@iki.fi
http://hsivonen.iki.fi/

[Spartanicus]

Henri Sivonen <hs******@iki.fi> wrote:

I expect the people who might be the most interested in holiday photos
to be a few friends, who I know to have broadband. I guess putting the
link on the public Web was a bad idea.
Fair enough since it isn't linked from your home page, as you know stuff
posted here gets treated as a public resource. Although as you note, it
kinda is public now that you've posted a link to it here, search engines
could pick it up.

>Also, personally, I strongly dislike having to follow "next" links.

First rule of web design: It's not about *you*.

I know. But am I the only one who prefers something you can skim through
by scrolling instead of having to commit to following a "next" link
after each photo?

Probably not, for a public page the issue would be that you should
consider what the experience is like under different conditions than
those similar to your own.
ObCSS: Dumping everything on one page with different style sheets is in
theory the way that makes CSS-based different presentations possible.

This wouldn't be a presentational issue, but a functional issue outside
the scope of CSS. On the issue of catering for different viewport sizes
under CSS 2.x all we can use is handheld versus screen stylesheets.
Under CSS 3 proposals we could use media queries. But although you could
use display:none & display:inline to selectively load images, this would
not be a proper solution to the number and size of images per page
issue. As ever CSS is optional and should not be relied upon.

>It is impossible to pick image sizes that please everyone. It's a
>size/quality trade-off. And you can't know the view port size. :-(

Let the user pick a size they are comfortable with.

Ie. you can't pick *a* size that pleases everyone.

As I said, offer a few.

Create a few groups, use *small* thumbnails

Thumbnails are irritating, because they tend to be so small you can't
quite see the photos just by skimming through thumbnails and then you
end up having to do a lot of link following.

with several links beneath each thumbnail to larger formats
users can choose from.

What sizes would you suggest?

That depends on your audience, for the limited group of friends you
talked about perhaps you know their hardware, their connections and
their browsing habits like their usual viewport size.

For the web it would depend on the minimum size required to convey what
the images are meant to convey, and the maximum above which there are no
benefits over smaller sizes. From my earlier glance at the pictures I'd
say there should be a small size like 240px wide for mobile users.

There are plenty of template based photo gallery generators available if
that sounds like to much work.

Can you suggest one that runs on the Mac and *makes captions easy to
enter*? (Tried iPhoto and GraphicConverter.)

On the PC I've used Thotor, it's template based and highly configurable,
I've no experience with Mac software.

--
Spartanicus

[fredo]

Stunning photos! Thanks so much, Henri. These are beautiful. (I've no
solution to your Safari problem, though)

[Henri Sivonen]

In article
<s0********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:

ObCSS: Dumping everything on one page with different style sheets is in
theory the way that makes CSS-based different presentations possible.
This wouldn't be a presentational issue, but a functional issue outside
the scope of CSS.

Let's suppose a user is going to take a look at all photos of a given
size. (Ie. the user is sufficiently interested.) Loading them as one
HTML doc and presenting them as paged projection media causes about the
same amount of traffic (actually, slightly less) as wading through
single-image pages with "Next" links. However, the user doesn't have to
wait between the photos, but the data is preloaded (consuming RAM,
presumably).
From my earlier glance at the pictures I'd
say there should be a small size like 240px wide for mobile users.

Do people really use their precious GPRS bytes for checking out travel
photos (of any size)?

--
Henri Sivonen
hs******@iki.fi
http://hsivonen.iki.fi/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

[Spartanicus]

Henri Sivonen <hs******@iki.fi> wrote:

>ObCSS: Dumping everything on one page with different style sheets is in
>theory the way that makes CSS-based different presentations possible.
This wouldn't be a presentational issue, but a functional issue outside
the scope of CSS.

Let's suppose a user is going to take a look at all photos of a given
size. (Ie. the user is sufficiently interested.)

Now suppose a user only want's to look at some pictures.
Loading them as one
HTML doc and presenting them as paged projection media
Paged projection is supported by a tiny percentage of clients.
causes about the
same amount of traffic (actually, slightly less) as wading through
single-image pages with "Next" links. However, the user doesn't have to
wait between the photos, but the data is preloaded (consuming RAM,
presumably).

You seem to have locked yourself into this single usage scenario,
there's little point arguing a case unless you accept that therein lies
the flaw.

From my earlier glance at the pictures I'd
say there should be a small size like 240px wide for mobile users.

Do people really use their precious GPRS bytes for checking out travel
photos (of any size)?

Another false assumption, mobile bandwidth need not be low bandwidth
and/or expensive.

--
Spartanicus

[Henri Sivonen]

In article
<3h********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:

Henri Sivonen <hs******@iki.fi> wrote:

>ObCSS: Dumping everything on one page with different style sheets is in
>theory the way that makes CSS-based different presentations possible.

This wouldn't be a presentational issue, but a functional issue outside
the scope of CSS.
Let's suppose a user is going to take a look at all photos of a given
size. (Ie. the user is sufficiently interested.)

Now suppose a user only want's to look at some pictures.

Then (s)he obviously does not use the projection mode.

Loading them as one
HTML doc and presenting them as paged projection media

Paged projection is supported by a tiny percentage of clients.

And your mobile use case?

causes about the
same amount of traffic (actually, slightly less) as wading through
single-image pages with "Next" links. However, the user doesn't have to
wait between the photos, but the data is preloaded (consuming RAM,
presumably).

You seem to have locked yourself into this single usage scenario,

That's one scenario. There are others--like skimming in the continuous
mode. That's just an example of keeping this CSS-related.
there's little point arguing a case unless you accept that therein lies
the flaw.

I know my page bad. I blame it on the lack of a tool that would allow me
to make it better with reasonable effort. I would love to make the next
gallery better, but not at any cost.

I don't know how much effort you put into putting some photos online. I
think the following workflow would be reasonable:
1) Get the photos off the camera.
2) Make a selection of photos.
3) Enter captions in a view where the whole photo set is available and
moving between caption slots is easy with arrow keys or tab.
4) Run one batch operation.

Currently, I lack tools that supported that workflow and produced better
results. I'd love to be better informed about tools that have already
been made.

Perhaps you can point to a gallery you think is good so I can mimic it
if I ever get around writing my own tooling.

(And I am still interested in a CSS-based workaround for the Safari
float problem.)

--
Henri Sivonen
hs******@iki.fi
http://hsivonen.iki.fi/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html