Inconsistent Display in Different Browsers

[Doug Mazzacua]

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.

Does anyone know of a reference that catalogs all of the known types
of differences in display between browsers? Or do you all just do
multiple tests of all your pages?

Thanks in advance for any advice.
_______________ _______________ ___________

Center For Practical Self Defense
Riverside, California
www.centerforpracticalselfdefense.com

[David Ross]

Doug Mazzacua wrote:

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.

Does anyone know of a reference that catalogs all of the known types
of differences in display between browsers? Or do you all just do
multiple tests of all your pages?

Thanks in advance for any advice.

I generally test first by viewing my page with Mozilla Suite and
then validating it with the W3C tools:
<http://validator.w3.or g/> for HTML
<http://jigsaw.w3.org/css-validator/> for CSS
Thus, I verify that both the design and syntax of the page are
correct.

I tried using <br> within list items. With Mozilla, the page
appears as I would expect. Since the HTML and CSS validate without
errors, I must assume that any anomalous appearance with another
browser is a problem with that browser.

--

David E. Ross
<http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.

[kchayka]

Doug Mazzacua wrote:

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.

What are the line breaks doing there in the first place? If they are for
presentation purposes, you should use margin-bottom on the li element
instead. Besides being The Right Thing to do, results will likely be
more consistent across browsers.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Andy Dingley]

On Wed, 07 Dec 2005 19:06:28 -0800, Doug Mazzacua <d_*****@surfbe st.net>
wrote:

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.
This isn't valid HTML, so don't do it.

It's hard enough keeping _valid_ HTML consistent, so if you start coding
invalid stuff, then it really becomes impossible. You're relying on one
browser's particular handling of an undocumented error condition, so
there's no reason at all why another browser should look anything like
it.

For the concept of "validity", then search back in this newsgroup. Also
investigate using on-line validators like http://validator.w3.org and
begin learning to understand what a HTML DTD is.

As to your specific example, then learn a little CSS and look at the
margin properties.
Does anyone know of a reference that catalogs all of the known types
of differences in display between browsers?
Not really practical to do. There are sites that list the major problems
and obvious errors in a particular browser, but the problem space of
"compare every browser for every situation" is just too large to ever
quantify the variations in. Try searching for "browser CSS error" and
"box model" just for starters.

As an example, the rendering of a simple web page varies between IE and
Firefox depending not only on the screen size, but on the default font
size selected by the windows desktop (the "Large Fonts" setting). This
is a clear bug in IE (it incorrectly applies a scaling twice, so "small
fonts" actually become larger) but it's so removed from "the web tools"
that a website has no _possible_ control over it. You can't "fix" this,
but you can certainly waste a lot of effort trying to.

Or do you all just do
multiple tests of all your pages?

Doing single tests is good. Doing multiple tests is impossible. You
have to do single tests against the _standard_, because it's objective
(if not always entirely helpful). Testing against all the possible
combinations of browser-specific behaviour is just too open-ended to be
practical.

I recently had a realistically 3 month project and a 2 month timescale
to do it in. It took me 3 months in total to get the client happy with
it, the last month of over-run being almost entirely taken up with
chasing after trivial browsers inconsistencies . This cost them 50% on
their costs and made a site that was actually _less_ good than it had
been a month earlier. However certain things were now more accurately
aligned on different browsers, even though no-one was ever going to look
at it on two browsers side-by-side. If you go down this route of "It
must look identical everywhere" then you'll find that it's expensive,
pointless and even harmful.

[David Ross]

Andy Dingley wrote [in part]:

On Wed, 07 Dec 2005 19:06:28 -0800, Doug Mazzacua <d_*****@surfbe st.net>
wrote:

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.

This isn't valid HTML, so don't do it.

A test page with <br> breaks within the text following an <li> tag
passed validation as HTML 4.01 transitional at
<http://validator.w3.or g/>.

--

David E. Ross
<http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.

[Andy Dingley]

On Thu, 08 Dec 2005 15:45:56 -0800, David Ross <no****@nowhere .not>
wrote:

>I noticed that that <ul> lists display differently with <br> between
><li>s in IE and Mozilla.

This isn't valid HTML, so don't do it.

A test page with <br> breaks within the text following an <li> tag
passed validation as HTML 4.01 transitional at
<http://validator.w3.or g/>.

This is why it's helpful if the original poster includes a URL !
This is invalid HTML
<ul>
<li>Foo</li>
<br>
<li>Bar</li>
</ul>

This (as I think you tested) is valid HTML
<ul>
<li>Foo
<br>
<li>Bar
</ul>

It's actually equivalent (when parsed) to the following.
<ul>
<li>Foo
<br></li>
<li>Bar</li>
</ul>
Which I think you'll see is _not_ the same as the 1st example.

Now I can't know what the OP was actually using. But I strongly suspect
they've been using the 1st invalid case, because that's the one I'd most
expect to show up browser variations.

[Alan J. Flavell]

On Thu, 8 Dec 2005, David Ross wrote:

Andy Dingley wrote [in part]:

On Wed, 07 Dec 2005 19:06:28 -0800, Doug Mazzacua <d_*****@surfbe st.net>
wrote:

I noticed that that <ul> lists display differently with <br> between
<li>s in IE and Mozilla.

This isn't valid HTML, so don't do it.

A test page with <br> breaks within the text following an <li> tag

Of course. Re-read the above - it says "between" li, not within. So
you changed the topic, and threw no new light on the original problem,
whatever it might have really been. Needless to say, the original
poster should have offered the URL of some specimen page to illustrate
their question - bonus points for saying what they were hoping to
achieve, and what actually happened in the browser they tried.

To the O.P, I would have to say that different renderings in different
browsers is something which comes with the territory - it's a feature
of the web. But there are ways of helping to get reasonably
consistent rendering in the usual graphical browser situation, and I'd
say the most widely-applicable rule to apply across the board (with
only minuscule exceptions) is to conform to applicable interworking
rules.

Over and above that: when lists are involved, the stylesheet should
not try to set isolated values for border-left and/or margin-left on
ul, ol, li. If any of those properties is specified, then all of them
should be. The reason, obviously, is that different browsers use
different defaults, even when the end result looks much the same.

<br> as a means of inserting vertical white space should basically
never be used nowadays (if it ever should have been used for that
purpose, which I might dispute). The defined purpose for <br> is to
break a line - nothing more. Use it that way, or don't use it at all.