Coffeehouse Thread

35 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

IE White-space rendering sucks...

Back to Forum: Coffeehouse
  • User profile image
    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

  • User profile image
    gregoryw

    You can provide IE feedback via:

    https://connect.microsoft.com/IE

  • User profile image
    sbc

    You could do this:

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

  • User profile image
    ZippyV

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

  • User profile image
    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

  • User profile image
    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.

  • User profile image
    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.

  • User profile image
    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.

  • User profile image
    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

  • User profile image
    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.

  • User profile image
    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

  • User profile image
    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).

  • User profile image
    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.

  • User profile image
    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>
    ...

  • User profile image
    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

  • User profile image
    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.

  • User profile image
    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

  • User profile image
    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.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.