IE White-space rendering sucks...

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?

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?

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? bah-da-da-dum! We'll see after I return from lunch.

*clocks out*

jsampsonPC wrote:

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

Did you edit the subject field of the original post?

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

Are you using quirks mode or strict mode?

BruceMorgan wrote:

Are you using quirks mode or strict mode?

Are you refering to CSS? This isn't a CSS issue from what I understand - but I could be wrong.

jsampsonPC wrote:



BruceMorgan wrote: Are you using quirks mode or strict mode?

Are you refering to CSS? This isn't a CSS issue from what I understand - but I could be wrong.

Quirks mode vs. strict mode mainly affects CSS but also a few other things so it's definitely important to know. In case you didn't know, which mode is used depends on the DOCTYPE present in the HTML file. A HTML4.01 DOCTYPE (with both the public and system identifiers present) or higher (or an unknown DOCTYPE) will cause it to use strict mode. No DOCTYPE or an older one will cause it to use quirks mode.

An easy way to find out is to put the following script in your page:
<script type="text/javascript">
   alert(document.compatMode);
</script>

This'll prompt either "BackCompat" (quirks mode) or "CSS1Compat" (strict mode).

The page is in strict mode according to the Doctype.

jsampsonPC said:

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? bah-da-da-dum! We'll see after I return from lunch.

*clocks out*

Hi, I have been searching all over for a discussion/resolution on this.  I realize this is an older post, but have you found a way to solve this rendering without having to put all of your images on the same line of code in the editor?  Thanks

ScottWFB said:

jsampsonPC said:

*snip*

Hi, I have been searching all over for a discussion/resolution on this.  I realize this is an older post, but have you found a way to solve this rendering without having to put all of your images on the same line of code in the editor?  Thanks

display: block usually works.. but if not, use floating.. its not just an IE thing either..

stevo_ said:

ScottWFB said:

*snip*

display: block usually works.. but if not, use floating.. its not just an IE thing either..

I don't recall ever experiencing this issue with anything but IE.

@ ScottWFB, no, I've found no solution. I haven't really noticed it lately though in IE7 - but that doesn't mean it won't creep up on me sometime in the future.

jsampsonPC said:

stevo_ said:

*snip*

I don't recall ever experiencing this issue with anything but IE.

@ ScottWFB, no, I've found no solution. I haven't really noticed it lately though in IE7 - but that doesn't mean it won't creep up on me sometime in the future.

Firefox and IE do this with lists.. ie puts spaces in everything.. but firefox tends to put spaces above the list items.. you tend to only notice it when using lists to do horizontal menus.. floating always fixes the problem anyway.

Yepp..

But hm... unless you need to use IE6, perhaps it is time to ditch the TABLE. The road was very hard for me, but I am very happy that I did ditch the TABLE now, no more mess! =)

turrican said:

Yepp..

But hm... unless you need to use IE6, perhaps it is time to ditch the TABLE. The road was very hard for me, but I am very happy that I did ditch the TABLE now, no more mess! =)

Turrican,

I don't do table-based layouts if that is what you're suggesting. I'm strictly div-based with a strict doctype exclusive. The table in this thread (now 2 years ago) was for representing tabular data.

Jonathan

Flashback: 9 years ago when the battle was between IE and Netscape 4 we, Classic ASP developers using early stages of XML, had to make sure all closing "td" tags where at the end of each line or there would be carriage returns in Netscape.
This caused table layouts, like rounded corners, to fail in Netscape.

stevo_ said:

ScottWFB said:

*snip*

display: block usually works.. but if not, use floating.. its not just an IE thing either..

There's another method that works well for images - img { vertical-align: top; }