Image not filling a table table (html4 strict)

Discussion in 'HTML' started by killy971, Aug 11, 2008.

  1. killy971

    killy971 Guest

    I am having a problem with the fact that when I insert an image in a
    table cell, it won't fill the cell completely when I declare the
    document as strict html4. But when using the "loose" html4 doctype, it
    works...
    The code is the following :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>test</title>
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0"
    style="background-color: #000000;">
    <tr>
    <td bgcolor="#DD0000">
    <img src="http://img384.imageshack.us/img384/3636/
    testbc0.gif"/>
    </td>
    </tr>
    </table>
    </body>
    </html>


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0"
    style="background-color: #000000;">
    <tr>
    <td bgcolor="#DD0000">
    <img src="http://img384.imageshack.us/img384/3636/
    testbc0.gif"/>
    </td>
    </tr>
    </table>
    </body>
    </html>

    With the strict one, it seems like I can somehow get over the problem
    by using css to modify the bottom margin of the image with a minus
    value... solution that is really not good I think, especially because
    the display is not the same on firefox and internet explorer,
    depending on the value of this margin.

    Does anyone know how to solve this problem in a simple way ?
    killy971, Aug 11, 2008
    #1
    1. Advertising

  2. killy971

    dorayme Guest

    In article
    <>,
    killy971 <> wrote:

    > I am having a problem with the fact that when I insert an image in a
    > table cell, it won't fill the cell completely


    > With the strict one, it seems like I can somehow get over the problem
    > by using css to modify the bottom margin of the image with a minus
    > value... solution that is really not good I think, especially because
    > the display is not the same on firefox and internet explorer,
    > depending on the value of this margin.
    >
    > Does anyone know how to solve this problem in a simple way ?


    You are likely getting a space at the bottom that you don't want because
    you are using an inline image and the space is reserved for text
    descenders. You can fix this by styling the images as display: block;

    This sort of thing comes up in various contexts.

    <http://netweaver.com.au/floatHouse/appendices/page6_1.html>

    or, simpler:

    <http://netweaver.com.au/alt/inlineImages/inlinePicWithDescenderSpace.htm
    l>

    (watch the url for missing bits or breaks in this message as read in
    your newsreader)

    --
    dorayme
    dorayme, Aug 11, 2008
    #2
    1. Advertising

  3. On 2008-08-11, killy971 wrote:
    > I am having a problem with the fact that when I insert an image in a
    > table cell, it won't fill the cell completely when I declare the
    > document as strict html4. But when using the "loose" html4 doctype, it
    > works...
    > The code is the following :
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    > www.w3.org/TR/html4/loose.dtd">
    ><html>
    > <head>
    > <title>test</title>
    > </head>
    > <body>
    > <table border="0" cellspacing="0" cellpadding="0"
    > style="background-color: #000000;">
    > <tr>
    > <td bgcolor="#DD0000">
    > <img src="http://img384.imageshack.us/img384/3636/
    > testbc0.gif"/>
    > </td>
    > </tr>
    > </table>
    > </body>
    ></html>
    >
    >
    ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd">
    ><html>
    > <head>
    > <title>test</title>
    > </head>
    > <body>
    > <table border="0" cellspacing="0" cellpadding="0"
    > style="background-color: #000000;">
    > <tr>
    > <td bgcolor="#DD0000">
    > <img src="http://img384.imageshack.us/img384/3636/
    > testbc0.gif"/>
    > </td>
    > </tr>
    > </table>
    > </body>
    ></html>
    >
    > With the strict one, it seems like I can somehow get over the problem
    > by using css to modify the bottom margin of the image with a minus
    > value... solution that is really not good I think, especially because
    > the display is not the same on firefox and internet explorer,
    > depending on the value of this margin.
    >
    > Does anyone know how to solve this problem in a simple way ?


    Have you tried: td img { display: block; } ?

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Aug 11, 2008
    #3
  4. killy971

    Andy Guest

    "killy971" <> wrote in message
    news:...
    >I am having a problem with the fact that when I insert an image in a
    > table cell, it won't fill the cell completely when I declare the
    > document as strict html4. But when using the "loose" html4 doctype, it
    > works...
    > The code is the following :
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    > www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <title>test</title>
    > </head>
    > <body>
    > <table border="0" cellspacing="0" cellpadding="0"
    > style="background-color: #000000;">
    > <tr>
    > <td bgcolor="#DD0000">
    > <img src="http://img384.imageshack.us/img384/3636/
    > testbc0.gif"/>
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>test</title>
    > </head>
    > <body>
    > <table border="0" cellspacing="0" cellpadding="0"
    > style="background-color: #000000;">
    > <tr>
    > <td bgcolor="#DD0000">
    > <img src="http://img384.imageshack.us/img384/3636/
    > testbc0.gif"/>
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > With the strict one, it seems like I can somehow get over the problem
    > by using css to modify the bottom margin of the image with a minus
    > value... solution that is really not good I think, especially because
    > the display is not the same on firefox and internet explorer,
    > depending on the value of this margin.
    >
    > Does anyone know how to solve this problem in a simple way ?


    Hi,

    A real easy way to fix your problem is just to ensure that there are no line
    breaks between the <td> and the </td>.

    With issue...

    <td>
    <img src="../images/image.gif">
    </td>


    Without issue...

    <td><img src="../images/image.gif"></td>


    Hope this helps

    Andy
    Andy, Aug 11, 2008
    #4
  5. killy971

    Gus Richter Guest

    dorayme wrote:
    > In article
    > <>,
    > killy971 <> wrote:
    >
    >> I am having a problem with the fact that when I insert an image in a
    >> table cell, it won't fill the cell completely

    >
    >> With the strict one, it seems like I can somehow get over the problem
    >> by using css to modify the bottom margin of the image with a minus
    >> value... solution that is really not good I think, especially because
    >> the display is not the same on firefox and internet explorer,
    >> depending on the value of this margin.
    >>
    >> Does anyone know how to solve this problem in a simple way ?

    >
    > You are likely getting a space at the bottom that you don't want because
    > you are using an inline image and the space is reserved for text
    > descenders. You can fix this by styling the images as display: block;


    Just for completeness, vertical-align:bottom; is another.

    --
    Gus
    Gus Richter, Aug 11, 2008
    #5
  6. killy971

    dorayme Guest

    In article <g7pmn4$3m9$>,
    Gus Richter <> wrote:

    > dorayme wrote:
    > > In article
    > > <>,
    > > killy971 <> wrote:
    > >
    > >> I am having a problem with the fact that when I insert an image in a
    > >> table cell, it won't fill the cell completely

    > >
    > > You are likely getting a space at the bottom that you don't want because
    > > you are using an inline image and the space is reserved for text
    > > descenders. You can fix this by styling the images as display: block;

    >
    > Just for completeness, vertical-align:bottom; is another.


    vertical-align in the CSS or even valign="bottom" in the HTML for the
    cell concerned would get it down in the vicinity wanted but there still
    will be the gap for the reason of room being made for descenders in
    inline text.

    (inline images are treated as sitting on a baseline like an "a" rather
    than having a part that descends like a "y". I can think of a few
    reasons but they are not completely compelling.

    One could say that browsers think inline images are special letters
    without descenders but wildly unpredictable ascenders.

    I am reminded of a joke - some people will see the relevance, others
    will not:

    <http://dorayme.890m.com/jokes/kosherRestaurant.html>


    )

    --
    dorayme
    dorayme, Aug 12, 2008
    #6
  7. On 2008-08-11, dorayme wrote:
    >
    ><http://dorayme.890m.com/jokes/kosherRestaurant.html>


    Tut, tut! A horizontal scrollbar in a narrow window.

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Aug 12, 2008
    #7
  8. killy971

    killy971 Guest

    Thank you very much for your answers. Using the style "display: block"
    actually made the trick.
    But I have another problem : I would like with the following code to
    have the image "searchline2sy4.gif" fill the whole cell it is in,
    without using it as a background image.
    Is there a way to do this ?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <style>
    img {
    display: block;
    border: 0;
    }
    body {
    font-size: 10pt;
    margin: 0px;
    }
    </style>
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td style="background-color: #000000;"><img src="http://
    img522.imageshack.us/img522/4941/searchline2sy4.gif" style="height:
    100%;"/></td>
    <td>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/></td></td>
    </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="http://img525.imageshack.us/img525/6070/
    searchline4wz0.gif"/></td>
    </tr>
    </table>
    </body>
    </html>
    killy971, Aug 12, 2008
    #8
  9. killy971

    dorayme Guest

    In article <91af9$48a0d1e0$cef88ba3$>,
    "Chris F.A. Johnson" <> wrote:

    > On 2008-08-11, dorayme wrote:
    > >
    > ><http://dorayme.890m.com/jokes/kosherRestaurant.html>

    >
    > Tut, tut! A horizontal scrollbar in a narrow window.


    Are you sure? <g>

    (Been ages since I looked at the stylesheet for my small collection of
    jokes... thanks, I probably need to tweak it even more but this should
    now do. I must have made it when I thought everyone had huge screens...)

    --
    dorayme
    dorayme, Aug 12, 2008
    #9
  10. killy971

    dorayme Guest

    In article
    <>,
    killy971 <> wrote:

    > Thank you very much for your answers. Using the style "display: block"
    > actually made the trick.
    > But I have another problem : I would like with the following code to
    > have the image "searchline2sy4.gif" fill the whole cell it is in,
    > without using it as a background image.
    > Is there a way to do this ?


    Will this do:

    <http://dorayme.890m.com/alt/killy.html>

    --
    dorayme
    dorayme, Aug 12, 2008
    #10
  11. killy971

    killy971 Guest

    On Aug 12, 10:44 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >  killy971 <> wrote:
    > > Thank you very much for your answers. Using the style "display: block"
    > > actually made the trick.
    > > But I have another problem : I would like with the following code to
    > > have the image "searchline2sy4.gif" fill the whole cell it is in,
    > > without using it as a background image.
    > > Is there a way to do this ?

    >
    > Will this do:
    >
    > <http://dorayme.890m.com/alt/killy.html>
    >
    > --
    > dorayme


    It doesn't seem to work well (ie and firefox), especially when you
    resize the window.
    killy971, Aug 12, 2008
    #11
  12. killy971

    dorayme Guest

    In article
    <>,
    killy971 <> wrote:

    > On Aug 12, 10:44 am, dorayme <> wrote:
    > > In article
    > > <>,
    > >
    > >  killy971 <> wrote:
    > > > Thank you very much for your answers. Using the style "display: block"
    > > > actually made the trick.
    > > > But I have another problem : I would like with the following code to
    > > > have the image "searchline2sy4.gif" fill the whole cell it is in,
    > > > without using it as a background image.
    > > > Is there a way to do this ?

    > >
    > > Will this do:
    > >
    > > <http://dorayme.890m.com/alt/killy.html>
    > >


    > doesn't seem to work well (ie and firefox), especially when you
    > resize the window.


    OK, I just saw it in Safari quickly before posting. You might know that
    width is not a problem if you do not specify a width for the cell it is
    in because a table cell (unless outside considerations dictate otherwise
    - in other words, there's a complication) will shrink to fit the
    content. So if there is only an image in one cell in a one row/ one cell
    table that is not dictated to in terms of width, the cell will be as
    wide as the content. In special case of just image, it will also be as
    high as the image. Magic of tables.

    <style type="text/css" media="screen">
    table {border-collapse: collapse; }
    td {border: 1px solid;}
    td.img {padding: 0;}
    .img img {display:block;}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td class="img"><img src="pics/crimson.png" alt=""></td>
    </tr>
    </table>
    </body>


    should show a cell just the right size of the natural image, width and
    height.

    Your problem, presumably is to get the image to stretch if the height of
    the cell is pushed high by the need to match an adjoining cell:

    Browsers have leeway in responding to

    <img src="pics/crimson.png" height="100%" width="100%" alt="">

    and in Safari and iCab but not FF,

    <http://dorayme.890m.com/alt/killy1.html>

    does what I imagine you want. But it does not get you the height stretch
    in FF.

    But before going on, why do you want this as foreground pic (that might
    well distort) and why in a table?

    --
    dorayme
    dorayme, Aug 12, 2008
    #12
  13. killy971

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article
    > <>,
    > killy971 <> wrote:
    >


    And, crazily enough, only in FF do you get this result (which is sort of
    close to what I imagine you want...)

    Under the circumastance that the image has its natural width, specified
    in px, the cell will shrink to fit and the height... well... the
    height...

    <http://dorayme.890m.com/alt/killy2_FF_only.html>

    <g>

    --
    dorayme
    dorayme, Aug 12, 2008
    #13
  14. killy971

    Gus Richter Guest

    dorayme wrote:
    > In article <g7pmn4$3m9$>,
    > Gus Richter <> wrote:
    >
    >> dorayme wrote:
    >>> In article
    >>> <>,
    >>> killy971 <> wrote:
    >>>
    >>>> I am having a problem with the fact that when I insert an image in a
    >>>> table cell, it won't fill the cell completely
    >>> You are likely getting a space at the bottom that you don't want because
    >>> you are using an inline image and the space is reserved for text
    >>> descenders. You can fix this by styling the images as display: block;

    >> Just for completeness, vertical-align:bottom; is another.

    >
    > vertical-align in the CSS or even valign="bottom" in the HTML for the
    > cell concerned would get it down in the vicinity wanted but there still
    > will be the gap for the reason of room being made for descenders in
    > inline text.


    Please actually try replacing display: block; with
    vertical-align:bottom; in the example you provided in this thread and
    then respond.
    Ref: <http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align>

    <snipped refresher material and joke>

    valign is another kettle of fish (or should I say a can of worms) which
    I'm going to stay away from.

    --
    Gus
    Gus Richter, Aug 12, 2008
    #14
  15. killy971

    dorayme Guest

    In article <g7r5q0$c7a$>,
    Gus Richter <> wrote:

    > dorayme wrote:
    > > In article <g7pmn4$3m9$>,
    > > Gus Richter <> wrote:
    > >
    > >> dorayme wrote:
    > >>> In article
    > >>> <>,
    > >>> killy971 <> wrote:
    > >>>
    > >>>> I am having a problem with the fact that when I insert an image in a
    > >>>> table cell, it won't fill the cell completely
    > >>> You are likely getting a space at the bottom that you don't want because
    > >>> you are using an inline image and the space is reserved for text
    > >>> descenders. You can fix this by styling the images as display: block;
    > >> Just for completeness, vertical-align:bottom; is another.

    > >
    > > vertical-align in the CSS or even valign="bottom" in the HTML for the
    > > cell concerned would get it down in the vicinity wanted but there still
    > > will be the gap for the reason of room being made for descenders in
    > > inline text.

    >
    > Please actually try replacing display: block; with
    > vertical-align:bottom; in the example you provided in this thread and
    > then respond.


    Let's distinguish the request from the OP for stretch to fit from the
    simpler one about the gap.


    table {border-collapse: collapse; width: 400px;}
    td {border: 1px solid;}
    td.img {padding: 0;}
    .img img {vertical-align:bottom;}

    <table>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
    nec orci quis nulla egestas fermentum. Ut quis eros.</td>
    <td class="img"><img src="pics/crimson.png" alt=""></td>
    </tr>
    </table>


    does not get the image on the bottom in FF or Safari or Opera. Of
    course, not surprising. But just hang on a moment.

    Neither does:

    table {border-collapse: collapse; width: 400px;}
    td {border: 1px solid;}
    td.img {padding: 0; vertical-align:bottom;}

    <table>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
    nec orci quis nulla egestas fermentum. Ut quis eros.</td>
    <td class="img"><img src="pics/crimson.png" alt=""></td>
    </tr>
    </table>

    But it gets it close, in the vicinity.

    However, the double whammy of:

    table {border-collapse: collapse; width: 400px;}
    td {border: 1px solid; .img img {vertical-align:bottom;}
    td.img {padding: 0; vertical-align:bottom;}

    <table>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
    nec orci quis nulla egestas fermentum. Ut quis eros.</td>
    <td class="img"><img src="pics/crimson.png" alt=""></td>
    </tr>
    </table>

    does do the trick of removing the gap completely!

    It is for interesting reasons. The vertical-align on the inline image
    gets it to its "normal" below baseline (which could be toward the top of
    the cell, the middle or the bottom depending on what is set for td's
    vertical-align), vertical-align on the relevant table cell gets the
    relevant baseline of the image (think text) down to the bottom.

    To see this, take a look at:

    <http://dorayme.890m.com/alt/killy_gus3.html>

    Gus, I hope you are not thinking I am disputing what you said flat out.
    I was rushed earlier today. Now its evening but I am wanting to go and
    see if any of those Polish volley ball or Georgian beach ball girls are
    competing at the Olympics as they were last night, they delayed the
    start of my watching not a bad movie about Franklin Roosevelt (called
    Warm Springs. It got to the edge of maudlin at a few points, but you
    know what the Americans are like when they get going on affairs to do
    with the heart). Fancy a martian taking an interest in Polish volley
    ball. <g>

    And no time now to respond to an interesting looking post from Ben. You
    have taken up all my time!

    --
    dorayme
    dorayme, Aug 12, 2008
    #15
  16. killy971

    Gus Richter Guest

    dorayme wrote:
    > In article <g7r5q0$c7a$>,
    > Gus Richter <> wrote:
    >
    >> dorayme wrote:
    >>> In article <g7pmn4$3m9$>,
    >>> Gus Richter <> wrote:
    >>>
    >>>> dorayme wrote:
    >>>>> In article
    >>>>> <>,
    >>>>> killy971 <> wrote:
    >>>>>
    >>>>>> I am having a problem with the fact that when I insert an image in a
    >>>>>> table cell, it won't fill the cell completely
    >>>>> You are likely getting a space at the bottom that you don't want because
    >>>>> you are using an inline image and the space is reserved for text
    >>>>> descenders. You can fix this by styling the images as display: block;
    >>>> Just for completeness, vertical-align:bottom; is another.
    >>> vertical-align in the CSS or even valign="bottom" in the HTML for the
    >>> cell concerned would get it down in the vicinity wanted but there still
    >>> will be the gap for the reason of room being made for descenders in
    >>> inline text.

    >> Please actually try replacing display: block; with
    >> vertical-align:bottom; in the example you provided in this thread and
    >> then respond.

    >
    > Let's distinguish the request from the OP for stretch to fit from the
    > simpler one about the gap.


    I don't understand how "stretch to fit" relates in this problem. Gap, yes.

    <snipped section leading to the example below>

    > <http://dorayme.890m.com/alt/killy_gus3.html>


    The OP only asked about an image within a cell. There was no mention of
    any text associated, least of all its quantity. Your first example
    killy.html used display:block; to remove the white space below the
    image. On my screen, the text in the first cell is on one line (one line
    of text). I simply mentioned that vertical-align:bottom; will also do
    the job. You then talked much about descender and I wondered why since
    it should be understood that both display:block; and
    vertical-align:bottom; bring the image from its baseline down to the
    bottom. (On reducing the window size, the text is expanded to several
    lines and the image is centered and off the bottom of the cell -
    applying vertical-align:bottom; to the cell resolves this).

    You presented killy_gus3.html with three cells and plenty of text
    spanning several lines. You've expanded the problem with the multiple
    text lines in the first two cells and resolved it by applying
    vertical-align:bottom; also to the image's cell.

    So, I was talking about .img img "only" and you were talking about
    td.img "as well" am I correct?

    ..img img takes vertical-align:bottom;

    td.img may take either display:block; or vertical-align:bottom;
    This is all that I was saying.

    > And no time now to respond to an interesting looking post from Ben. You
    > have taken up all my time!


    My sincerest apologies, madam.

    --
    Gus
    Gus Richter, Aug 12, 2008
    #16
  17. killy971

    dorayme Guest

    In article <g7sbkb$3fh$>,
    Gus Richter <> wrote:

    > >>>> dorayme wrote:


    > > Let's distinguish the request from the OP for stretch to fit from the
    > > simpler one about the gap.

    >
    > I don't understand how "stretch to fit" relates in this problem. Gap, yes.
    >


    Since the thread veered into this other matter, I was just making sure
    we were on the same wave length, that's all. I am saying what you are
    saying, that the stretch to fit problem has nothing to do with this one,
    so let's concentrate on this one. And just as a reminder to the possibly
    three other people on this planet who might read this now or in the
    future.

    > <snipped section leading to the example below>
    >
    > > <http://dorayme.890m.com/alt/killy_gus3.html>

    >
    > The OP only asked about an image within a cell. There was no mention of
    > any text associated, least of all its quantity.


    In general, in these matters about cells, what is in adjoining cells is
    quite important because these other cells are a major determinate of the
    size of the cell which we might be focussing on. But in this particular
    case of the URL you quote I was exampling the application of
    vertical-align to the image itself as distinguished from its application
    to the cell itself. At least in its effect practically in the browsers I
    have. In this latter capacity it acts on text too.

    Perhaps I should have given further URLS to the code I typed up in the
    post that demonstrates the difference. I was hoping you would not need
    me to do that but I will if you are still not quite gathering my meaning.

    Perhaps you missed the significance of my "does not get the image on the
    bottom in FF or Safari or Opera." in my last post? Your suggestion to
    remove display:block; earlier and replace with vertical:align; is
    slightly ambiguous. But taken literally, it does not work in all good
    modern browsers. Nor does it work when not taken literally - namely to
    remove display: block; and put vertical:align; on the cell itself rather
    the image element. Not on my tests.

    But, all not being lost, putting your vertical-align on both elements
    did the trick. At least it seemed to.

    Is that not an interesting matter Gus. We should be cracking out the
    champagne.

    (I think display: block on the image is by far the simplest thing to do
    to get rid of the cause of the gap in this matter of inline image. It
    attacks the problem at the joint of its reality without entering the
    kingdom of worms - to adapt (in my flowery way) - your expression. <g>)

    --
    dorayme
    dorayme, Aug 12, 2008
    #17
  18. killy971

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-08-12, dorayme <> wrote:

    ....
    > > And, crazily enough, only in FF do you get this result (which is sort of
    > > close to what I imagine you want...)
    > >
    > > Under the circumastance that the image has its natural width, specified
    > > in px, the cell will shrink to fit and the height... well... the
    > > height...
    > >
    > ><http://dorayme.890m.com/alt/killy2_FF_only.html>

    >
    > The problem here is that a replaced element's intrinsic height is
    > considered too important.
    >
    > For most things if you set top and bottom but not height you get
    > whatever height is needed to stretch between the positions you've given
    > for top and bottom.
    >
    > But images refuse to stretch like that. You set top and bottom, and
    > bottom gets ignored and the image keeps its intrinsic height (or
    > some function of its aspect ratio and any width you set).
    >
    > The only way to stretch an image is to set width and/or height. Nothing
    > else will do.
    >
    > As you found height: 100% of a table row meaning the height the row got
    > because of the other cells in it is unspecified and unreliable. It works
    > in quirks mode in some browsers, but we don't want to get involved with
    > that.
    >
    > But you have solved the other problem that Firefox doesn't allow
    > table-cells to be containing blocks for positioned descendents
    > (technically allowed by the spec some would argue although against the
    > spirit), by using a div outside the table as the container.
    >
    > So you can do a hybrid approach.
    >
    > Based on kill2_FF_only.html, put another div around the img:
    >
    > <td class="img">
    > <div>
    > <img src="killy3_files/crimson.png" alt="" width="137">
    > </div>
    > </td>
    >
    > Then style it like this:
    >
    > .img div {
    >
    > position: absolute;
    > top: 1px;
    > bottom: 1px;
    > }
    >
    > (You had those styles on .img img)
    >
    > .img img
    > {
    > height: 100%;
    > width: 100%;
    > }
    >
    > We stretch the div into the space made by the row, and then fit the img
    > into the div with width and height of 100%. Technically the div is still
    > height: auto so some browsers could still ignore those percentages, but
    > most of them don't.


    I did played about with an internal cell div wrapper before, but now, I
    have looked at your double whammy approach. (That's two double whammy
    approaches to two different problems in the same thread!). Interesting.

    But enlightenment has turned darker as I watch it under different
    browsers and different conditions. A can of worms! I am sure all this is
    of academic interest, I know I would not dare to employ such for a
    paying client. There is always a simpler approach to life (hint to OP).

    Where to begin?

    But here is URL with one interpretation of your suggestion to double up
    the divs:

    http://dorayme.890m.com/alt/killy2_ben.html

    Now this makes things work in Safari and Opera but all hell breaks loose
    in FF so I call it:

    <http://dorayme.890m.com/alt/killy2_except_in_FF.html>

    (I have slightly altered the absolute coordinates to make the borders
    aropund the cell that holds the img appear under this new suggestion).

    Different browsers take different approaches to the real dimensions and
    aspect - proportion of width to height - of images. plus there might be
    other things going on for how FF is calculating width here.

    Since we are fixing the td that holds the image to a width of 137px, we
    might fix this problem in FF by adding an explicit width to the div that
    immediately wraps the image.

    <http://dorayme.890m.com/alt/killy2_not_too_bad.html>

    Now *this* looks close to what might be wanted in Safari and Opera. The
    only niggle (to be optimistic for a moment) is that the FF would prefer
    a 2px coordinate for top and bottom so the border shines through.

    I wonder if this is a demo of the difficulty of keeping all the browsers
    happy while yet going for gold in pixel perfect layout? Could it become
    an Olympic event, pixel perfect layouts. Teams have 40 mins to design
    according to some set crieria for content and it must look *exactly* the
    same for all browsers after IE 5. <g>

    --
    dorayme
    dorayme, Aug 13, 2008
    #18
  19. killy971

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > are a major determinate


    are a major determinant

    --
    dorayme
    dorayme, Aug 13, 2008
    #19
  20. killy971

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <>,
    > Ben C <> wrote:
    >



    I'm sorry but I have completely mucked up that last post in reply to
    you. Please don't read it, I was working on the urls in the middle of it
    and the names of the URLs got changed as I went and hell... The main
    problem was I renamed killy2_ben.html as killy2_except_in_FF.html. But
    never mind...

    Lets go again with the essentials:

    I played about with an internal cell div wrapper before, but now, I
    have looked at your double whammy approach.

    But enlightenment has turned darker as I watch it under different
    browsers and different conditions. A can of worms!

    Here is URL with one interpretation of your suggestion to double up
    the divs. Now this makes things work in Safari and Opera but all hell
    breaks loose in FF so I call it:

    <http://dorayme.890m.com/alt/killy2_except_in_FF.html>

    Different browsers take different approaches to the real dimensions and
    aspect - proportion of width to height - of images. Plus there might be
    other things going on for how FF is calculating width here. In this URL,
    FF overflows the image wide and right outside the cell

    Since we are fixing the td that holds the image to a width of 137px, we
    might fix this problem in FF by adding an explicit width to the div that
    immediately wraps the image. And this should not affect the other
    browsers too much:

    <http://dorayme.890m.com/alt/killy2_not_too_bad.html>

    Now *this* looks close to what might be wanted in Safari and Opera.

    (I am sorry about the muck up! I am only a partially spent force.)

    --
    dorayme
    dorayme, Aug 13, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark
    Replies:
    1
    Views:
    372
    kchayka
    Jul 25, 2003
  2. EARLE
    Replies:
    1
    Views:
    402
    =?iso-8859-1?Q?brucie?=
    Sep 28, 2003
  3. Joshua Beall
    Replies:
    4
    Views:
    632
    Joshua Beall
    Apr 19, 2004
  4. Mohsen Pahlevanzadeh
    Replies:
    0
    Views:
    112
    Mohsen Pahlevanzadeh
    Sep 9, 2013
  5. MRAB
    Replies:
    0
    Views:
    111
Loading...

Share This Page