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

Discussion in 'HTML' started by Joshua Beall, Feb 23, 2004.

  1. Joshua Beall

    Joshua Beall Guest

    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
    Joshua Beall, Feb 23, 2004
    #1
    1. Advertising

  2. Joshua Beall

    Paul Furman Guest

    Joshua Beall wrote:
    > 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?
    Paul Furman, Feb 23, 2004
    #2
    1. Advertising

  3. "Joshua Beall" <> wrote in message
    news:4ae_b.66295$...
    > 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
    Woolly Mittens, Feb 23, 2004
    #3
  4. Joshua Beall wrote:

    > 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;
    }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 23, 2004
    #4
  5. "Joshua Beall" <> wrote:

    > 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">.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 23, 2004
    #5
  6. Joshua Beall

    Joshua Beall Guest

    "Paul Furman" <> wrote in message
    news:...
    > 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.
    Joshua Beall, Feb 23, 2004
    #6
  7. Joshua Beall

    Cameron Guest

    Jukka K. Korpela wrote:
    > "Joshua Beall" <> wrote:
    >
    >
    >>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.
    >
    > <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
    Cameron, Feb 23, 2004
    #7
  8. Joshua Beall

    Joshua Beall Guest

    "Jukka K. Korpela" <> wrote in message
    news:Xns94987240AF2DDjkorpelacstutfi@193.229.0.31...
    > "Joshua Beall" <> wrote:
    > 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, Feb 23, 2004
    #8
  9. Joshua Beall

    Joshua Beall Guest

    "Jukka K. Korpela" <> wrote in message
    news:Xns94987240AF2DDjkorpelacstutfi@193.229.0.31...
    > "Joshua Beall" <> wrote:
    > 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? ;-)
    Joshua Beall, Feb 23, 2004
    #9
  10. Cameron <> wrote:

    >> 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.

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


    By lid, 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 23, 2004
    #10
  11. "Joshua Beall" <> wrote:

    >> 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.


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 23, 2004
    #11
  12. "Joshua Beall" <> wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 23, 2004
    #12
  13. Joshua Beall

    Joshua Beall Guest

    "Jukka K. Korpela" <> wrote in message
    news:Xns9498C18DBD31Djkorpelacstutfi@193.229.0.31...
    > "Joshua Beall" <> wrote:
    >
    > > 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? ;-)

    >
    > 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, Feb 23, 2004
    #13
  14. Joshua Beall

    Joshua Beall Guest

    "Jukka K. Korpela" <> wrote in message
    news:Xns9498C13642E59jkorpelacstutfi@193.229.0.31...
    > "Joshua Beall" <> wrote:
    >
    > 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?
    Joshua Beall, Feb 23, 2004
    #14
  15. "Joshua Beall" <> wrote:

    >> 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


    However they choose to go elsewhere.

    >> or expensive pocket size devices.

    >
    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 23, 2004
    #15
  16. Joshua Beall

    DU Guest

    Cameron wrote:

    > Jukka K. Korpela wrote:
    >
    >> "Joshua Beall" <> wrote:
    >>
    >>
    >>> 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.
    >>
    >> <snip>

    >
    >
    > 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
    DU, Feb 24, 2004
    #16
  17. Joshua Beall

    Paul Furman Guest

    Cameron wrote:
    > Jukka K. Korpela wrote:
    >>
    >>
    >> 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.



    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?
    Paul Furman, Feb 24, 2004
    #17
  18. Paul Furman wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 24, 2004
    #18
  19. Joshua Beall

    rf Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > Paul Furman wrote:
    >
    > > 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?


    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.
    rf, Feb 24, 2004
    #19
  20. Joshua Beall

    Roland Seuhs Guest

    Pipelining (Re: CSS equivalent of <td nowrap="true"/> ?)

    Toby A Inkster wrote:

    > 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
    Roland Seuhs, Feb 24, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian K. Williams

    TableCell oTableCell = new TableCell(); noWrap?

    Brian K. Williams, Apr 30, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,498
    Brian K. Williams
    Apr 30, 2004
  2. Nathan Sokalski

    The nowrap Property of TD Tags

    Nathan Sokalski, May 21, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    5,589
    Mikhail Arkhipov (Microsoft)
    May 21, 2005
  3. dorayme

    nowrap effect in css?

    dorayme, Apr 25, 2006, in forum: HTML
    Replies:
    6
    Views:
    38,859
    dorayme
    Apr 26, 2006
  4. Nathan Sokalski
    Replies:
    3
    Views:
    1,655
    Eliyahu Goldin
    Mar 28, 2007
  5. bdb112
    Replies:
    45
    Views:
    1,313
    jazbees
    Apr 29, 2009
Loading...

Share This Page