Table cell width

[Tim Streater]

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)

 

[dorayme]

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.

 

[Tim Streater]

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.

 

[dorayme]

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.

 

[Tim Streater]

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.

 

[dorayme]

....

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.

 

[Jukka K. Korpela]

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.

 

[Tim Streater]

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.

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

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.

 

[dorayme]

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]

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.

 

[Jukka K. Korpela]

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

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

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?

 

[Tim Streater]

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.

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.

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

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.

 

[Jonathan N. Little]

and use > > > some HTML5 element.dataset fields to store the data I

a > > horizontally styled list, a row of list items in a UL.
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.
[/QUOTE]

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>

 

[Jukka K. Korpela]

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

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.

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?

 

[dorayme]

Tim Streater wrote: ....

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.

 

[Jonathan N. Little]

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>

 

[dorayme]

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.

 

[Jonathan N. Little]

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!