If I do a page with:

Blah Blah Blah some paragraph text blah blah blah (BR) (BR)
(UL)
(LI) some item (BR)(BR) (/LI)
(LI) some item (BR)(BR) (/LI)
(/UL)
Blah Blah Blah some paragraph text blah blah blah (BR) (BR)

It renders differently in IE than it does in any of the mozilla variants. The number of carriage returns is different. I think I get a similar kind of issue when I use (BR) in combination with (BLOCKQUOTE).

It's been like this for as long as I can remember. How does one work around that discrepancy so that both browsers render it the same?

In a more general sense: Is there a collected list of these kinds of differences somewhere?

Why not use styles to control line-spacing or li height instead of using <br>?

li { margin-bottom: 0.5em }

or whatever. Ideally your page should read:

<p>Blah Blah Blah some paragraph text blah blah blah</p>
<ul>
<li>some item</li>
<li>some item</li>
</ul>
<p>Blah Blah Blah some paragraph text blah blah blah</p>

And if you must use the <br> tag, it should be closed: <br />

I'm afraid to do that because of all the places I've heard that there are line height and font size/spacing differences between IE and other browsers.

<style>
li { margin: 0.5em 0em 0.5em 0em; }
</style>

<p>Blah Blah Blah some paragraph text blah blah blah</p>
<ul>
<li>some item</li>
<li>some item</li>
</ul>
<p>Blah Blah Blah some paragraph text blah blah blah</p>

This HTML will get you want you want, increase the margins for more spacing in the list items. Works fine in IE6 and Mozilla.

Now if only we could get rid of the problems with Mozilla. It has its own set of CSS problems - some of which actually work fine in IE 6 (and Safari/WebKit). But don't get me started on Opera. I don't know how well its cutting edge betas are doing, but previous versions always had some issues. Not the least of which was pretending to be IE. Opera is about as far from being a recommended browser as IE 6 in my books.

In any case, IE inserts extra space in places most other browsers do not. I'm not certain this is breaking any spec, it may be something that's simply undefined. This happens on normal pragraphs and other elements as well (going from memory here).

If you're not using CSS then you might as well give up on trying to match the layouts so closely between different browsers. You should also avoid using BR for anything but to force a new line - don't use it for spacing. If you want space, start a new paragraph.

Once you start heavily using/relying on CSS you'll almost stop caring about the contents on the actual markup part of the layout.

Okay, let's say I have to insert my list of items into someone else's document that already has a style defined that controls the line heights. I just want a consistent number of carriage returns. What is the correct HTML for that?

Also: Regarding the IE7 improvements: The problem I am talking about is consistent across all versions of IE and Netscape/mozilla/firefox variants, including IE7, 6, 5, whatever.

What's not very clear from Jon's 3D box model is that the border exists around (outside) the padding and background image/colour. As far as I recall it also does not overlap the margin.

Stacking order is another thing IE screws up unfortunately. Borders overlap content in IE - which can normally only be seen if you style to force the content to shift over onto a border. I had a really slick rounded rectangle header tab style created using the left border property - until I discovered it didn't work in IE and had to resort to something not slick at all.

Any hope the W3C will completely redo the currently non-sensical box model with regards to width and height properties? Probably not, but one can always hope.