Coffeehouse Thread

35 posts

IE White-space rendering sucks...

Back to Forum: Coffeehouse
  • jsampsonPC

    UPDATE 2008 - This thread is 2+ years old. It was revived by another niner. No need to "discuss" this topic.


    --Update-- This thread deals with White-space, not tables.


    Over the years I have been using IE as my primary browser, simply because of it's popularity, and ease of use...now I'm getting sick of it.

    I'll just bring in one suspect today, IE and table-rendering.

    Did you know that

    <td width="192" height="307"><img src="hi.jpg" width="192" height="307" /></td>

    is different than

    <td width="192" height="307">
        <?php
           $var = "hi";
           print "<img src=$var.".jpg" width=\"192\" height=\"307\" />";
        ?>
    </td>


    ...Yes, they are both treated differently. The second will throw the parent <td> dimensions out of whack.

    Do you know how I have to write the second in order for it to render properly?

    I have to put ALL OF THE CODE in a single line! So it becomes this:

    <td width="192" height="307"><?php $var = "hi"; print "<img src=$var.".jpg" width=\"192\" height=\"307\" />"; ?></td>

    Annoyingly hard to read? I know, and that's how my source-code has to look in order for IE to properly render a <td><img></td> with fixed widths in both elements.

    So, where do I file my complaint for IE to get 'fixed' so I can actually have some source-formatting in my code? Smiley

    Regards,
    Jonathan Sampson

  • gregoryw

    You can provide IE feedback via:

    https://connect.microsoft.com/IE

  • sbc

    You could do this:

    <td width="192" height="307"><?php
           $var = "hi";
           print "<img src=$var.".jpg" width=\"192\" height=\"307\" />";
    ?></td>

  • ZippyV

    Does td have a width and a height attribute in xhtml?

  • jsampsonPC

    I thought I tried that; I'm no longer at my house so I will have to double-check later.

    Eithe way, this shouldn't be a problem; IE should eliminate all white-space when processing, so as to not have this problem.

    <td>something</td>

    should be treated the same as

    <td>
        Something
    </td>

    period Smiley

    Thanks for the input though, and I will double-check when I get to the house on my lunch break.

    Jonathan

  • ZippyV

    I just checked at W3: there is no height and width in td.

    If you have errors in your document, IE goes into garbage rendering mode and the result becomes unpredictable.

  • jsampsonPC

    ZippyV wrote:
    I just checked at W3: there is no height and width in td.

    If you have errors in your document, IE goes into garbage rendering mode and the result becomes unpredictable.


    That's almost a non-issue though; the point still remains that IE handles both code-blocks differently, regardless their height and width in HTML or CSS.

  • ZippyV

    Even if you would get it right in IE, there would still be a possibility that Firefox and other browsers will render it in a totally different way.

  • jsampsonPC

    They do.

    However, FireFox handles both blocks in the same way. IE has no consistnecy on this problem...but I have not tested with IE7 - so I don't know if this problem was addressed or not.

    I just wish they all adhered to the suggested code-standards Smiley

  • Rowan

    You're a bit slow on the uptake, but better late than never. Smiley

    I think there's ways around this, but I seriously can't remember the last time I used a table. Chances are if you're having issues with tables than you're not using them correctly, I mean why create a table cell just for an image?

    You should get a few results searching for white space bugs and such on Google.

  • jsampsonPC

    I didn't create a single cell for a single image; this was only a summary demonstrating the concept on a much smaller scale.

    I'm not going to post the actual code, since it would be a bunch of space-waster.

    I believe I'm using the table correctly; but correct me if I'm wrong.

    Show me the correct table-using-method and I'm sure IE will still use both ways differently.

    Regards,
    Jonathan

  • Sven Groot

    jsampsonPC wrote:
    I believe I'm using the table correctly; but correct me if I'm wrong.

    It's really simple. Tables should be used for tabular data, and only for tabular data. Not for layout.

    Your sample is too small to determine whether you're breaking that rule (although putting an image in a cell wanting to specify the precise dimensions of the cells hints at a table used for layout purposes, I can't be certain of it).

  • jsampsonPC

    I understand that tables should be reserved for tabular data, and in my situation it is. Consider the following:

    <table>
        <tr>
           <td><img src="names.jpg"></td>
           <td><img src="ages.jpg"></td>
        </tr>
        <tr>
           <td>Sven Groot</td>
           <td>25</td>
        </tr>
        <tr>
           <td>Jonathan Sampson</td>
           <td>23</td>
        </tr>
    </table>

    isn't treated the same as

    <table>
        <tr>
           <td>
              <img src="names.jpg">
           </td>
           <td>
              <img src="ages.jpg">
           </td>
        </tr>
        <tr>
           <td>
              Sven Groot
           </td>
           <td>
              25
           </td>
        </tr>
        <tr>
           <td>
              Jonathan Sampson
           </td>
           <td>
              23
           </td>
        </tr>
    </table>


    This is tabular data, but still demonstrates my point.

  • Rowan

    You could always try using background images, eg:

    td.name {
        background-image: url(images/name.gif);
        background-repeat: no-repeat;
        width: 100px;
        height: 25px;
    }
    td.age {
        background-image: url(images/age.gif);
        background-repeat: no-repeat;
        width: 80px;
    }
    ...
    <td class="name">
        &nbsp;
    </td>

    <td class="age">
        &nbsp;
    </td>
    ...

  • jsampsonPC

    Yup; I could..but if StyleSheets are disabled, then the titles no longer display.

    I'm fully aware that there are ways to get around this problem; but what I'm trying to demonstrate is that in order for developers to get the results they want, they have to write little gimmick scripts to get by.

    This is a minor bug, but one that I face more than I would like to. All of the browsers have these problems, this is just one with IE that is annoying me Smiley

  • Rowan

    jsampsonPC wrote:
    Yup; I could..but if StyleSheets are disabled, then the titles no longer display.

    I'm fully aware that there are ways to get around this problem; but what I'm trying to demonstrate is that in order for developers to get the results they want, they have to write little gimmick scripts to get by.

    This is a minor bug, but one that I face more than I would like to. All of the browsers have these problems, this is just one with IE that is annoying me


    You have no idea how hard it can get, 'other' browsers are mostly fine, it's the other one that causes all the pain.

    I highly doubt the IE team will give this bug much consideration, they won't even fix many of the big bugs.

  • jsampsonPC

    We need to just make every major browser's development team a copy of the w3c suggested standards everyday for the rest of the year, or until they decide to comply Smiley

  • AdamKinney

    You should change the name to "whitespace rendering sucks" because it does.  Just last night I ran into the issue this:

    <img src="a.gif" alt="" />
    <img src="b.gif" alt="" />

    caused the images to have a space between them and in order to make them flush I had to change it to this:

    <img src="a.gif" alt="" /><img src="b.gif" alt="" />

    There's no seperation of layout/style and content there.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.