CSS equivalent of <td nowrap="true"/> ?

[Joshua Beall]

Hi All,

I have a list of images in a <div class="myClass">, and I would like to know
if there is a way to prevent those images from wrapping. Right now they
start to wrap if I squish the browser down enough.

If I laid this out with tables, I could put it in a <td nowrap="true"> to
accomplish this. How would I do this in my CSS class?

Thanks!

-Josh

 

[Paul Furman]

Hi All,

I have a list of images in a <div class="myClass">, and I would like to know
if there is a way to prevent those images from wrapping. Right now they
start to wrap if I squish the browser down enough.

If I laid this out with tables, I could put it in a <td nowrap="true"> to
accomplish this. How would I do this in my CSS class?

Assuming you know the width of the images, just use a fixed width but I
guess that's not the case?

 

[Woolly Mittens]

Hi All,

I have a list of images in a <div class="myClass">, and I would like to know

If I laid this out with tables, I could put it in a <td nowrap="true"> to
accomplish this. How would I do this in my CSS class?

..myClass {
white-space : nowrap;
}

http://www.devguru.com/Technologies/css/quickref/css_whitespace.html

 

[Toby A Inkster]

I would like to know if there is a way to prevent those images from
wrapping. [...] How would I do this in my CSS class?

..myClass {
white-space: nowrap;
}

 

[Jukka K. Korpela]

I have a list of images in a <div class="myClass">, and I would
like to know if there is a way to prevent those images from
wrapping.

Make them a single image. The surest way, and the most efficient way -
it is faster to download one 50 kb image than ten 5kb images.

Right now they start to wrap if I squish the browser
down enough.

You mean you'd rather force horizontal scrolling? It depends on the
content and structure which is the least of evils in small canvases.

If I laid this out with tables, I could put it in a <td
nowrap="true"> to accomplish this.

Really? Well, browsers have odd error recovery techniques. The valid
forms are <td nowrap> and <td nowrap="nowrap">.

 

[Joshua Beall]

Assuming you know the width of the images, just use a fixed width but I
guess that's not the case?

Yeah, I thought of that, but I wanted to make it not dependent on the total
width of the images - it is a nav bar, and I would rather not have to mess
with my CSS class everytime I have to add/remove a button, unless I have to.

 

[Cameron]

Make them a single image. The surest way, and the most efficient way -
it is faster to download one 50 kb image than ten 5kb images.

<snip>

It's often considered bad practice to do this, as if the user sees
nothing substantial, they would just be sitting there waiting for a
single image to load where as if there are separate images they can at
least see some of the pictures while they wait for the rest of them to load.

~Cameron

 

[Joshua Beall]

Really? Well, browsers have odd error recovery techniques. The valid
forms are <td nowrap> and <td nowrap="nowrap">.

Oh, I did not know that - I thought that attributes that took no value in
plain vanilla HTML just took any value you wanted in order to make then
XHTML compliant. I have been putting <input type="radio" checked="true"/> -
should I be putting <input type="radio" checked="checked"/> instead?

Can anybody link me to an authoritative document explain what really should
be done with these sorts of attributes to make them XHTML compliant?

Thanks!

-Josh

 

[Joshua Beall]

You mean you'd rather force horizontal scrolling? It depends on the
content and structure which is the least of evils in small canvases.

Yeah, after experimenting I think the lesser of two evils is to just have
the images wrap.

But only people that have the browser less than 800px wide will see that.
And I suppose I should be sorry for the poor folks that don't have a screen
res higher than that, eh? ;-)

 

[Jukka K. Korpela]

- -
It's often considered bad practice to do this,

By (e-mail address removed), you mean?

as if the user sees
nothing substantial, they would just be sitting there waiting for a
single image to load where as if there are separate images they can
at least see some of the pictures while they wait for the rest of
them to load.

In some random order, yes. But what would he do with them?

If there's a good reason to force the images stay there side by side,
which was implied here, then there's an equally good reason to make
them a single image.

 

[Jukka K. Korpela]

Oh, I did not know that - I thought that attributes that took no
value in plain vanilla HTML just took any value you wanted in order
to make then XHTML compliant.

No, you got it wrong.

I have been putting <input
type="radio" checked="true"/> - should I be putting <input
type="radio" checked="checked"/> instead?

Yes, if you wish to play that game. Just remember every time when you
type checked="checked" instead of just checked that it is not as
ridiculous it looks like - the real story is _really_ ridiculous.

Can anybody link me to an authoritative document explain what
really should be done with these sorts of attributes to make them
XHTML compliant?

The XHTML specification, obviously. You'll find it at www.w3.org.
But why bother? _Why_ would you use XHTML? Until now, you have just
managed to produce markup that is invalid in both classic HTML and in
XHTML, and which might create any strange effect on any browser on any
cloudy day. Some people would say this is way above the average benefit
of using XHTML.

 

[Jukka K. Korpela]

But only people that have the browser less than 800px wide will see
that. And I suppose I should be sorry for the poor folks that don't
have a screen res higher than that, eh? ;-)

Yeah, maybe. They are probably using either very high-resolution
screens that let them do some real work with multiple windows all
around, or expensive pocket size devices. But they can surely be
personally poor, in some sense at least.

 

[Joshua Beall]

They are probably using either very high-resolution screens that
let them do some real work with multiple windows all around

In which case *screen* res is higher, and the are free to resize the browser
if they wish

or expensive pocket size devices.

In which case they are used to pages not fitting to their 240px wide screen

 

[Joshua Beall]

The XHTML specification, obviously. You'll find it at www.w3.org.

Well thanks; I was wondering if somebody would be able link me directly to
the relevant section, but I can look for it myself.

But why bother? _Why_ would you use XHTML? Until now, you have just
managed to produce markup that is invalid in both classic HTML and in
XHTML, and which might create any strange effect on any browser on any
cloudy day.

Because I am trying to learn how to do it right, perhaps?

Some people would say this is way above the average benefit
of using XHTML.

I lost you. Producing markup with undefined behavior is way above the
average benefit of using XHTML?

 

[Jukka K. Korpela]

In which case *screen* res is higher, and the are free to resize
the browser if they wish

However they choose to go elsewhere.

In which case they are used to pages not fitting to their 240px
wide screen

And return to them, after getting a glimpse of a page that
unnecessarily wastes width.

 

[DU]

It's often considered bad practice to do this, as if the user sees
nothing substantial,

No. The user can read the alternate text.

they would just be sitting there waiting for a

single image to load where as if there are separate images they can at
least see some of the pictures while they wait for the rest of them to
load.

~Cameron

I disagree with you.
Ten 5 Kb images means/implies 10 http connections. IMO, it's far from
clear that the 10 images will be/should be/can be rendered or viewed
before 1 big 50 Kb image.

Often one can optimize image, reduce number of color, convert it to .png
for faster download and use progressive (interlaced) rendering: these
measures are *very often* not done by amateur web authors and such
measures can drastically decrease size of an image (up to 33%).
For large images (still large - say over 50Kb - even after taking these
measures), I edit a
<link rel="prefetch" href="path/BIGimage.png" ...>
in the related .html file by which an user reach the targeted .html file
with the BIGimage.png. That way, when a Mozilla-based browser user reach
the previous html file, the browser gets a good chance to start
downloading the BIGimage.png even before the http request to download
its file.
<link rel="prefetch" ...>
is supported by Mozilla starting from version 1.4: so, even NS 7.1
supports this.

DU

 

[Paul Furman]

It's often considered bad practice to do this, as if the user sees
nothing substantial, they would just be sitting there waiting for a
single image to load where as if there are separate images they can at
least see some of the pictures while they wait for the rest of them to
load.

I read some time ago that it's quicker to download about seven images
than one. That's why people slice up large pictures: to load faster. Is
this correct?

 

[Toby A Inkster]

I read some time ago that it's quicker to download about seven images
than one. That's why people slice up large pictures: to load faster. Is
this correct?

If you spilt an image up it's likely that the visitor will have to
download more bytes: there's the extra HTTP headers to begin with (those
are unavoidable with multiple files) and in *most* cases, the file sizes
of multiple files will be bigger than a combined one anyway (they can't
share file headers, palettes, etc).

That said, if you split an image up, it allows for the parts to be
downloaded simultaneously.

 

[rf]

No, it is not. One image - one trip to the server. Many images, many trips
to the server. Trips to the server are expensive, especially where I live,
400 milliseconds away from your site.

If you spilt an image up it's likely that the visitor will have to
download more bytes: there's the extra HTTP headers to begin with (those
are unavoidable with multiple files) and in *most* cases, the file sizes
of multiple files will be bigger than a combined one anyway (they can't
share file headers, palettes, etc).

Very true.

That said, if you split an image up, it allows for the parts to be
downloaded simultaneously.

Er, how do I download things simultaneasously when I have only one
connection to the internet?

Cheers
Richard.

 

[Roland Seuhs]

If you spilt an image up it's likely that the visitor will have to
download more bytes: there's the extra HTTP headers to begin with (those
are unavoidable with multiple files)

If both browser and server support the HTTP 1.1 protocol, those images will
be pipelined into a single HTTP request (if they lie on the same server).

All recent browsers except IE and all servers except IIS support pipelining.

See http://www.mozilla.org/projects/netlib/http/pipelining-faq.html