#297539 - 24/04/2007 17:42
HTML, UL, LI, and BR ?
|
carpal tunnel
Registered: 20/12/1999
Posts: 31596
Loc: Seattle, WA
|
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?
|
Top
|
|
|
|
#297540 - 24/04/2007 17:49
Re: HTML, UL, LI, and BR ?
[Re: tfabris]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31596
Loc: Seattle, WA
|
In a more general sense: Is there a collected list of these kinds of differences somewhere?
|
Top
|
|
|
|
#297541 - 24/04/2007 18:08
Re: HTML, UL, LI, and BR ?
[Re: tfabris]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
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 />
|
Top
|
|
|
|
#297542 - 24/04/2007 18:27
Re: HTML, UL, LI, and BR ?
[Re: cushman]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31596
Loc: Seattle, WA
|
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.
|
Top
|
|
|
|
#297543 - 24/04/2007 18:48
Re: HTML, UL, LI, and BR ?
[Re: tfabris]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Quote: 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.
<br /> Is not consistent across browsers, either.
IE7 joins the rest of the browser crowd (Mozilla, Opera, Safari) with better standards complience. Moving forward you will have fewer differences than with IE6. The way to do things today is to use a stylesheet to describe how to present the data represented in the HTML and let the browser do it's job to lay out the page. Relying on line breaks and tricks to try to make each page look the same clutters your content, creates unneeded markup and is harder to maintain.
|
Top
|
|
|
|
#297544 - 24/04/2007 19:01
Re: HTML, UL, LI, and BR ?
[Re: cushman]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
<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.
|
Top
|
|
|
|
#297545 - 24/04/2007 19:40
Re: HTML, UL, LI, and BR ?
[Re: cushman]
|
carpal tunnel
Registered: 12/11/2001
Posts: 7738
Loc: Toronto, CANADA
|
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.
|
Top
|
|
|
|
#297546 - 24/04/2007 20:04
Re: HTML, UL, LI, and BR ?
[Re: cushman]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31596
Loc: Seattle, WA
|
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.
|
Top
|
|
|
|
#297547 - 24/04/2007 20:06
Re: HTML, UL, LI, and BR ?
[Re: tfabris]
|
carpal tunnel
Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
|
Quote: I just want a consistent number of carriage returns. What is the correct HTML for that?
HTML is not a typewriter.
However, you might be able to use: Code:
<li style="margin: 0.5em 0em 0.5em 0em;">
Edited by wfaulk (24/04/2007 20:08)
_________________________
Bitt Faulk
|
Top
|
|
|
|
#297548 - 24/04/2007 23:29
Re: HTML, UL, LI, and BR ?
[Re: tfabris]
|
veteran
Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
|
Quote: 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?
Like Bitt said, you can use inline styles. Any element can contain a style attribute, and it overrides the stylesheet. You can control line height with the line-height style, but don't confuse line-height with margins around a list item. line-height will control the height between lines in the same list item (if you have several lines of text within a <li>), margin, border and padding control the block element's (in this case, the li) spacing.
To see a good demo of the box model for block elements (almost anything in HTML is a block element, a <div> a <table> a <li>), see this page. In your case, you probably just want to add space at the bottom of each list item. Use margin-bottom for that, or the margin shorthand like I have above:
margin: top right bottom left;
To set only the bottom height to be 2 times the size of the current font, use either:
margin-bottom: 2em;
or
margin: 0em 0em 2em 0em;
The shortcut makes it easy to tweak margins later, you won't have to add margin-top, margin-left, etc. I suggest taking a look at CSS Basics, it's a good reference.
|
Top
|
|
|
|
#297549 - 25/04/2007 00:44
Re: HTML, UL, LI, and BR ?
[Re: cushman]
|
carpal tunnel
Registered: 12/11/2001
Posts: 7738
Loc: Toronto, CANADA
|
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.
|
Top
|
|
|
|
|
|