jsampsonPC
SampsonBlog.com SampsonVideos.com

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
GW R/Me

You could do this:

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

ZippyV
Fired Up

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

jsampsonPC
SampsonBlog.com SampsonVideos.com

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
Fired Up

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
SampsonBlog.com SampsonVideos.com

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
Fired Up

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
SampsonBlog.com SampsonVideos.com

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
Look, no errors.

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
SampsonBlog.com SampsonVideos.com

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
My name has 9 letters. Coincidence? I think not...

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
SampsonBlog.com SampsonVideos.com

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
Look, no errors.

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">
     
</td>

<td class="age">
     
</td>
...

jsampsonPC
SampsonBlog.com SampsonVideos.com

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
Look, no errors.

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
SampsonBlog.com SampsonVideos.com

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
Agent of Change

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.

jsampsonPC
SampsonBlog.com SampsonVideos.com

Very true; am I able to change the thread title? If so, I will. Is it safe for a microsoft employee to be discussing this on a microsoft site? Pertaining to a microsoft application?

W3bbo
The Master of Baiters

AdamKinney wrote:
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.

That's because, at heart, Trident is still a HTML renderer rather than an XML renderer, so it treats whitespace differently (as if it were SGML)

...have you tried editing the whitespace:; property for the parent element?

jsampsonPC
SampsonBlog.com SampsonVideos.com

Hmm, I'll checkout the white-space property when I get home...but to be honest, I have never used it before - could it be the answer to all of my problems? Smiley

bah-da-da-dum! We'll see after I return from lunch.

*clocks out*

mVPstar
I'm white because I smelt an onion.

jsampsonPC wrote:
Very true; am I able to change the thread title?

Did you edit the subject field of the original post?

jamie

jsampsonPC wrote:
Very true; am I able to change the thread title? If so, I will. Is it safe for a microsoft employee to be discussing this on a microsoft site? Pertaining to a microsoft application?

just click edit on the first post and change the title

edit: mvpstar beat me too it. but its changed from here now