Re: Style problem (DIV sizing)

[Ben C]

On 2008-11-16, Hannah <hu************@usenet.kitty.sub.orgwrote:

Hi!

On this page:
http://www.lifesong.de/veranstaltungen.html
firefox 2 shows the page (especially the boxes) as I want them to
display (let the width scale according to viewport size, let the
"background" image scale accordingly, let the text wrap freely and the
height adjust).

However, konqueror (3.5.9) misdisplays the page: The DIVs are about 2 to
3 times as high as in firefox, the "background" images of the DIVs are
stretched vertically and cover the text of some of the DIVs towards the
bottom. Am I wrong or is konqueror wrong? And if the latter, how can I
workaround it, i.e. force konqueror to have an even top/bottom padding
around the text (using the interor div.padding) instead of such an
uneven one?

I think Konqueror is wrong. You've asked for the images to be 100% of
their containers, which should work even though the containers have auto
heights because the images are absolutely positioned.

Konqueror is treating the height: 100% like height: auto and preserving
the aspect ratio of the image (it's quite a tall thin image) leading to
the problem.

I can't see a solution that doesn't involve a compromise. Easiest is
just to put overflow: hidden on the containers
(div.veranstaltungentoenederseele etc.) The only difference with Firefox
will be that the images will have their proper aspect ratio and be
cropped rather than being scaled to fit. But it looks OK and at least
they won't cover over things up.

In CSS3 I hear you will be able to do scaled background images. Jam
tomorrow.

[Ben C]

On 2008-11-16, Hannah <hu************@usenet.kitty.sub.orgwrote:

Hi!

Ben C <sp******@spam.eggswrote:

>>On 2008-11-16, Hannah <hu************@usenet.kitty.sub.orgwrote:

>>On this page:
http://www.lifesong.de/veranstaltungen.html
firefox 2 shows the page (especially the boxes) as I want them to
display (let the width scale according to viewport size, let the
"background" image scale accordingly, let the text wrap freely and the
height adjust).

>>However, konqueror (3.5.9) misdisplays the page: The DIVs are about 2 to
3 times as high as in firefox, the "background" images of the DIVs are
stretched vertically and cover the text of some of the DIVs towards the
bottom. Am I wrong or is konqueror wrong? And if the latter, how can I
workaround it, i.e. force konqueror to have an even top/bottom padding
around the text (using the interor div.padding) instead of such an
uneven one?

>>I think Konqueror is wrong. You've asked for the images to be 100% of
their containers, which should work even though the containers have auto
heights because the images are absolutely positioned.

>>Konqueror is treating the height: 100% like height: auto and preserving
the aspect ratio of the image (it's quite a tall thin image) leading to
the problem.

I'm not sure, frankly. If I look at the second image,
"pfingstrosen-scaled.jpg", in an image viewer, and compare that with the
konqueror result, it seems that konqueror stretches the image
vertically.

You're right it is. It's not ignoring 100% but treating it as 100% of
the _wrong thing_. It's making it 100% of #main or even of the whole
viewport, and then cropping it.

Remove the height: 100% altogether and it should look better (and then
it will also look the same in Firefox).