IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags &CSS

Discussion in 'HTML' started by MISS CHIEVOUS, Apr 2, 2009.

  1. Once again I'm having trouble with (whaaaaaaaat else) -->MS INTERNET
    EXPLORER (ver.5.5).

    My graphics resize perfectly in FF . . . but are butchered when viewed
    in IEx.

    I went to some trouble to produce the two examples I'm providing so I
    hope everyone appreciates my efforts to keep the following two
    iterations stripped down and color-standardized.

    EXAMPLE 1
    A version of the page I'm trying to build; TEXT-ONLY; and background-
    colors in place of what would be a graphic (where applicable). Page
    renders perfectly in both browsers; unfortunately it isn't what I'm
    trying to build. :(
    http://www.geocities.com/a4248713/IExpand-O-TEXTONLY.html

    EXAMPLE 2
    THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
    http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html

    ==============================================
    EXAMPLE 1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>IExpand-O-TEXTONLY.html Ver. 01</title>

    <style type="text/css">

    #LEFT {
    width: 16%;
    height: 100%;
    float: LEFT;
    background-color: #FFFF99;
    border: 3px dashed #000;
    }

    #RIGHT {
    width: 82%;
    float: RIGHT;
    }

    body,td,th {
    font-family: Arial;
    color: #000000;
    }
    </style>

    </head>
    <body>

    <div id="LEFT">
    <div style="text-align: center;">
    <span style="font-weight: bold;">
    <font size="+2">
    SIDEBAR IMAGE IN A 16% COLUMN<br /></font></span>
    </div>
    </div>

    <div id="RIGHT">
    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="10" cellspacing="0">
    <tbody>
    <tr>

    <td style="vertical-align: top; width: 33%; background-color: rgb(0,
    153, 0);">
    <span style="font-weight: bold;">
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
    </td>

    <td style="vertical-align: top; width: 33%; background-color: rgb(153,
    255, 0);">
    <span style="font-weight: bold;">
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
    </td>

    <td style="vertical-align: top; width: 33%; background-color: rgb(204,
    255, 153);">
    <span style="font-weight: bold;">
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br />
    IMAGE IN A 33% COLUMN<br style="font-weight: bold;" /></span>
    </td>

    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <div style="text-align: left;">
    <span style="font-weight: bold;">
    <font size="+2">
    (blank)<br></font></span>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="20" cellspacing="0">
    <tbody>
    <tr>

    <td style="vertical-align: bottom; width: 40%; background-color: rgb
    (255, 204, 255);">
    <div style="text-align: center;">
    <span style="font-weight: bold;">
    <font size="+2">
    IMAGE IN A<br>
    40% COLUMN</font></span>
    </td>

    <td style="vertical-align: bottom; width: 60%; text-align: left;
    background-color: rgb(0, 0, 0); color: WHITE;">
    <span style="font-weight: bold;">
    <font size="+3">
    60% WIDE COLUMN<br>
    CONTAINING TEXT and<br>
    ALIGNING AT THE BOTTOM</font><br>
    <font size="+2">
    <span style="color: rgb(204, 51, 204);">(as does the ◄◄
    graphic to the left)</font></span></span><br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
    felis. Aliquam sit amet felis. Mauris semper,
    velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
    nisl in quam. Etiam augue pede, molestie eget,
    rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
    odio sagittis blandit. Maecenas at nisl. Nullam
    lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
    wisi. Ut ante dui, aliquet nec, congue non, accumsan
    sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
    venenatis. Suspendisse cursus velit vel ligula.
    Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
    suscipit. Aenean quis risus sit amet eros volutpat
    ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
    </td>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <div style="text-align: left;">
    <span style="font-weight: bold;">
    <font size="+2">
    (blank)<br></font></span>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="20" cellspacing="0">
    <tbody>
    <tr>

    <td style="vertical-align: top; width: 40%; background-color: rgb(0,
    153, 255);">
    <div style="text-align: right;">
    <span style="font-weight: bold;">
    <font size="+2">
    IMAGE IN A 50% COLUMN</font></span>
    </td>

    <td style="vertical-align: top; width: 40%; background-color: rgb(153,
    204, 255);">
    <div style="text-align: left;">
    <span style="font-weight: bold;">
    <font size="+2">
    IMAGE IN A 50% COLUMN</font></span>
    </td>

    </tr>
    </tbody>
    </table>

    </div>

    </body>
    </html>

    ==============================================
    EXAMPLE 2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>IExpand-O-GRAPHIC.html Ver. 01</title>

    <style type="text/css">

    #LEFT {
    float: LEFT;
    width: 16%;
    height: 100%;
    border: 3px dashed #000;
    background-color: TRANSPARENT;
    }

    #RIGHT {
    float: RIGHT;
    width: 82%;
    background-color: TRANSPARENT;
    }

    body,td,th {
    font-family: Arial;
    color: #000000;
    }

    </style>
    </head>
    <body>

    <div id="LEFT">
    <img src="http://www.geocities.com/a4248713/YELLOW.gif" style="width:
    100%;" alt="">
    </div>


    <div id="RIGHT">

    <table style="text-align: left; width: 100%;" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>
    <td style="vertical-align: top; width: 33%; text-align: center;">
    <img src="http://www.geocities.com/a4248713/GREEN-1.gif" style="width:
    92%; height: 92%;" hspace="10" alt="">
    </td>
    <td style="vertical-align: top; width: 33%; text-align: center;">
    <img src="http://www.geocities.com/a4248713/GREEN-2.gif" style="width:
    92%; height: 92%;" hspace="10" alt="">
    </td>
    <td style="vertical-align: top; width: 33%; text-align: center;">
    <img src="http://www.geocities.com/a4248713/GREEN-3.gif" style="width:
    92%; height: 92%;" hspace="10" alt="">
    </td>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <div style="text-align: left;">
    <span style="font-weight: bold;">
    <font size="+2">
    (blank)<br></font></span>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" cellpadding="10"
    cellspacing="0">
    <tbody>
    <tr>
    <td style="vertical-align: bottom; width: 40%; text-align: center;">
    <img src="http://www.geocities.com/a4248713/PINK.gif" style="width:
    90%;" alt="" align="bottom">
    </td>

    <td style="vertical-align: bottom; width: 60%; text-align: left;
    background-color: rgb(0, 0, 0); color: WHITE;">
    <span style="font-weight: bold;">
    <font size="+3">
    60% WIDE COLUMN<br>
    CONTAINING TEXT and<br>
    ALIGNING AT THE BOTTOM</font><br>
    <font size="+2">
    <span style="color: rgb(204, 51, 204);">(as does the ◄◄
    graphic to the left)</font></span></span><br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
    felis. Aliquam sit amet felis. Mauris semper,
    velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
    nisl in quam. Etiam augue pede, molestie eget,
    rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
    odio sagittis blandit. Maecenas at nisl. Nullam
    lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
    wisi. Ut ante dui, aliquet nec, congue non, accumsan
    sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
    venenatis. Suspendisse cursus velit vel ligula.
    Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
    suscipit. Aenean quis risus sit amet eros volutpat
    ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
    </td>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" border="0"
    cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <div style="text-align: left;">
    <span style="font-weight: bold;">
    <font size="+2">
    (blank)<br></font></span>
    </tr>
    </tbody>
    </table>

    <table style="text-align: left; width: 100%;" cellpadding="0"
    cellspacing="0">
    <tbody>
    <tr>

    <td style="vertical-align: top; width: 40%;">
    <img src="http://www.geocities.com/a4248713/BLUE-1.gif" style="width:
    92%; height: 92%;" hspace="10" alt="">
    </td>

    <td style="vertical-align: top; width: 40%;">
    <img src="http://www.geocities.com/a4248713/BLUE-2.gif" style="width:
    92%; height: 92%;" hspace="10" alt="">
    </td>

    </tr>
    </tbody>
    </table>

    </div>

    </body>
    </html>
    MISS CHIEVOUS, Apr 2, 2009
    #1
    1. Advertising

  2. MISS CHIEVOUS

    TYTBUDGET Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    Let me say that the % widths viewable in the browser are not intended
    to be _literal_ -- this is just so you can see how I'm generally
    carving up the real estate. I actually had to do a little fiddling
    with %'s and gutters to get the result you see, as is evident in my
    code.

    About the closest I came to getting IEx to display properly was after
    placing the entire second column in its own <DIV>. This exercise
    managed to relieve RIGHT of the indignity of being shoved underneath
    LEFT by pulling it up to the top of the browser; but the graphics
    _still_ do not size properly, and the most vexing row -- the GREEN row
    -- is butchered beyond recognition (if displaying AT ALL!).

    I've been at this for three days and . . . I give up! lol

    H E L L L L L L P !

    Thank you my friends. :)

    MC
    TYTBUDGET, Apr 2, 2009
    #2
    1. Advertising

  3. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    Let me say that the % widths viewable in the browser are not intended
    to be _literal_ -- this is just so you can see how I'm generally
    carving up the real estate. I actually had to do a little fiddling
    with %'s and gutters to get the result you see, as is evident in my
    code.

    About the closest I came to getting IEx to display properly was after
    placing the entire second column in its own <DIV>. This exercise
    managed to relieve RIGHT of the indignity of being shoved underneath
    LEFT by pulling it up to the top of the browser; but the graphics
    _still_ do not size properly, and the most vexing row -- the GREEN row
    -- is butchered beyond recognition (if displaying AT ALL!).

    I've been at this for three days and . . . I give up! lol

    H E L L L L L L P !

    Thank you my friends. :)

    MC
    MISS CHIEVOUS, Apr 2, 2009
    #3
  4. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    >
    > I've been at this for three days and . . . I give up! lol
    >
    > H E L L L L L L P !
    >


    In your original post you managed to say both: "A version of the page
    I'm trying to build" and "...it isn't what I'm trying to build". in the
    same paragraph! I know what you mean. But why bother to give this
    example in the first place? Especially as it has 110 Errors, 6
    warning(s) when trying to validate it. And why did you print out all the
    markup and CSS there when we can see it from the URLS?

    > EXAMPLE 2
    > THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
    > http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html
    >


    There are less errors in this one so why not fix those first before
    proceeding *in case* these errors are causing you trouble.

    I know, these "errors" are probably not the cause of your problem but it
    is polite to not serve up stuff like that here and at length.

    I suspect the problem that is driving you crazy is something to do with
    the way IE refuses to shrink native size of images and yours are huge.

    We went through this issue in the last thread you started here.

    and I gave an example at:

    <http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

    to demo the issue.

    At one point and another I said:

    In IE
    <p> or <div>
    <img ... width="100%">
    </p> or </div>
    will work but in a table cell, the instruction to % is in relation to
    the image's native width! If you try 50% in a p or div, you will get
    half the p or div's width (100% of its parent by default). At least in
    IE7. In a table cell, it simply goes for the native as benchmark to %
    against.

    and

    IE literally shrinks the cell to fit the native size of the
    image. It does not listen to any percentage width instruction for the
    image if the window is less than the width of the image. Having shrunk
    its width to fit the native image, it is nevertheless in an approachable
    mood to stretch the image. It takes notice of the % instruction then. So
    if you open a window wider than the table in our one cell example, it
    will stretch.
    Note that IE listens carefully to width instructions in non percentage
    terms, either delivered via CSS or in the traditional way in the image
    element.

    --
    dorayme
    dorayme, Apr 2, 2009
    #4
  5. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    Hi dorayme! Geez I'm sorry, I'll get the netiquette eventually.

    Okay, I not only cleaned up BOTH of those files, I rendered them both
    in XHTML.

    And this is a compleeeeeeeetely different animal from our one-column
    masterpiece, as I'm sure you are (((painfully))) aware lol.

    They're squeaky clean and ready for action! Let's get Roman!*

    MC

    *columns
    MISS CHIEVOUS, Apr 3, 2009
    #5
  6. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    On Apr 2, 2:54 pm, dorayme <> wrote:
    > In IE
    > <p> or <div>
    > <img ... width="100%">
    > </p> or </div>
    > will work but in a table cell, the instruction to % is in relation to
    > the image's native width!


    I had to read this about five different times before I could grasp the
    concept of what you are saying here dorayme. It's no reflection on
    your vernacular, it's just my right-brained obstinancy with the purely
    logical. That's a compliment heh heh. ;)

    I _think_ what you are saying is:
    In an IEx Table Cell, <img . . . %"> tags are relative to THE IMAGE
    ITSELF, not the window.

    -----Is that what you are saying?

    -----Then do you think my strategy should be to achieve a TABLELESS
    architecture?

    -----And if so, would any tables I might want to add later that
    contain text and/or Fixed-Size images and do NOT need image resizing
    conflict with the other tableless columns?

    Sorry I posted that impure html, it was at the tail-end of a 72-hour
    effort to try to do this by myself and I was just pissed off that I
    had to show up here and beg for help again.

    As usual, you are a treasure dorayme. I'll calm down now and just
    listen. If IEx were a person I'd take my frying pan and beat the
    living hell out of him lol.

    MC
    MISS CHIEVOUS, Apr 3, 2009
    #6
  7. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > Hi dorayme! Geez I'm sorry, I'll get the netiquette eventually.
    >
    > Okay, I not only cleaned up BOTH of those files, I rendered them both
    > in XHTML.
    >


    Uh oh! Read the current thread on alt.html "Which thread to use?" But it
    is not so important in your case. You have more things to worry about,
    like basic ideas such as at least understanding that tables are not the
    default way to go to lay pages out. Tables are for displaying lists and
    best reserved mainly for multiple lists where the relationship between
    the list items is important information.

    Why do I get the feeling that you are going to love this:

    <http://www.hotdesign.com/seybold/everything.html>


    > And this is a compleeeeeeeetely different animal from our one-column
    > masterpiece, as I'm sure you are (((painfully))) aware lol.
    >
    > They're squeaky clean and ready for action! Let's get Roman!*
    >


    What is squeaky clean? No URL quoted. My newsreader is an online one and
    every day is a brand new one. It is a bit like the theory that the world
    was created 5 mins ago.

    --
    dorayme
    dorayme, Apr 3, 2009
    #7
  8. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > On Apr 2, 2:54 pm, dorayme <> wrote:
    > > In IE
    > > <p> or <div>
    > > <img ... width="100%">
    > > </p> or </div>
    > > will work but in a table cell, the instruction to % is in relation to
    > > the image's native width!

    >
    > I had to read this about five different times before I could grasp the
    > concept of what you are saying here dorayme. It's no reflection on
    > your vernacular, it's just my right-brained obstinancy with the purely
    > logical. That's a compliment heh heh. ;)
    >
    > I _think_ what you are saying is:
    > In an IEx Table Cell, <img . . . %"> tags are relative to THE IMAGE
    > ITSELF, not the window.
    >
    > -----Is that what you are saying?
    >

    Yes, that's about it. The details at any rate are in the thread you
    started in this group called "Help to REPEAT (not stretch!) AN IMAGE
    <--HORIZONTALLY ..."

    > -----Then do you think my strategy should be to achieve a TABLELESS
    > architecture?
    >


    That should be your first shot! And only resort to tables for layout
    when it becomes impossible for you.

    > -----And if so, would any tables I might want to add later that
    > contain text and/or Fixed-Size images and do NOT need image resizing
    > conflict with the other tableless columns?
    >

    Start forgetting about tables for a while, they are too much on your
    mind! You are not only worrying about past tables and present tables but
    future ones too now! This is a serious condition. <g>


    > As usual, you are a treasure dorayme. I'll calm down now and just
    > listen. If IEx were a person I'd take my frying pan and beat the
    > living hell out of him lol.
    >


    I have offered myself as the mystery object to the BBC program
    "Collectors" for one of their future shows.

    --
    dorayme
    dorayme, Apr 3, 2009
    #8
  9. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article <>,
    dorayme <> wrote:

    > Read the current thread on alt.html "Which thread to use?"


    Should be:

    Read the current thread on alt.html "Which spec to use?"

    --
    dorayme
    dorayme, Apr 3, 2009
    #9
  10. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    On Apr 3, 12:36 pm, dorayme <> wrote:
    > What is squeaky clean?


    Why . . . my code. You were justifiably offended that I would post
    code to the group that is rife with errors, so I cleaned it up. It
    validated in Dreamweaver with no errors or warnings. It, uh . . . it
    is clean isn't it?

    > Why do I get the feeling that you are going to love this:
    > <http://www.hotdesign.com/seybold/everything.html>


    You're right! Look, I have no aversion to tutorials dorayme; but I
    just wasted three days studying probably 5 or 6 of them and _still_
    couldn't get the columns to make nice in IEx. I've bookmarked the
    site you recommended and I'll return to study it; but what I really
    would appreciate is a live EXAMPLE that I can mod for my own use.
    Everyone and their mother have text-only iterations of how to achieve
    my layout -- indeed, much of what I was able to cobble together is the
    direct reflection of someone else's layout, modified (however crudely)
    for the graphics-intense nature of my particular page.

    What I have yet to locate are examples of IEx-SCALEABLE GRAPHICS IN
    MULTIPLE COLUMNS. Again, I welcome tutorial links dorayme; but if the
    cell content in any of these examples is (the ubiquitous) TEXT the
    information is useless to me. I've already cobbled a text version of
    what I want (the infamous Example 1, above). For three days I looked
    for examples of multiple columns containing (almost exclusively)
    graphics but couldn't find anything. I Advance-Googled it every way I
    could think of but . . . without one or two specific <TAGS> -- tags
    that might be unique to the kind of graphics content that is my
    particular application -- I'm wading through oceans of Example 1's.

    I'll study your hotdesign site and report back if I find it has even
    _one_ example of what I'm looking for; meanwhile, feel free to point
    me to one if you know it >>right now heh heh.

    MC
    MISS CHIEVOUS, Apr 3, 2009
    #10
  11. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > On Apr 3, 12:36 pm, dorayme <> wrote:
    > > What is squeaky clean?

    >
    > Why . . . my code. You were justifiably offended that I would post
    > code to the group that is rife with errors, so I cleaned it up. It
    > validated in Dreamweaver with no errors or warnings. It, uh . . . it
    > is clean isn't it?


    I was asking you to repeat the URL. My newsreader does not keep past
    posts.

    --
    dorayme
    dorayme, Apr 3, 2009
    #11
  12. MISS CHIEVOUS, Apr 4, 2009
    #12
  13. MISS CHIEVOUS

    Neredbojias Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    On 04 Apr 2009, MISS CHIEVOUS <> wrote:

    > EXAMPLE 1
    > A version of the page I'm trying to build; TEXT-ONLY; and background-
    > colors in place of what would be a graphic (where applicable). Page
    > renders perfectly in both browsers; unfortunately it isn't what I'm
    > trying to build. :(
    > http://www.geocities.com/a4248713/IExpand-O-TEXTONLY.html
    >
    > EXAMPLE 2
    > THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
    > http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html


    You will _never_ get it "right" until you use valid markup (31 errors).

    What's this: </object></layer> ???

    Furthermore, there's no doctype... Oops, wrong, there IS a doctype but
    it's under some Geocities server crap which puts all versions of IE in
    quirks mode. Good luck, Missy.

    --
    Neredbojias
    People who live in glass houses must feel funny peeing.
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, Apr 4, 2009
    #13
  14. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > THE PAGE I'M HAVING TROUBLE WITH IN IEX (renders fine in FF)
    > http://www.geocities.com/a4248713/IExpand-O-GRAPHIC.html
    >


    Your page needs rewriting, away from tables, at least for the reason I
    mentioned earlier about the problem IE has with stretching images in
    table cells.

    Here is a start:

    <http://dorayme.netweaver.com.au/chievous/fraction.html>

    Your images will get height from their native proportions, after the
    width has been calculated.

    I will try to do more when I have time or need a break from my own work.

    --
    dorayme
    dorayme, Apr 5, 2009
    #14
  15. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    OMG!!!!
    Master, I am your disciple.
    Oh and, did I mention? . . . IT WORKS! lol

    I'm so bleary-eyed from studying CSS tutorials I was just about to go
    fix myself a G&T and get good and cooked, when I thought, well, I'll
    just check in one last time.

    Strip my gears and call me shiftless.

    oo oo, now let me see if I can do the rest! I'll set to work on this
    bright and early tomorrow morning. If I can't finish this after
    you've done the heavy lifting _I am_ pathetic lol.

    Incidentally, I would like to share some very good sites that I found
    (not that you need them). This is more in the way of my commitment to
    post complete data in these threads so that others can learn what I'm
    learning. :)

    Anyhoo, in addition to your excellent link, here are some very chewy
    resources for the CSS Beginner, beginning with my favorite . . .
    http://www.w3.org/TR/CSS2/indexlist.html
    and this link in particular . . .
    http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

    I've been reading the official W3 tutorials for the last few hours and
    my head is almost exploding with possibilities (thus obliging alcohol
    heh).

    The greatest epiphany (for me) in reading the W3 tutorials was
    something I didn't even realize was confusing the hell out of me, and
    it is simply this: What exactly defines a ROW if you can't find a
    <tr> in your design? and that's when I realized that I had to break
    free of the two-dimensional concept of a table (x and y); because in
    CSS virtually everything can be its own "object," planted (or
    floating) wherever you want it.

    For beginners like me who have little-to-no experience with
    stylesheets, this can be nerve wracking, since you're looking for
    STARTING POSITIONS within the body of the html for (for example) the
    next row, when there is no such thing. There is no "grid" that you
    follow in linear terms (this row follows that row; this column
    precedes that column, etc.).

    If a beginner is reading this, I'll say this to you: It's like each
    one of those colored blocks of graphics in my Example 2 (above) were a
    separate 3x5 card; you lay them out on your desk in the position you
    want them to have on your page; but when you look at the code, all you
    see is them stacked.

    And that of course is because all of the maneuvering and positioning
    is taking place in the CSS, which is in actuality a "Function" (to use
    the mathematical term) that "Operates" on each of those little blocks
    of (whatever, text, graphics) to position them . . . not just sort of
    where you want them (what you have with tables), but EXACTLY where you
    want them show up on the screen.

    It's a level of control that is at once breathtaking and intimidating.

    I'll weigh in tomorrow but right now I'm going to have a very large
    Bombay Sapphire Gin & Tonic.

    Thank you so much my friend.

    MC
    MISS CHIEVOUS, Apr 5, 2009
    #15
  16. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > OMG!!!!
    > Master, I am your disciple.
    > Oh and, did I mention? . . . IT WORKS! lol


    You are my disciple? OK, then I will condemn you to read my theories as
    I make them up. And all instructions. After you have finished your G &
    T, you can start by going to outside the bedroom windows of my sleeping
    enemies and read out loud all your previous table markup, use a bugle to
    announce each row and cell. <g>

    --
    dorayme
    dorayme, Apr 5, 2009
    #16
  17. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    On Apr 5, 1:00 am, Ben C <> wrote:
    > Better to read the CSS 2.1 spec than CSS 2.


    Even better if you provide a >>link. Meanwhile . . .

    I've been at it now for 2 hours dorayme and what's giving me grief is
    (any) attempt to put a SPACER graphic in these rows.

    Your
    - - - - - - - - - - - - - - -
    #LEFT img {
    - - - - - - - - - - - - - - -
    works only as well as every image in the row is identical in size.
    When I attempted to add two small 10 x 100 SPACER gifs around GREEN-2
    (both browsers) ignored the global intent of the 33% ID instruction,
    spread the first three images (GREEN-1 + SPACER + GREEN-2) across the
    first row . . . and wrapped the remaining two images to (effectively)
    a new row. In other words, changing the value from 33% to 20%
    accommodates all 5 images on one row -- _including_ SPACER, which I do
    not want to inherit the 33% value.

    You can imagine the kinds of post-modernist effects I've been treated
    to for the last 2 hours while I experimented with different ways to
    get that SPACER to hold his own against GREEN-1, GREEN-2 and GREEN-3
    heh heh. I even at one point thought that this might be a typically
    lame IE limitation, and adjusted the height of the SPACER to be
    identical to those of the three GREENs. No sale.

    Hard-embedding transparent margins into each side of GREEN-2 is also
    not an option, since the width would then throw the otherwise-clean %
    values and skew the effect. Even if it didn't do that, this method is
    too crude to be practical, as I would be modifying images without
    end. And I don't mind creating SPACER images because they are
    transportable. Not beautiful; just precise. :)

    I'm having other issues, but right now this one is the most vexing.
    Suggestions?

    MC
    MISS CHIEVOUS, Apr 5, 2009
    #17
  18. MISS CHIEVOUS

    dorayme Guest

    Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags & CSS

    In article
    <>,
    MISS CHIEVOUS <> wrote:

    > On Apr 5, 1:00 am, Ben C <> wrote:
    > > Better to read the CSS 2.1 spec than CSS 2.


    > Even better if you provide a >>link. Meanwhile . . .
    >


    Surely you could have looked this one up! Ben is right and you will
    waste less time looking at 2.1

    <http://tinyurl.com/cyyt6w>

    Perhaps this might be a bit heavy going though for you. It is not
    exactly exciting bedtime reading. There is no substitute to working your
    way through at least some good basic tutorials where you can pick up
    some good habits.

    <http://htmldog.com/>

    You might be encouraged by its introduction:

    "...the CSS Beginner Tutorial assumes that you know as much about CSS as
    you do about the cumulative effects of sea squirt discharge on the brain
    chemistry of Germanic ammonites. The purpose of this guide is to teach
    the bare essentials - just enough to get started."

    > I've been at it now for 2 hours dorayme and what's giving me grief is
    > (any) attempt to put a SPACER graphic in these rows.
    >


    If you want flexibility in your project, best to fit the html with
    elements and put the images inside the elements. I have no real idea
    what you are doing but anyway, that has never stopped me trying to deal
    with earthlings.

    Previously:

    <http://dorayme.netweaver.com.au/chievous/fraction.html>

    #topRow img {float: left; width: 33%; text-align: center;}

    and

    <div id="topRow">
    <img src="GREEN-1.gif" alt="">
    <img src="GREEN-2.gif" alt="">
    <img src="GREEN-3.gif" alt="">
    </div>

    but more flexible is to change to

    #topRow div {float: left; width: 33%; text-align: center;}
    #topRow div img {width: 92%;}

    and

    <div id="topRow">
    <div><img src="GREEN-1.gif" alt=""></div>
    <div><img src="GREEN-2.gif" alt=""></div>
    <div><img src="GREEN-3.gif" alt=""></div>
    </div>

    The idea here is to have the three divs (not the images) divide the area
    within #topRow (which itself auto fills the space to the right of the
    left column). You the specify how much space within each div you want
    the image to take up. This gets you that spacing look you might want and
    it is very flexible too in that you can alter figures at will, you can
    even class the individual divs or refer to them in other ways in the CSS
    to make them different individually:

    <http://dorayme.netweaver.com.au/chievous/fraction2.html>

    --
    dorayme
    dorayme, Apr 5, 2009
    #18
  19. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    On Apr 5, 1:02 pm, dorayme <> wrote:
    > Surely you could have looked this one up!

    I couldn't find an official guide >>on the W3 site<< dorayme. Many
    apologies to Ben for not qualifying my earlier comment. I wasn't
    being impertinent; I'm just mentally fatigued. Now that I reread it
    it does sound cheap and clearly not my intent. Thank you Ben for the
    suggestion -- _wherever_ a 2.1 guide can be found (and "official" or
    not)! Believe me, I need all the help I can get.

    Now dorayme, about this faux column style : This will work
    beautifully with ROW 3 . . . but not ROWs 1 and 2.

    ROW 1 needs to have exactly _2_ spacers: GREEN-1 and GREEN-3 "snap" to
    fill 100% of column #RIGHT's width.

    ROW 2 needs to have the same effect -- only, because there are two
    images (instead of three) spanning the row, only _1_ spacer can be
    present: between the two cells.

    Put another way, there cannot be any spacer touching the left and
    right borders of these two rows.

    Now, I'll commit a blasphemy here and ask: could I just slip in a
    little itty-bitty table between these DIVs? or will that throw the
    whole role? Somehow I have to be able to drop spacers in between
    these DIV cells.

    MC
    MISS CHIEVOUS, Apr 5, 2009
    #19
  20. Re: IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIVTags & CSS

    Correct that to read: "throw the whole row."

    Tired.

    MC
    MISS CHIEVOUS, Apr 5, 2009
    #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. zEE
    Replies:
    1
    Views:
    907
    Waqas
    Aug 22, 2012
  2. linkswanted
    Replies:
    1
    Views:
    862
  3. dorayme
    Replies:
    0
    Views:
    368
    dorayme
    Feb 20, 2009
  4. pachuts

    Image auto sizing in asp.net

    pachuts, May 5, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    98
    Brock Allen
    May 6, 2005
  5. Crunch Hardtack
    Replies:
    0
    Views:
    99
    Crunch Hardtack
    Jul 14, 2005
Loading...

Share This Page