Current validation standards and backwards compatibility.

[Robbo - W3C Rocks!]

Is there a diagnostic tool that will highlight issues of backwards
compatibility, especially regarding page layout?

I aim to work in standards-based XHTML and test the sites using
current versions of Firefox and IE.

The page layouts look OK to me (not being a professional graphic
designer!) but every so often I look at them through an older browser
and sometimes the layout appears quite different, sometimes seriously
affecting usability.

[webado]

I don't think older versions of Firefox will show different from the
current one.
But there are some differences between IE7 and IE6.

Generally pages that are valid html and css (no warnings either
ideally) look OK in IE7 will also look OK in FF, and probably quite
close except for minor variations.

But you may find they don't look the same and not even OK in IE6. You
can use a standalone verison of IE6 to test:
from browsers.evolt.org/download.php?/ie/32bit/standalone/
ie6eolas_nt.zip

There may be issues with conditional statements in this standalone
IE6. Never used them myself so can't say.

As for intrinsic differences between IE7 and FF they typically involve
css default values of padding, margin, font sizes and things like that
which we may tend to leave out. Once everything is defined you
shuldn't be seeing any real differences any more.


One major difference is related to inner padding of one container div
vs outer margins of the contained div, especially as it relates to the
width of the contained div . While it may seem to be the same thing
and I think FF treats them the same or nearly, in IE7 (and FAIK in
IE6) this will cause layout trouble.

Say you have:

<div style="padding: 0; margin:0;>
<div style="width: 100%; padding: 0; margin:10px;">
some content here
</div>
</div>

This may not work out properly But try this instead:

<div style="padding: 10px; margin:0;>
<div style="width: 100%; margin:0;">
some content here
</div>
</div>

Predictably I do not recall which one is good and which one is bad and
where. I know it what I see it and the effects, then I switch to the
other one or a variation.

Sorry I can't be more definite on this, I've been meaning to document
thsi kind of stuff so I cna refer to it, but it's always on the back
burner.


There are some articles that talk about resetting css defaults to wipe
out most browser differences:
http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
http://tantek.com/log/2004/09.html#d06t2354

Might be others as well. I end up using a variation of this most of
the time when I run into layout trouble.


On Mar 12, 8:19 am, "Robbo - W3C Rocks!"

[Robbo - W3C Rocks!]

Webado

Thanks. That's very helpful.

Your comments and the articles you linked to made very intriguing
reading.

Vince

[webado]

You're welcome Vince.

Let me know if you find they helped. I am still to digest them fully.
I've been bumbling about mostly doing something like this, but based
on my own desductions. I ought to dig into this more seriously and set
up a good foundation for any future development. Typiclaly i start
somethign withotu worrying about this stuff and halfway through I
realize I need all the toothpicks ;)

On Mar 12, 2:14 pm, "Robbo - W3C Rocks!"