Table cell width

Discussion in 'HTML' started by Tim Streater, Dec 31, 2011.

  1. Tim Streater

    Tim Streater Guest

    Can anyone confirm that for Safari, the CSS width value for table cells
    includes content, padding, and border where as for Firefox it relates
    just to the content? That appears to be my empirical conculsion.

    (this is with a table with fixed layout and cells with overflow hidden
    and white-space nowrap)

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Dec 31, 2011
    #1
    1. Advertising

  2. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > Can anyone confirm that for Safari, the CSS width value for table cells
    > includes content, padding, and border where as for Firefox it relates
    > just to the content? That appears to be my empirical conculsion.
    >
    > (this is with a table with fixed layout and cells with overflow hidden
    > and white-space nowrap)


    I don't think this is a difference between the two (but which
    versions exactly?). Perhaps you might show (text here or url) an
    example of an html/css version you used in your empirical testing
    where you see a difference. Include a doctype to avoid quirks
    mode.

    Try

    <http://dorayme.netweaver.com.au/timTable.html>

    and vary things like dotted (the dotted in above, combined with
    turning off nowrap *does* reveal a difference between FF and
    Safari, btw, but probably not one relevant to your question),
    border-collapse, whatever you like.

    --
    dorayme
     
    dorayme, Jan 1, 2012
    #2
    1. Advertising

  3. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > Can anyone confirm that for Safari, the CSS width value for table cells
    > > includes content, padding, and border where as for Firefox it relates
    > > just to the content? That appears to be my empirical conculsion.
    > >
    > > (this is with a table with fixed layout and cells with overflow hidden
    > > and white-space nowrap)

    >
    > I don't think this is a difference between the two (but which
    > versions exactly?). Perhaps you might show (text here or url) an
    > example of an html/css version you used in your empirical testing
    > where you see a difference. Include a doctype to avoid quirks
    > mode.


    I think I may change approach here. What I actually want is a row of
    buttons - but I don't want them to look like buttons. But I want them
    all the same width and to shrink if more are produced (they are created
    by JavaScript). The text label gets progressively chopped as they shrink.

    I used a table because I needed to attach some state to each button, and
    the easiest way was to have several hidden rows and to put the data
    there. Normally the user gets to use Safari with my app, as that is the
    browser my app's startup script launches. But I like to test the thing
    with other browsers also and from time to time this throws up either
    browser differences or errors which Safari appears to ignore.

    But now I'm thinking it's gonna be a lot easier to use <div>s and use
    some HTML5 element.dataset fields to store the data I need. One row of
    <divs> which will simplify the JavaScript a bit too.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 1, 2012
    #3
  4. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    > > In article
    > > <>,
    > > Tim Streater <> wrote:
    > >
    > > > Can anyone confirm that for Safari, the CSS width value for table cells
    > > > includes content, padding, and border where as for Firefox it relates
    > > > just to the content? That appears to be my empirical conculsion.
    > > >

    ....
    > > I don't think this is a difference between the two ...

    >
    > I think I may change approach here. What I actually want is a row of
    > buttons - but I don't want them to look like buttons. But I want them
    > all the same width and to shrink if more are produced (they are created
    > by JavaScript). The text label gets progressively chopped as they shrink.
    >
    > I used a table because I needed to attach some state to each button, and
    > the easiest way was to have several hidden rows and to put the data
    > there. Normally the user gets to use Safari with my app, as that is the
    > browser my app's startup script launches. But I like to test the thing
    > with other browsers also and from time to time this throws up either
    > browser differences or errors which Safari appears to ignore.
    >
    > But now I'm thinking it's gonna be a lot easier to use <div>s and use
    > some HTML5 element.dataset fields to store the data I need. One row of
    > <divs> which will simplify the JavaScript a bit too.


    OK. You might also consider a more semantic way, for example, a
    horizontally styled list, a row of list items in a UL.

    --
    dorayme
     
    dorayme, Jan 1, 2012
    #4
  5. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > In article <>,
    > > dorayme <> wrote:
    > >
    > > > In article
    > > > <>,
    > > > Tim Streater <> wrote:
    > > >
    > > > > Can anyone confirm that for Safari, the CSS width value for table cells
    > > > > includes content, padding, and border where as for Firefox it relates
    > > > > just to the content? That appears to be my empirical conculsion.


    > > > I don't think this is a difference between the two ...

    > >
    > > I think I may change approach here. What I actually want is a row of
    > > buttons - but I don't want them to look like buttons. But I want them
    > > all the same width and to shrink if more are produced (they are created
    > > by JavaScript). The text label gets progressively chopped as they shrink.
    > >
    > > I used a table because I needed to attach some state to each button, and
    > > the easiest way was to have several hidden rows and to put the data
    > > there. Normally the user gets to use Safari with my app, as that is the
    > > browser my app's startup script launches. But I like to test the thing
    > > with other browsers also and from time to time this throws up either
    > > browser differences or errors which Safari appears to ignore.
    > >
    > > But now I'm thinking it's gonna be a lot easier to use <div>s and use
    > > some HTML5 element.dataset fields to store the data I need. One row of
    > > <divs> which will simplify the JavaScript a bit too.

    >
    > OK. You might also consider a more semantic way, for example, a
    > horizontally styled list, a row of list items in a UL.


    Mmm. They need to be clickable and at present, when clicked, I do a bit
    of border style using inset/outset so they look pressed (or not). As
    long as I can do that with a list it might even be easier than <div>s,
    which when floated tend to have minds of their own.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 1, 2012
    #5
  6. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    >?> dorayme <> wrote:
    >

    ....
    > > > But now I'm thinking it's gonna be a lot easier to use <div>s and use
    > > > some HTML5 element.dataset fields to store the data I need. One row of
    > > > <divs> which will simplify the JavaScript a bit too.

    > >
    > > OK. You might also consider a more semantic way, for example, a
    > > horizontally styled list, a row of list items in a UL.

    >
    > Mmm. They need to be clickable and at present, when clicked, I do a bit
    > of border style using inset/outset so they look pressed (or not). As
    > long as I can do that with a list it might even be easier than <div>s,
    > which when floated tend to have minds of their own.


    Horizontal lists are not too hard to style and they behave pretty
    well. And you can get pressed looks and all sorts of things. Not
    sure they are *easier* than floated DIVs but I would be inclined
    to use them instead, it is something that is more regularly done
    (in navigation bars) and so there would be a lot more examples.

    --
    dorayme
     
    dorayme, Jan 1, 2012
    #6
  7. 2012-01-01 18:49, Tim Streater wrote:

    > What I actually want is a row of
    > buttons - but I don't want them to look like buttons.


    This would be a lot easier if you described either the desired visual
    appearance (as some drawing) or the current page URL or both.

    > I used a table because I needed to attach some state to each button, and
    > the easiest way was to have several hidden rows and to put the data
    > there.


    Sounds complicated. If the setup is all JavaScript-driven, it sounds
    like it would be easiest to store the data in an array of JavaScript
    objects.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 1, 2012
    #7
  8. Tim Streater

    Tim Streater Guest

    In article <jdqbtg$hfr$>,
    "Jukka K. Korpela" <> wrote:

    > 2012-01-01 18:49, Tim Streater wrote:
    >
    > > What I actually want is a row of
    > > buttons - but I don't want them to look like buttons.

    >
    > This would be a lot easier if you described either the desired visual
    > appearance (as some drawing) or the current page URL or both.


    No URL as no data ever leaves the user's machine. I could put up a jpeg.

    > > I used a table because I needed to attach some state to each button, and
    > > the easiest way was to have several hidden rows and to put the data
    > > there.

    >
    > Sounds complicated. If the setup is all JavaScript-driven, it sounds
    > like it would be easiest to store the data in an array of JavaScript
    > objects.


    Mmmm, oddly enough I can't think now why I didn't do that originally. My
    internal notes for the app give no hint. Perhaps I hadn't heard of
    JavaScript objects at that point, odd though that may sound. I think I
    might still prefer the HTML5 approach - less housekeeping.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 1, 2012
    #8
  9. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > >?> dorayme <> wrote:
    > >

    > ...
    > > > > But now I'm thinking it's gonna be a lot easier to use <div>s and use
    > > > > some HTML5 element.dataset fields to store the data I need. One row of
    > > > > <divs> which will simplify the JavaScript a bit too.
    > > >
    > > > OK. You might also consider a more semantic way, for example, a
    > > > horizontally styled list, a row of list items in a UL.

    > >
    > > Mmm. They need to be clickable and at present, when clicked, I do a bit
    > > of border style using inset/outset so they look pressed (or not). As
    > > long as I can do that with a list it might even be easier than <div>s,
    > > which when floated tend to have minds of their own.

    >
    > Horizontal lists are not too hard to style and they behave pretty
    > well. And you can get pressed looks and all sorts of things. Not
    > sure they are *easier* than floated DIVs but I would be inclined
    > to use them instead, it is something that is more regularly done
    > (in navigation bars) and so there would be a lot more examples.


    Righto - thanks - more research to do then.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 1, 2012
    #9
  10. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:
    ....

    > > >
    > > > Mmm. They need to be clickable and at present, when clicked, I do a bit
    > > > of border style using inset/outset so they look pressed (or not). As
    > > > long as I can do that with a list it might even be easier than <div>s,
    > > > which when floated tend to have minds of their own.

    > >


    > dorayme
    >
    > > Horizontal lists are not too hard to style and they behave pretty
    > > well. And you can get pressed looks and all sorts of things. Not
    > > sure they are *easier* than floated DIVs but I would be inclined
    > > to use them instead, it is something that is more regularly done
    > > (in navigation bars) and so there would be a lot more examples.

    >


    > Righto - thanks - more research to do then.


    When you style the UL and you almost certainly don't want to be
    bothered by bullet points or the space allotted to them by
    default margins and/or paddings. Zero margin and padding on the
    parent element to bypass these defaults.

    If you do not specify a width on the LIs (which is perfectly fine
    of course), they will have a width that is shrunk auto to just
    fit the content and no more. If you do give a fixed width, you
    need to watch any children of the LIs to be sure they are of a
    size you want, you may want them to fill the full width, an
    inline element like an A will not but you can sort this by
    telling the A to be 100% wide of its LI parent.

    --
    dorayme
     
    dorayme, Jan 2, 2012
    #10
  11. Tim Streater

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > an
    > inline element like an A will not but you can sort this by
    > telling the A to be 100% wide of its LI parent.


    I should really have said that the way to do this is to display
    the A as block, this also gets rid of the as/des/cender space.

    --
    dorayme
     
    dorayme, Jan 2, 2012
    #11
  12. 2012-01-01 18:49, Tim Streater wrote:

    > What I actually want is a row of
    > buttons - but I don't want them to look like buttons.


    I don’t get the idea. What is the buttonhood of an element if it does
    not look like a button? Do you mean that you want to use <button>
    elements specifically.

    > But I want them all the same width


    That’s a vague description. _Which_ width? Some fixed width set in em or
    ch units or mayge (gasp) in pixels or points? Not robust at all, and not
    flexible. So maybe an equal share of some total width? It would then
    look odd if the total width is large. Or maybe as wide as needed for the
    item with the largest width requirement. This would really imply that
    you need <table> or its much less reliable CSS cousin display: table and
    relatives.

    > and to shrink if more are produced (they are created
    > by JavaScript). The text label gets progressively chopped as they shrink.


    You lost me here. What should happen if some label is
    Supercalifragisticexpialidocious or Järjestelmällistymättömyysperiaate
    and it cannot fit? Would you like to have just e.g. Supe or Järj to be
    shown?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 2, 2012
    #12
  13. Tim Streater

    Tim Streater Guest

    In article <jds5h3$udb$>,
    "Jukka K. Korpela" <> wrote:

    > 2012-01-01 18:49, Tim Streater wrote:
    >
    > > What I actually want is a row of
    > > buttons - but I don't want them to look like buttons.

    >
    > I don’t get the idea. What is the buttonhood of an element if it does
    > not look like a button? Do you mean that you want to use <button>
    > elements specifically.


    That's perhaps a better way of putting it. These are perhaps more like
    radio buttons in that only one is active at once. Press one in and the
    other one pops out. Tabs, really.

    > > But I want them all the same width

    >
    > That’s a vague description. _Which_ width? Some fixed width set in em or
    > ch units or mayge (gasp) in pixels or points? Not robust at all, and not
    > flexible. So maybe an equal share of some total width? It would then
    > look odd if the total width is large. Or maybe as wide as needed for the
    > item with the largest width requirement. This would really imply that
    > you need <table> or its much less reliable CSS cousin display: table and
    > relatives.


    No, equal width starting at some defined value. If the user generates
    more then when the space is filled up and the user wants more they
    clearly have to shrink in order to fit in. As the user closes them the
    process can be reversed.

    > > and to shrink if more are produced (they are created
    > > by JavaScript). The text label gets progressively chopped as they shrink.

    >
    > You lost me here. What should happen if some label is
    > Supercalifragisticexpialidocious or Järjestelmällistymättömyysperiaate
    > and it cannot fit? Would you like to have just e.g. Supe or Järj to be
    > shown?


    text-overflow: ellipsis;

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 2, 2012
    #13
  14. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    > > an
    > > inline element like an A will not but you can sort this by
    > > telling the A to be 100% wide of its LI parent.

    >
    > I should really have said that the way to do this is to display
    > the A as block, this also gets rid of the as/des/cender space.


    In fact the <li> will have some text and an onclick. The onclick takes
    care of restyling it amongst other things.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Jan 2, 2012
    #14
  15. Tim Streater wrote:
    > In article <>,
    > dorayme <> wrote:
    >
    >> In article <>,
    >> Tim Streater <> wrote:
    >>
    >> >?> dorayme <> wrote:
    >> > ...
    >> > > > But now I'm thinking it's gonna be a lot easier to use <div>s

    >> and use > > > some HTML5 element.dataset fields to store the data I
    >> need. One row of > > > <divs> which will simplify the JavaScript a bit
    >> too.
    >> > > > > OK. You might also consider a more semantic way, for example,

    >> a > > horizontally styled list, a row of list items in a UL.
    >> > > Mmm. They need to be clickable and at present, when clicked, I do

    >> a bit > of border style using inset/outset so they look pressed (or
    >> not). As > long as I can do that with a list it might even be easier
    >> than <div>s, > which when floated tend to have minds of their own.
    >>
    >> Horizontal lists are not too hard to style and they behave pretty
    >> well. And you can get pressed looks and all sorts of things. Not sure
    >> they are *easier* than floated DIVs but I would be inclined to use
    >> them instead, it is something that is more regularly done (in
    >> navigation bars) and so there would be a lot more examples.

    >
    > Righto - thanks - more research to do then.
    >


    Didn't we discuss "buttonized" links recently in another thread. I
    remember doing a mockup without a table, it was vertical:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Use CSS</title>

    <style type="text/css">

    div#nav {
    width: 11em; float: left; font-family: sans-serif;
    }

    /* smaller subtext */
    div#nav a span { font-size: .7em; }

    div#nav a {
    text-decoration: none; display: block; margin: 5px;
    padding: .5em; text-align: center;
    /* one liner added beveled borders! */
    border: 3px outset #1c508c;

    }

    /* you can add a CSS3 rule non-supporting browsers will ignore */
    div#nav a { text-shadow: 2px 2px 2px #000; }

    div#nav a:link, div#nav a:visited {
    color: #ffffff; background: #1c508c;
    }
    div#nav a:hover, div#nav a:focus {
    border-width: 2px 4px 4px 2px ;
    color: #ffff00; background: #7c9ec4;
    }
    div#nav a:active {
    border-width: 4px 2px 2px 4px;
    border-style: inset;
    color: #ff0000; background: #3c4e64;
    }
    </style>

    </head>
    <body>
    <div id="nav">
    <a href="#nav">Home</a>
    <a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
    <a href="#nav">Even Calendar/<br>Online Registration</a>
    <a href="#nav">Results Questions<br>Or Problems</a>
    <a href="#nav">Timing Services</a>
    <a href="#nav">About Us</a>
    <a href="#nav">Contact Us</a>
    </div>
    <p>The rest of your page....</p>
    </body>
    </html>

    But you can make it horizontal easily:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Use CSS</title>

    <style type="text/css">

    div#nav {
    font-family: sans-serif;
    }

    /* smaller subtext */
    div#nav a span { font-size: .7em; }

    div#nav a {
    text-decoration: none; display: inline-block; margin: 5px;
    padding: .5em; text-align: center;
    /* set a static width if you wish */
    width: 11em;
    /* one liner added beveled borders! */
    border: 3px outset #1c508c;

    }

    /* you can add a CSS3 rule non-supporting browsers will ignore */
    div#nav a { text-shadow: 2px 2px 2px #000; }

    div#nav a:link, div#nav a:visited {
    color: #ffffff; background: #1c508c;
    }
    div#nav a:hover, div#nav a:focus {
    border-width: 2px 4px 4px 2px ;
    color: #ffff00; background: #7c9ec4;
    }
    div#nav a:active {
    border-width: 4px 2px 2px 4px;
    border-style: inset;
    color: #ff0000; background: #3c4e64;
    }
    </style>

    </head>
    <body>
    <div id="nav">
    <a href="#nav">Home</a>
    <a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
    <a href="#nav">Even Calendar/<br>Online Registration</a>
    <a href="#nav">Results Questions<br>Or Problems</a>
    <a href="#nav">Timing Services</a>
    <a href="#nav">About Us</a>
    <a href="#nav">Contact Us</a>
    </div>
    <p>The rest of your page....</p>
    </body>
    </html>

    And maybe further refinements to make the buttons all the same height:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Use CSS</title>

    <style type="text/css">

    div#nav {
    font-family: sans-serif;
    }

    /* smaller subtext */
    div#nav a span { font-size: .7em; }

    div#nav a {
    text-decoration: none; display: inline-block; margin: 5px;
    padding: .5em; text-align: center;
    /* set a static width and height if you wish */
    width: 11em; height: 3em; vertical-align: bottom;
    /* one liner added beveled borders! */
    border: 3px outset #1c508c;

    }

    /* you can add a CSS3 rule non-supporting browsers will ignore */
    div#nav a { text-shadow: 2px 2px 2px #000; }

    div#nav a:link, div#nav a:visited {
    color: #ffffff; background: #1c508c;
    }
    div#nav a:hover, div#nav a:focus {
    border-width: 2px 4px 4px 2px ;
    color: #ffff00; background: #7c9ec4;
    }
    div#nav a:active {
    border-width: 4px 2px 2px 4px;
    border-style: inset;
    color: #ff0000; background: #3c4e64;
    }
    </style>

    </head>
    <body>
    <div id="nav">
    <a href="#nav">Home</a>
    <a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
    <a href="#nav">Even Calendar/<br>Online Registration</a>
    <a href="#nav">Results Questions<br>Or Problems</a>
    <a href="#nav">Timing Services</a>
    <a href="#nav">About Us</a>
    <a href="#nav">Contact Us</a>
    </div>
    <p>The rest of your page....</p>
    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 2, 2012
    #15
  16. 2012-01-02 16:22, Tim Streater wrote:

    >> I don’t get the idea. What is the buttonhood of an element if it does
    >> not look like a button? Do you mean that you want to use <button>
    >> elements specifically.

    >
    > That's perhaps a better way of putting it. These are perhaps more like
    > radio buttons in that only one is active at once. Press one in and the
    > other one pops out. Tabs, really.


    If you haven’t decided what the markup for the elements will be, let’s
    say they are <span> elements. Then you can wrap them inside a <div>
    element, and you probably want to set display: inline-block on the
    <span> elements in order to make it simple to set their width.

    > No, equal width starting at some defined value. If the user generates
    > more then when the space is filled up and the user wants more they
    > clearly have to shrink in order to fit in. As the user closes them the
    > process can be reversed.


    So the width is set in JavaScript, I presume. Looks simple–I don’t see
    why you would need markup other than <div> and <span>, with class at
    least on the <div>, I suppose. It does not sound useful to make it a
    table or a list—you would the browser’s default rendering for a table or
    a list and would need to start with killing it.

    >> You lost me here. What should happen if some label is
    >> Supercalifragisticexpialidocious or Järjestelmällistymättömyysperiaate
    >> and it cannot fit? Would you like to have just e.g. Supe or Järj to be
    >> shown?

    >
    > text-overflow: ellipsis;


    I don’t find Sup… or Jär… much more readable. It sounds like the
    esthetic preference for equal-width buttons, or button-like things that
    don’t look like buttons, makes you reduce usability for no good reason.
    You may ultimately need to truncate the labels, but why create extra
    problems by wasting width by making the the elements wider than needed?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 2, 2012
    #16
  17. Tim Streater

    dorayme Guest

    In article <jdseq6$f9u$>,
    "Jonathan N. Little" <> wrote:

    > Tim Streater wrote:

    ....
    > >
    > > Righto - thanks - more research to do then.
    > >

    >
    > Didn't we discuss "buttonized" links recently in another thread. I
    > remember doing a mockup without a table, it was vertical:
    >

    ....
    >
    > But you can make it horizontal easily:
    >

    ....
    >

    ....

    >
    > And maybe further refinements to make the buttons all the same height:
    >

    ....

    > div#nav a {
    > display: inline-block;


    ....

    > <div id="nav">
    > <a href="#nav">Home</a>
    > <a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
    > <a href="#nav">Even Calendar/<br>Online Registration</a>
    > <a href="#nav">Results Questions<br>Or Problems</a>
    > <a href="#nav">Timing Services</a>
    > <a href="#nav">About Us</a>
    > <a href="#nav">Contact Us</a>
    > </div>



    * The advantage of inline-block comes into its own when wrapping
    comes into play and snagging needs to be avoided. But, perhaps
    mildly interesting, if you give all the same height for nicer
    looks as above, floating is more or less as easy and practical
    (no need for vertical-aligning then). I am not saying it is
    better than inline-block.

    <http://dorayme.netweaver.com.au/buttonizedHorizList.html>

    * When there are just very few items, it can be nice to have
    fixed width, but it is almost always better when wrapping is a
    very distinct possibility to save the space and let the items
    find their own widths naturally imo.

    * If using a list, using inline-block or floating, one strategy
    for styling is to style the content of the list items in respect
    to size and let this content act as a spring to set the list
    item's size. See above URL.

    * As I said to Tim, I don't think it is all that easier to use a
    list for such things but it is often more correct than a bunch of
    DIVS or a bunch of As in a DIV container. Your's, of course, can
    be adapted.

    --
    dorayme
     
    dorayme, Jan 3, 2012
    #17
  18. dorayme wrote:

    "Button effect by the one and only Jonathan Little who has a PC and
    works on MS Win 7"

    > <http://dorayme.netweaver.com.au/buttonizedHorizList.html>


    Does OS really matter? Not sure what you mean, looks the same to me.

    <http://www.littleworksstudio.com/temp/usenet/DoesOSMatter.jpg>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 3, 2012
    #18
  19. Tim Streater

    dorayme Guest

    In article <jdtsb1$nc7$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    >
    > "Button effect by the one and only Jonathan Little who has a PC and
    > works on MS Win 7"
    >


    Merely a friendly mention of you since you posted the button
    effect, my post having nothing really to do with that effect but
    about inline-box vs floating.

    I removed it within minutes in case I had your button effect
    wrong and in case it confused the matter. But you got to it fast,
    you are like greased lightning, you draw your weapon like Charles
    Bronson did in the brilliant opening scene of Once Upon a Time in
    the West when the train went, the mouth organ played and he was
    there confronting three bad killer dudes in trench-coats. Wham,
    Bam, Bang and they were gone.


    > > <http://dorayme.netweaver.com.au/buttonizedHorizList.html>


    --
    dorayme
     
    dorayme, Jan 3, 2012
    #19
  20. dorayme wrote:
    > In article<jdtsb1$nc7$>,
    > "Jonathan N. Little"<> wrote:
    >
    >> dorayme wrote:
    >>
    >> "Button effect by the one and only Jonathan Little who has a PC and
    >> works on MS Win 7"
    >>

    >
    > Merely a friendly mention of you since you posted the button
    > effect, my post having nothing really to do with that effect but
    > about inline-box vs floating.


    It was interesting how both methods produce the same result. So you
    feared the buttonize styling wouldn't work on another OS? The only
    failure was IE6, and it also as with the success of the inline-box vs
    floating it failed the same way in IE6!



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 3, 2012
    #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. Jeremy Chapman

    Table cell width

    Jeremy Chapman, Jul 30, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    842
    Jeremy Chapman
    Jul 30, 2003
  2. AndrewF
    Replies:
    1
    Views:
    790
    Bruce Barker
    Oct 10, 2005
  3. Sean Jorden
    Replies:
    1
    Views:
    604
    laurie
    Aug 19, 2003
  4. Phillip Roncoroni
    Replies:
    14
    Views:
    1,104
    Toby A Inkster
    Apr 5, 2004
  5. Replies:
    0
    Views:
    517
Loading...

Share This Page