Strange Image Size Problem.

[Rob White]

I have created a simple list that is styled so I have a selection of
thumbnails, each thumbnail links to the larger image. All of it works
fine and I'm happy with it, however, I have one thumbnail that has
dimensions of 100x59 that looks strange. When loaded directly in a
browser (IE7, Opera 9.20 and Firefox 2.0.0.3) the image show
correctly, but when shown as part of the page it shows with a
dimension of 120x71. Since my thumbnails are only allocated 100x100 it
gets squashed by the browsers and looks rubbish.

I can see nothing in either my css or html that would cause this
behaviour is there anything obvious that I've done?

The page is here: http://www.jacquelinewhite.co.uk/photographs.html
and it's the last image in the list (I've tried putting the image in
different positions on the page and only that image is problematic)

 

[Andy Dingley]

When loaded directly in a
browser (IE7, Opera 9.20 and Firefox 2.0.0.3) the image show
correctly, but when shown as part of the page it shows with a
dimension of 120x71.

I'm seeing the same effect, so I doubt if it's a cache problem (the
usual culprit here).

I suspect it's the results of your JavaScript lightbox script. Try
removing the rel attribute for this thumbnail and trying again. That
may disable the lightbox script which is, I think, running over all
the gallery images and forcing their sizes. Try it simply with JS
defeated too.

Incidentally I hate this page:

* It uses "letterbox scrolling" of one small area on the screen. I
paid good money for this nice big monitor, don't try to stop me using
it. Learn about "fluid design" and write a page that makes the best
use of whatever space I give it.

* When I try to view the main image, a load of tiresome crap happens
and I get bored. I don't want to see cutesy greyed-out backgrounds, I
don't want to see interactive curtain-opening effects and I certainly
don't want to see an image loading throbber. Show me the damned image,
and show it to me now!

* There's a lot of invalid M$oft cruft in there too.

 

[Rob White]

Thanks for your thoughts on the design of the page. I take your point
about the fized size of the page, I'll take a look at that later. The
light box stuff will be staying, it's what the target audience likes.
As to it causing the problem, I've already tried taking that off and
it made no difference.

Any other thoughts out there?

 

[El Kabong]

Thanks for your thoughts on the design of the page. I take your point
about the fized size of the page, I'll take a look at that later. The
light box stuff will be staying, it's what the target audience likes.
As to it causing the problem, I've already tried taking that off and
it made no difference.

Any other thoughts out there?

No suggestions regarding the image sizing... looks good on my PC using IE7.
Maybe you've already fixed it.

However, regarding Mr. Dingley's critique, I'll simply say, don't let it get
you down. Some of us like your page _as_is_!

Nice job!

El

 

[John Hosking]

Since my thumbnails are only allocated 100x100 it
gets squashed by the browsers and looks rubbish.

No, I don't see that. What I see is that you're not setting the height
and width to 100px, you're setting it to 9.5em. Watch what happens when
you bump up the text size in FF, e.g.

The page is here: http://www.jacquelinewhite.co.uk/photographs.html
and it's the last image in the list

If I may, I'd like to also comment that your alt attributes aren't too
helpful. alt="[jac3]" is pretty unhelpful to those who can't see the
picture (and if you mean for it to be a tooltip in IE, that it's also
unhelpful in that context).

HTH

 

[Jim Moe]

[...] All of it works
fine and I'm happy with it, however, I have one thumbnail that has
dimensions of 100x59 that looks strange. [...]

In ".thumbs img { }" you have the height fixed at 5.5em. The images are
*all* being scaled to that height. It's just that one image is
particularly obvious.
Why use text scaling units to scale images?

 

[JD]

Since my thumbnails are only allocated 100x100 it
gets squashed by the browsers and looks rubbish.

No, I don't see that. What I see is that you're not setting the height
and width to 100px, you're setting it to 9.5em. Watch what happens when
you bump up the text size in FF, e.g.

The page is here: http://www.jacquelinewhite.co.uk/photographs.html
and it's the last image in the list

If I may, I'd like to also comment that your alt attributes aren't too
helpful. alt="[jac3]" is pretty unhelpful to those who can't see the
picture (and if you mean for it to be a tooltip in IE, that it's also
unhelpful in that context).

On a similar note, you shouldn't put HTML tags in title or alt attribute
values:

title="Emmie Spashitt, <i>Albert Herring</i>, Operamus 2007"

Also, include a space before the closing / in empty elements, e.g.:

<img src="Jekyll_redrats_thumb.jpg" alt="alt text" />
^
You do this on some elements in your page, but not others.

JD

 

[Rob White]

Thanks for all the help, I've done a bit of initial playing around and
it does seem that the em sizing was causing the problems. Thanks for
the help.

The reason for them being in em's was down to the fact that I didn't
really understand the significance of the code that I downloaded to do
the thumbs bit (it's my first website).

A couple of other questions, why should I include a space before
closing empty elements, is this a style thing or a standards thing?
Also, the reason that I have the <i> in the title is that the lightbox
script picks up the title and uses it for its text. The italics simply
look nicer. I've put the page through the w3c validation and it
passes, but with warnings on the page. How significant a problem is
this, will some browsers kick up a fuss, look funny or otherwise. Of
is it more that I'm bending the rules of standards? Indeed, is there a
way to achieve what I'm after without the warnings?

No, I don't see that. What I see is that you're not setting the height
and width to 100px, you're setting it to 9.5em. Watch what happens when
you bump up the text size in FF, e.g.

If I may, I'd like to also comment that your alt attributes aren't too
helpful. alt="[jac3]" is pretty unhelpful to those who can't see the
picture (and if you mean for it to be a tooltip in IE, that it's also
unhelpful in that context).

On a similar note, you shouldn't put HTML tags in title or alt attribute
values:

title="Emmie Spashitt, <i>Albert Herring</i>, Operamus 2007"

Also, include a space before the closing / in empty elements, e.g.:

<img src="Jekyll_redrats_thumb.jpg" alt="alt text" />
^
You do this on some elements in your page, but not others.

JD- Hide quoted text -

- Show quoted text -

 

[Bernhard Sturm]

The page is here: http://www.jacquelinewhite.co.uk/photographs.html
and it's the last image in the list (I've tried putting the image in
different positions on the page and only that image is problematic)

far more problematic is this (taken from your CSS):

..storytitle (line 160)
{
[...]
font-family: "Lucida Handwriting";
[...]

What on earth made you believe, that one of your visitors might have the
font "Lucida Handwriting" installed?
Using particular fonts will _never_ work and you are risking way too
much by doing it (e.g. that your audiance will not be able to read your
page at all).

cheers
bernhard

 

[Jukka K. Korpela]

Scripsit Bernhard Sturm:

What on earth made you believe, that one of your visitors might have
the font "Lucida Handwriting" installed?

What makes you ask such questions? There are surely millions of people who
have it in their computers.

Using particular fonts will _never_ work
Huh?

and you are risking way too
much by doing it (e.g. that your audiance will not be able to read
your page at all).

Nonsense. If the named font is not available, the browser's default font is
used.

Some problems may arise when a computer _has_ Lucida Handwriting, since it
is difficult to read in typical default font sizes, due to its cursive
nature.*) But that's a different issue.
*) Try the demo http://www.myfonts.com/fonts/ef/lucida-handwriting/ at 12 or
10 points.