To the gurus out there - a conundrum.

[rathernots]

Hi! I can't believe this simple issue hasn't been raised before:

Create a new html document, in the body, type:

<p>TEST1<br><br></p>TEST2

IE will create a small amount of white space between the two lines,
while gecko will place quite a lot more.

Question: how can this be controled via CSS? I tried and tried and
eventually gave up.

TIA!

 

[josh]

Hi! I can't believe this simple issue hasn't been raised before:

Create a new html document, in the body, type:

<p>TEST1<br><br></p>TEST2

IE will create a small amount of white space between the two lines,
while gecko will place quite a lot more.

Question: how can this be controled via CSS? I tried and tried and
eventually gave up.

TIA!

Try zeroing the margin and padding
p {
margin: 0;
padding: 0;
}

 

[Jim Moe]

Create a new html document, in the body, type:

<p>TEST1<br><br></p>TEST2

IE will create a small amount of white space between the two lines,
while gecko will place quite a lot more.

Your test case is too vague. Which DTD did you use? Both correctness and
default spacing change depending on the DTD.

 

[rathernots]

Try zeroing the margin and padding

p {
margin: 0;
padding: 0;
}

Sadly that wouldn't work, as this is part of a page that has regular
paragraphs and zeroing those two make them look concacenated together.

 

[rathernots]

Your test case is too vague. Which DTD did you use? Both correctness and

default spacing change depending on the DTD.

I'm using xHTML 1.0 transitional.

 

[Jukka K. Korpela]

Hi! I can't believe this simple issue hasn't been raised before:

As a rule of thumb, especially when you wish to get answers from gurus, get
to the point as early as possible. If neither the Subject line nor the first
sentence says the least of what the &mildcurse; you are talking about, the
odds are that the gurus won't even read your question.

Create a new html document, in the body, type:

<p>TEST1<br><br></p>TEST2

Why? A <p> element is a block element (and tends to have default top and
bottom margins, by browser defaults), so what's the point of saying "line
break!" at the end of a paragraph? And saying it _twice_? How many times can
you break a line? The only thing you will really achieve that way is an
experiment on browsers' behavior with this illogical markup, including some
odd behaviors like treating <br><br> as implying one or two empty lines.

Besides, TEST2 appears to be "loose" text - text not wrapped in any
block-level container. That's valid in HTML 4.01 Transitional but not good
style and not valid in HTML 4.01 Strict.

IE will create a small amount of white space between the two lines,
while gecko will place quite a lot more.

Perhaps. So what?

Question: how can this be controled via CSS?

Not really. CSS is not for control. And I don't mean just control freaks.

The answer to the question that you probably _should_ have asked is this:
add class attributes and remove the <br> tags to get

<p class="foo">TEST1</p>
<p class="bar">TEST2</p>

(Naturally, you should replace foo and bar with some meaningful names,
depending on the role of the paragraphs.)

Then you can say in CSS:

p.foo { margin-bottom: 0; padding-bottom: 0; }
p.bar { margin-top: 0; padding-top: 0; }

if you want _no_ vertical spacing between the two paragraphs. If you want
some specific spacing, set exactly one of those properties to that value and
set the others to zero as above.

 

[jojo]

I'm using xHTML 1.0 transitional.

Hard to say because you just posted a snippet, but is "test2" outside
every block-element? ASFAIK it is not allowed to have a TEXT-node as
child element of the body. Wrap it in another <p> to get valid XHTML first.

 

[Neredbojias]

To further the education of mankind, (e-mail address removed) vouchsafed:

Hi! I can't believe this simple issue hasn't been raised before:

Create a new html document, in the body, type:

<p>TEST1<br><br></p>TEST2

IE will create a small amount of white space between the two lines,
while gecko will place quite a lot more.

Browsers are under no real constraints to render things the same as other
browsers, ala the w3c.

Question: how can this be controled via CSS? I tried and tried and
eventually gave up.

Use browser-specific css. Not recommended, of course, but it _is_ a
method.

 

[jojo]

Sadly that wouldn't work, as this is part of a page that has regular
paragraphs and zeroing those two make them look concacenated together.

Than add a class to those paragraphs which should have no margin/padding.

The CSS:

p.noSpace {
margin: 0px;
padding: 0px;
}

And your HTML-snippet:
<p class="noSpace">TEST1<br><br></p>
<p class="noSpace">TEST2</p>

BTW: ASFAIK you have to specify a unit (like px, em or %) in CSS, so you
cannot set the margin/padding to "0" but to "0px".

 

[Jukka K. Korpela]

BTW: ASFAIK you have to specify a unit (like px, em or %) in CSS,

That's generally true, and important. If you say margin: 5, browsers
_should_ ignore the rule, by CSS specs. Some browsers in some states treat
it as margin: 5px, but this just adds to the confusion. So use units, Luke!

so you cannot set the margin/padding to "0" but to "0px".

Actually you can. Zero is an exception: the unit can be omitted. That's
logical, since the unit doesn't really matter when the number is exactly
zero.

 

[Jukka K. Korpela]

Hard to say because you just posted a snippet, but is "test2" outside
every block-element? ASFAIK it is not allowed to have a TEXT-node as
child element of the body.

With Transitional doctypes, it _is_ allowed. It's not recommendable, but
allowed.

There's normally no reason to use "loose" text, i.e. text not wrapped in a
block-level container. If it's a paragraph, make it a <p> element. If some
other block level element applies, logically, use it. If there is no
suitable semantic markup, use <div>, which means just a block level wrapper.
You can then use a Strict doctype in order to test, using a validator, that
you have really followed all the Strict rules.

 

[jojo]

That's generally true, and important. If you say margin: 5, browsers
_should_ ignore the rule, by CSS specs. Some browsers in some states
treat it as margin: 5px, but this just adds to the confusion. So use
units, Luke!


Actually you can. Zero is an exception: the unit can be omitted. That's
logical, since the unit doesn't really matter when the number is exactly
zero.

You really can? Thanks, I didn't know this before! Yes, of course it
doesn't matter which unit I use, but I've always thought that I have to
use any. Hope I remember this when I need to set some value 'zero' in
future...

jojo

 

[rf]

Jukka K. Korpela wrote:

You really can? Thanks, I didn't know this before!

You should really go over to http://www.w3.org/TR/CSS21/ and read the entire
spec. Little gems like this pop up all over their site.

Cheers
Richard.

 

[jojo]

There's normally no reason to use "loose" text, i.e. text not wrapped in
a block-level container. If it's a paragraph, make it a <p> element. If
some other block level element applies, logically, use it. If there is
no suitable semantic markup, use <div>, which means just a block level
wrapper. You can then use a Strict doctype in order to test, using a
validator, that you have really followed all the Strict rules.

I personally always try to follow the STRICT rules (but not XHTML, I use
HTML 4.01), so I do not know all of the many "don't do"s allowed in
TRANSITIONAL. I really would try to avoid "loose" text in (X)HTML, there
really is no point not to wrap it somewhere.

 

[rathernots]

Thank you for all the replies - I guess it's not possible to make both
browsers render that specific code the same, then.

For those who wonder why I'd want to write such poor markup, well, it's
because I'm not actually writing the said code - I provide my users
with a WYSIWYG editor and my application backend pushes the generated
content inside an xHTML-strict validated layout.

 

[Jim Moe]

Thank you for all the replies - I guess it's not possible to make both
browsers render that specific code the same, then.

Yes, it is possible. And straightforward to do. You must specify all the
spacing with CSS. Do not use <br>; use code like Jukka listed.
If you mean, "Use the code exactly as I showed it in my post" then, yes,
each browser will render it differently. That is misusing HTML to do
presentation rather than markup.

 

[dorayme]

Hope I remember this when I need to set some value 'zero' in
future...

Why? What does it matter if you don't?

 

[Andy Mabbett]

I'm using xHTML 1.0 transitional.

Why?

 

[jojo]

Why? What does it matter if you don't?

It doesn't matter, it just looks nicer that way ;-)

 

[dorayme]

It doesn't matter, it just looks nicer that way ;-)

Ah yes... I can relate to that. OK jojo, what about this:

You are typing away and making with the compact form of padding:

padding: 2px 0 2px 5px;

And then you think... maybe I should put 0px here to make it look
nice and balanced or for the practical reason that maybe I will
change my mind later and put a positive number instead, the px is
already there and waiting for me... perhaps even the latter
practical reason informs one's aesthetics?