Stylesheets - "Display:block" with newline before but not after : how-to ?

Author

"Display:block" with newline before but not after : how-to ?

Yohan N. Leder

2007-06-30, 6:17 am

Hello. Is there a way to have block style with the extra newline at the
end ?

I have a form with a field hint like below. And, as you can see, when
hint is displayed there's a ugly line added before next field (here,
"Message" label).

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {text-decoration: none;}
a:hover {background: none;}
a span {display: none;}
a:hover span {display: block;}
</style>
</head>
<body>
<form action="http://..." method="post">
<h2>Form</h2>
Name :<br><input type="text" name="name" size="40" maxlength="256"><br>
<br>
Identifier # 2 :<br><input type="text" name="identifier" size="40"
maxlength="256"> <a href="#"><br>Help ?<span style="width: 300px; color:
#000000; text-decoration: none">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse semper lacinia mauris. Nam vitae leo. Sed
ac enim a justo interdum porttitor. Aliquam sed magna eu dui ultrices
rhoncus. Pellentesque massa est, aliquet nec, aliquet nec, sollicitudin
eu, magna. Curabitur porta odio vitae pede. Pellentesque sed dui id
ipsum tempor pellentesque. Duis tempor, nulla et tincidunt placerat,
nulla enim convallis magna, vitae ultrices ligula lorem in ipsum.
Pellentesque massa mi, hendrerit in, scelerisque eu, cursus vel, ante.
Praesent pellentesque tempus est. Praesent laoreet adipiscing nisi. In
consequat tempor turpis. Nam pulvinar. Morbi consectetuer odio ut
ligula. Ut nec mi in nunc hendrerit accumsan. Aliquam malesuada.</span>
</a><br>
<br>
Message :<br>
<textarea name="message" cols="30" rows="5"></textarea><br>
<br>
<input type="submit" value="Submit">
</form>
</body></html>

Yohan N. Leder

2007-06-30, 6:17 am

In article <MPG.20f0467eac2ee5d598993c@news.tiscali.fr>,
ynleder@nspark.org says...
> Is there a way to have block style with the extra newline at the
> end ?
>
>

Not "WITH", but "WITHOUT", I've made a mistake.

So, my question is :

Is there a way to have block style *without* the extra newline at the
end ?

John Hosking

2007-06-30, 6:17 pm

Yohan N. Leder wrote:
> Hello. Is there a way to have block style [without] the extra newline
> at the end ?

I suspect you don't really mean a newline, but rather a spacing of about
one line.

>
> I have a form with a field hint like below. And, as you can see, when
> hint is displayed there's a ugly line added before next field (here,
> "Message" label).
>

A URL would have been so much better than pasting code. (It would have
made the "as you can see" more immediately true.)

> <html><head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <style type="text/css">
> a {text-decoration: none;}
> a:hover {background: none;}
> a span {display: none;}
> a:hover span {display: block;}

Try a:hover span {display: block; margin-bottom:0;}

> Identifier # 2 :<br><input type="text" name="identifier" size="40"
> maxlength="256"> <a href="#"><br>Help ?<span style="width: 300px; color:
> #000000; text-decoration: none">Lorem ipsum dolor sit amet, consectetuer
....
> ligula. Ut nec mi in nunc hendrerit accumsan. Aliquam malesuada.</span>
> </a><br>
> <br>

So you'll still see the spacing of about two lines after the help (Lorem
ipsum, etc.) when it's showing and after the "Help?" when it's not.

I think your markup could be improved a bit. Two line-breaks in a row is
a warning sign (to me) that the coder isn't paying attention. Rationale:
How can you break a line *twice* at the same spot? Consider reworking
your code to use margins instead of <br> elements.

HTH

--
John

Yohan N. Leder

2007-06-30, 6:17 pm

In article <46865940$1_5@news.bluewin.ch>,
John@DELETE.Hosking.name.INVALID says...
> I suspect you don't really mean a newline, but rather a spacing of about
> one line.
>

Yes it is.

> A URL would have been so much better than pasting code. (It would have
> made the "as you can see" more immediately true.)

I haven't any url because it's a form which will be generated by a CGI,
when the CGI will be written :)

>
> Try a:hover span {display: block; margin-bottom:0;}
>
>

It remains the same.

> ...
>
> So you'll still see the spacing of about two lines after the help (Lorem
> ipsum, etc.) when it's showing and after the "Help?" when it's not.
>

The spacing is of one line when the gint is not displayed and of two
lines when it is displayed : so it's the <span> whioch add the extra
empty line or equivalent vertical margin... But the margin attribute
doesn't seems to change anything, why ?

> I think your markup could be improved a bit. Two line-breaks in a row is
> a warning sign (to me) that the coder isn't paying attention. Rationale:
> How can you break a line *twice* at the same spot? Consider reworking
> your code to use margins instead of <br> elements.

The first <br> is to go just below the field and the second one to
materialize a visible empty line.

Ben C

2007-07-01, 6:18 pm

On 2007-06-30, Yohan N Leder <ynleder@nspark.org> wrote:
> In article <46865940$1_5@news.bluewin.ch>,
[...]
> The spacing is of one line when the gint is not displayed and of two
> lines when it is displayed : so it's the <span> whioch add the extra
> empty line or equivalent vertical margin... But the margin attribute
> doesn't seems to change anything, why ?

You've got <a><br>Help?</a><br><br>Message without the block displayed.
The first <br> after Help? breaks that line. The second <br> leaves a
blank line (in most browsers). Then the word "Message" appears on the
next line. So a gap of about one line.

When the "gint" is displayed, you've got

<a><br>Help?<span display:block></span></a><br><br>Message

Because the span is display:block, it breaks the line after Help?
anyway. Then you've got two more <br>s until Message, which is why the
gap gets bigger.

Moral of the story: don't use repeated <br>s to make vertical gaps. Use
margins instead.

Why not put Message in its own block box? So change your markup to this:

<a><br>Help?
<div id="message">
Message<br>
<textarea></textarea>
</div>

No <br>s after Help? and none after </textarea>. Then you can add

#message { margin-top: 1em; }

to the styles.

Yohan N. Leder

2007-07-01, 10:16 pm

In article <slrnf8fieg.tub.spamspam@bowser.marioworld>,
spamspam@spam.eggs says...
> <a><br>Help?
> <div id="message">
> Message<br>
> <textarea></textarea>
> </div>
>
> No <br>s after Help? and none after </textarea>. Then you can add
>
> #message { margin-top: 1em; }
>

Thanks a lot, Ben. It's very obvious said like this, but I, then, I have
another problem :

As I said, the CGI script has to generate this form which *must* be
compatible to all browsers, the ones accepting DHTML/CSS/Javascript and
the others accepting simple HTML only.

So, this "field hint feature" (which use DHTML/CSS) is just an option
that owner can activate or not, knowing the notice will tell him it will
be visible by some browsers only.

So, the double <br> is just because I cannot use <div>, <span>, ect for
the form, except for what is about hint.

Knowing this, how to do ?

Ben C

2007-07-01, 10:16 pm

On 2007-07-01, Yohan N Leder <ynleder@nspark.org> wrote:
> In article <slrnf8fieg.tub.spamspam@bowser.marioworld>,
> spamspam@spam.eggs says...
>
> Thanks a lot, Ben. It's very obvious said like this, but I, then, I have
> another problem :
>
> As I said, the CGI script has to generate this form which *must* be
> compatible to all browsers, the ones accepting DHTML/CSS/Javascript and
> the others accepting simple HTML only.
>
> So, this "field hint feature" (which use DHTML/CSS) is just an option
> that owner can activate or not, knowing the notice will tell him it will
> be visible by some browsers only.
>
> So, the double <br> is just because I cannot use <div>, <span>, ect for
> the form, except for what is about hint.
>
> Knowing this, how to do ?

You can use <div> presumably, you just can't style it.

So leave the HTML as suggested (i.e. using <div> and only one <br> at a
time) and live without the gap between "Help?" and "Message" on browsers
without CSS. It might not look just how you want it to but you can't
expect fine-grained control over the appearance on browsers without CSS
anyway.

There might be some more appropriate element to use here than <div> but
I'm not so _au fait_ with HTML as to know which one.

Yohan N. Leder

2007-07-02, 6:17 am

In article <slrnf8gc0v.208.spamspam@bowser.marioworld>,
spamspam@spam.eggs says...
> You can use <div> presumably, you just can't style it.
>
> So leave the HTML as suggested (i.e. using <div> and only one <br> at a
> time) and live without the gap between "Help?" and "Message" on browsers
> without CSS. It might not look just how you want it to but you can't
> expect fine-grained control over the appearance on browsers without CSS
> anyway.
>
> There might be some more appropriate element to use here than <div> but
> I'm not so _au fait_ with HTML as to know which one.
>

Thanks again for your interest Ben.

Today, I've tried something and it seems to work : I've simply moved the
first <br> before the hint <span>...

Like this (not complete, just to show the key element) :

Identifier :<br><input> <a>Help<br><span>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Suspendisse semper lacinia mauris.
</span>/a><br>Message :<br>

So, it's solved !