span + Css

[Yahel]

Hi all,

I'm having a small but a quite upseting problem using Css and the <span>
tag.
I've set up a style for the extract of some articles that goes like this :

..Texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-align: justify;
}

But as you can see here :
http://www.asseto.com/iw/industry-we...ites/index.asp

The four articles at the top of the page suffer an extra spacing between the
two last lines.

At first I thought it was because of the tiny arrow image, but I took it off
and nothing changed.

Here is the html of one of those :
-----------------------------------------------
<td valign="top" align="justify">
<span class="ExtractTitre">Gaz de France construit à Fos un nouveau
methanier</span><br>
<span class="Texte">Suite à la signature, été 2002, d'un contrat d'
approvisionnement en gaz naturel entre la France et l'Egypte, Gaz de France
étudie la construction d'un second terminal méthanier sur le site de Fos sur
mer ,dans ...&nbsp;<img
src="../../images/images-gsi/fleche-bleue-petite2.gif" width="7"
height="9">&nbsp;<a href="popup-actualite.asp?ActualiteId=190"><span
class="ExtractTitre">lire</span></a></span>
</td>
-------------------------------------------------

If anyone has an idea, I would be very grateful.

Regards Yahel.

[Stephen Poley]

On Mon, 16 Feb 2004 17:27:14 +0200, "Yahel" <yahel@wanadoo_NOSPAMM_.fr>
wrote:

I'm having a small but a quite upseting problem using Css and the <span>
tag.
I've set up a style for the extract of some articles that goes like this :

.Texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-align: justify;
}

But as you can see here :
http://www.asseto.com/iw/industry-we...ites/index.asp

The four articles at the top of the page suffer an extra spacing between the
two last lines.

I think you'll find it's due to your &nbsp; characters, which aren't
within any of your spans. They are therefore presumably inheriting some
text size from further up. You would do better to set a class on your
TD's to define the text for the cell as a whole, including size, and use
spans for setting the font weight and colour of individual passages
which differ. Better still: define the font once for the table as a
whole, and put the texts such as "Grands projets" within a heading. (H2
probably, but you haven't got an H1 at present.)

Some more (strong) recommendations:

- take the logo at the top out of the table. Putting it in a table gains
you nothing, clutters your markup, and prevents you taking advantage of
my next point.

- scrap all the width attributes on the table. Let the reader's browser
sort out how much space is available for display. (Several people here
would recommend scrapping the table completely and using CSS
positioning, but I suggest you concentrate on walking properly before
you try running.)

- avoid specifying font sizes in pixels. Your text is almost unreadable
for me. See http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

- avoid Verdana. See
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

- put some ALT texts in. Without images, your page looks a terrible
mess. See http://www.xs4all.nl/~sbpoley/webmatters/alt.html (I'm not
trying to plug my site BTW - it's just that these points come up so
often that it's easier to explain it once on a web page than repeat
myself a hundred times on Usenet.)

- learn to use CSS margins/padding, so you don't need monstrosities
like:

<tr>
<td>&nbsp;</td>
<td height="30">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

This could be replaced by a simple "margin-bottom: 4em;" or something
similar.

- No need to define font-family over and over again in your stylesheet.
Define it once for BODY and the rest will inherit.

Hope this helps.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Alan J. Flavell]

On Mon, 16 Feb 2004, Stephen Poley wrote:

- put some ALT texts in. Without images, your page looks a terrible
mess. See http://www.xs4all.nl/~sbpoley/webmatters/alt.html

If I might make a small, but IMHO significant, comment on this page.

You rightly point out that:

The purpose of the ALT attribute is thus to provide in textual form
whatever information was provided by the image.

which I think expresses the requirement very well.

When you quote the HTML specification, however, you seem to make no
mention of the key part of section 13.8
http://www.w3.org/TR/html401/struct/....html#adef-alt

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let
authors specify alternate text to serve as content when the element
^^^^^^^^^^^^^^^^
cannot be rendered normally.

I would want to emphasise that apt phrase "to serve as content" -
*NOT* "to describe the content", as all too many folks seem to
misinterpret it. And the worst part is that you have quoted this most
unfortunate comment from the DTD:

alt %Text; #REQUIRED -- short description --

without any adverse comment. I put it to you that a "short
description" is NOT the role of the alt attribute, and that this
comment (I can say this with impunity, since comments in the DTD are
non-normative ;-) is frankly a blunder. If you quote it at all, then
I urge you to pass some kind of adverse comment on it.
By way of a cautionary tale, I give you snippets of a recent
discussion with a web page author who IMHO had got this desperately
wrong. His pages had large numbers of transparent GIFs, each
carefully provided with alt="for layout only". It looked (and
sounded) absolutely ridiculous on a text browser.

In response to my repeated criticism, at first rejected as "we're
conforming to Bobby", he finally wanted to know what I would put
there. I innocently replied that, since the function of the
transparent GIFs was evidently to provide some white space, it seemed
obvious (if he couldn't be persuaded to abandon the transparent
GIFs altogether) that the appropriate alt text would be some white
space.

His reply was that he couldn't understand how alt="some white space"
could be any better than alt="for layout only". So help me!

[Eric Bohlman]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in
news:Pi*******************************@ppepc56.ph. gla.ac.uk:

In response to my repeated criticism, at first rejected as "we're
conforming to Bobby", he finally wanted to know what I would put
there. I innocently replied that, since the function of the
transparent GIFs was evidently to provide some white space, it seemed
obvious (if he couldn't be persuaded to abandon the transparent
GIFs altogether) that the appropriate alt text would be some white
space.

His reply was that he couldn't understand how alt="some white space"
could be any better than alt="for layout only". So help me!

Didn't something like this occur in the first installment of a trilogy by
R.R.J Neiklot? Set outside the Setag fo Airom, IIRC.

[Yahel]

Well thank you for that "Full of interesting informations" answer : )

Just a question that occurs to me as a non-specialist ... How many people
using only text based browser do you know ? : )

Thanks a lot again, i'll take a deep look at your pages : )

Regards Yahel.

"Yahel" <yahel@wanadoo_NOSPAMM_.fr> a écrit dans le message de news:
c0**********@news-reader1.wanadoo.fr...

Hi all,

I'm having a small but a quite upseting problem using Css and the <span>
tag.
I've set up a style for the extract of some articles that goes like this :

.Texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-align: justify;
}

But as you can see here :
http://www.asseto.com/iw/industry-we...ites/index.asp

The four articles at the top of the page suffer an extra spacing between the two last lines.

At first I thought it was because of the tiny arrow image, but I took it off and nothing changed.

Here is the html of one of those :
-----------------------------------------------
<td valign="top" align="justify">
<span class="ExtractTitre">Gaz de France construit à Fos un nouveau
methanier</span><br>
<span class="Texte">Suite à la signature, été 2002, d'un contrat d'
approvisionnement en gaz naturel entre la France et l'Egypte, Gaz de France étudie la construction d'un second terminal méthanier sur le site de Fos sur mer ,dans ...&nbsp;<img
src="../../images/images-gsi/fleche-bleue-petite2.gif" width="7"
height="9">&nbsp;<a href="popup-actualite.asp?ActualiteId=190"><span
class="ExtractTitre">lire</span></a></span>
</td>
-------------------------------------------------

If anyone has an idea, I would be very grateful.

Regards Yahel.

[Stephen Poley]

On Mon, 16 Feb 2004 22:47:53 +0000, "Alan J. Flavell"
<fl*****@ph.gla.ac.uk> wrote:

You rightly point out that:

The purpose of the ALT attribute is thus to provide in textual form
whatever information was provided by the image.

which I think expresses the requirement very well.

When you quote the HTML specification, however, you seem to make no
mention of the key part of section 13.8
http://www.w3.org/TR/html401/struct/....html#adef-alt

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let
authors specify alternate text to serve as content when the element
^^^^^^^^^^^^^^^^
cannot be rendered normally.

I would want to emphasise that apt phrase "to serve as content" -
*NOT* "to describe the content", as all too many folks seem to
misinterpret it. And the worst part is that you have quoted this most
unfortunate comment from the DTD:

alt %Text; #REQUIRED -- short description --

without any adverse comment. I put it to you that a "short
description" is NOT the role of the alt attribute, and that this
comment (I can say this with impunity, since comments in the DTD are
non-normative ;-) is frankly a blunder. If you quote it at all, then
I urge you to pass some kind of adverse comment on it.

Yes, I agree. Thanks for pointing that out. I have updated the page.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Stephen Poley]

On Tue, 17 Feb 2004 15:02:41 +0200, "Yahel" <yahel@wanadoo_NOSPAMM_.fr>
wrote:

Well thank you for that "Full of interesting informations" answer : )
You're welcome.
Just a question that occurs to me as a non-specialist ... How many people
using only text based browser do you know ? : )
Approximately 100%, seeing that just about everyone I know uses search
engines, and search robots are in essence a text-based browser.

OK, taking your question a bit more as it was intended: visit the Usenet
groups for blind users and you'll meet quite a few. In addition I know
quite a few people (including me) who usually disable images when
surfing, to speed up download time. As most of the images on your page
were basically decorative, it won't take much effort to insert
appropriate ALT attributes.
Thanks a lot again, i'll take a deep look at your pages : )

Good luck. Feel free to ask if you have questions.
--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Neal]

On Tue, 17 Feb 2004 15:02:41 +0200, Yahel <yahel@wanadoo_NOSPAMM_.fr>
wrote:

Just a question that occurs to me as a non-specialist ... How many people
using only text based browser do you know ? : )

How many people use Google? ;)

[Andrew Glasgow]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in
news:Pi*******************************@ppepc56.ph. gla.ac.uk:

In response to my repeated criticism, at first rejected as "we're
conforming to Bobby", he finally wanted to know what I would put
there. I innocently replied that, since the function of the
transparent GIFs was evidently to provide some white space, it seemed
obvious (if he couldn't be persuaded to abandon the transparent
GIFs altogether) that the appropriate alt text would be some white
space.

His reply was that he couldn't understand how alt="some white space"
could be any better than alt="for layout only". So help me!

Help would require replacing the individual in question with one
possessing $clue. Or applying a cluestick to said individual's head.

In seriousness, for contentless (i.e. layout) images, alt="" is
appropriate since in most text browsers it will prevent any indication
of the image being shown, not even an [IMAGE].

--
| Andrew Glasgow <amg39(at)cornell.edu> |
| "SCSI is *NOT* magic. There are *fundamental technical reasons* why it |
| is necessary to sacrifice a young goat to your SCSI chain now and then." |
| -- John Woods |

[Alan J. Flavell]

On Thu, 19 Feb 2004, Andrew Glasgow wrote:

In seriousness, for contentless (i.e. layout) images, alt="" is
appropriate
But sometimes it's necessary for the image to be replaced by some
textual white space, which was the point that I was making.
otherwise the texts that are to the left and right of the image may
get run together.

I've always found that alt=" " works well enough for that, but
I've seen suggestions that alt="&nbsp;" would be more robust.

OTOH I've seen some old browsers which displayed alt="&nbsp;" as an
ugly rectangular box.
since in most text browsers it will prevent any indication
of the image being shown, not even an [IMAGE].

Oh, indeed.