Strange Image Size Problem.

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)

Re: Strange Image Size Problem.

On 14 May, 13:45, Rob White wrote:

> 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.

Re: Strange Image Size Problem.

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?


On 14 May, 14:14, Andy Dingley wrote:
> On 14 May, 13:45, Rob White wrote:
>
> > When loaded directly in a
> > browser (IE7, Opera 9.20 and Firefox 2.0.0.3) theimageshow
> > 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 cacheproblem(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 mainimage, 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 animageloading throbber. Show me the damnedimage,
> and show it to me now!
>
> * There's a lot of invalid M$oft cruft in there too.

Re: Strange Image Size Problem.

"Rob White" wrote in message
news:1179153772.418741.320800@y80g2000hsf.googlegroups.com.. .
> 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?
>
>
> On 14 May, 14:14, Andy Dingley wrote:
>> On 14 May, 13:45, Rob White wrote:

>>
>> * 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 mainimage, 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 animageloading throbber. Show me the damnedimage,
>> and show it to me now!
>>
>> * There's a lot of invalid M$oft cruft in there too.
>
>

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

Re: Strange Image Size Problem.

Rob White wrote:
> 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
--
John

Re: Strange Image Size Problem.

Rob White wrote:
> [...] 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?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Strange Image Size Problem.

John Hosking wrote:
> Rob White wrote:
>> 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, Albert Herring, Operamus 2007"

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


^
You do this on some elements in your page, but not others.

JD

Re: Strange Image Size Problem.

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 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?

On May 14, 6:24 pm, JD wrote:
> John Hosking wrote:
> > Rob White wrote:
> >> 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, Albert Herring, Operamus 2007"
>
> Also, include a space before the closing / in empty elements, e.g.:
>
>
> ^
> You do this on some elements in your page, but not others.
>
> JD- Hide quoted text -
>
> - Show quoted text -