Re: Style problem (DIV sizing)

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Ben C

    Re: Style problem (DIV sizing)

    On 2008-11-16, Hannah <hu47121+nospam @usenet.kitty.s ub.orgwrote:
    Hi!
    >
    On this page:

    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.veranstalt ungentoenederse ele 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

    #2
    Re: Style problem (DIV sizing)

    On 2008-11-16, Hannah <hu47121+nospam @usenet.kitty.s ub.orgwrote:
    Hi!
    >
    Ben C <spamspam@spam. eggswrote:
    >>On 2008-11-16, Hannah <hu47121+nospam @usenet.kitty.s ub.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,
    "pfingstros en-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).

    Comment

    Working...