Prev: Can Someone please help me with my Computer stuff? 59001
Next: css problems
From: Poster Matt on 28 Jan 2010 11:11
Hi,

I'm using a custom css table design to display a program's usage info. in the
style of a Linux man page.

There are 2 different custom td definitions so that I can have a thin column
width for the command and a wide width for the description.

See this page:
http://gencon.pyrus.feralhosting.com/ftm/ftm.html

My problem is I'd like to reduce the distance between the 2 table columns in
each row, so that the extra space gained is given to the 2nd column and not so
many lines are needed for the long descriptions.

How do I achieve that?

Here's the relevant css:

table.TableAlign
{
width: 850px;
font-family: sans-serif, Tahoma;
font-size: 14px;
color: #000000;
font-weight: normal;
font-style: normal;
margin: 0px;
padding: 0px;
font-weight: bold;
}

td.TableAlignCol1
{
width: 100px;
font-family: sans-serif, Tahoma;
font-size: 14px;
color: #000000;
font-weight: normal;
font-style: normal;
margin: 0px;
padding: 0px;
font-weight: bold;
}

td.TableAlignCol2
{
width: 750px;
font-family: sans-serif, Tahoma;
font-size: 14px;
color: #000000;
font-weight: normal;
font-style: normal;
margin: 0px;
padding: 0px;
font-weight: bold;
}

As you can see I've made the table width 850, then td.TableAlignCol1 has a width
of 100 and td.TableAlignCol2 a width of 750. But those don't seem to be the
proportions I'm getting in the way I intended.

I'm using the css in my html along these lines:

<table class="TableAlign">

<tr>
<td class="TableAlignCol1">Input and output:</td>
<td class="TableAlignCol2">Both directories and both required.</td>
</tr>

<tr>
<td class="TableAlignCol1">-i &lt;Input dir&gt;</td>
<td class="TableAlignCol2">Directory location of the input FLAC files.</td>
</tr>

....

<tr>
<td class="TableAlignCol1">-v2</td>
<td class="TableAlignCol2">Use Lame V2 preset.</td>
</tr>

....etc...

</table>

Any advise would be appreciated.

Many thanks.
From: Jukka K. Korpela on 28 Jan 2010 11:55
Poster Matt wrote:

> There are 2 different custom td definitions so that I can have a thin
> column width for the command and a wide width for the description.

In fact, the first column is not thin at all.

> http://gencon.pyrus.feralhosting.com/ftm/ftm.html

Open it in Firefox and switch off style sheets. Quite an improvement, isn't
it? It really hurts my eyes and my common sense that your style sheet bolds
_everything_. If your font needs bolding for any text, then you need a
different font.

Just throw away the style sheet and start from scratch. What do you _need_
to do? Well, highlight the heading - but start by making it a header, in
markup. Then consider which parts should be subheadings or maybe table
header cells.

And then you might wish to set
td { vertical-align: top; }
and maybe some borders on table cells (though that's largely a matter of
taste).

> My problem is I'd like to reduce the distance between the 2 table
> columns in each row,

No, it isn't. The distance (the default cellspacing) is just a couple of
pixels. It's the width of the first column that needs tuning. And it's
futile to analyze why the current style sheet causes the problem. It's so
much easier to start from scratch.

> font-family: sans-serif, Tahoma;

That's absurd. Every system that can render using different fonts at all has
sans-serif, the browser-specific default sans serif font, so the Tahoma part
is always ignored, thank &Deity;.

In any case, stay away from Tahoma, the condensed version of Verdana, which
makes you use silly things like

> font-size: 14px;

Using just

font-size: 100%;
font-family: sans-serif;

would be reasonable, but the latter could be something more elaborate like

font-family: Calibri, Helvetica, Arial, sans-serif;

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Poster Matt on 28 Jan 2010 12:16
Thanks for your very helpful reply Jukka.


> Open it in Firefox and switch off style sheets. Quite an improvement,
> isn't it? It really hurts my eyes and my common sense that your style
> sheet bolds _everything_. If your font needs bolding for any text, then
> you need a different font.

A big improvement.

As for the bold... that was just because I was lazily cutting'n'pasting, I had
no intention of leaving the bold on everywhere or even using the font selection,
I was concentrating on getting the layout right visually in the table spacing
and sort the rest out afterwards.


> Just throw away the style sheet and start from scratch. What do you
> _need_ to do? Well, highlight the heading - but start by making it a
> header, in markup. Then consider which parts should be subheadings or
> maybe table header cells.

Ok, will do.


>> My problem is I'd like to reduce the distance between the 2 table
>> columns in each row,
>
> No, it isn't. The distance (the default cellspacing) is just a couple of
> pixels. It's the width of the first column that needs tuning. And it's
> futile to analyze why the current style sheet causes the problem. It's
> so much easier to start from scratch.

Ok.


>> font-family: sans-serif, Tahoma;
>
> That's absurd. Every system that can render using different fonts at all
> has sans-serif, the browser-specific default sans serif font, so the
> Tahoma part is always ignored, thank &Deity;.

Yes, I'll sort that (as was my intention).

> In any case, stay away from Tahoma, the condensed version of Verdana,
> which makes you use silly things like
>
>> font-size: 14px;
>
> Using just
>
> font-size: 100%;
> font-family: sans-serif;
>
> would be reasonable, but the latter could be something more elaborate like
>
> font-family: Calibri, Helvetica, Arial, sans-serif;

Got it.

Many thanks for the advise. Cheers,

Matt
From: David Stone on 28 Jan 2010 14:03
In article <5kj8n.70198$La7.61178(a)uutiset.elisa.fi>,
"Jukka K. Korpela" <jkorpela(a)cs.tut.fi> wrote:

> Poster Matt wrote:
>
> > There are 2 different custom td definitions so that I can have a thin
> > column width for the command and a wide width for the description.
>
> In fact, the first column is not thin at all.
>
> > http://gencon.pyrus.feralhosting.com/ftm/ftm.html
>
> Open it in Firefox and switch off style sheets. Quite an improvement, isn't
> it? It really hurts my eyes and my common sense that your style sheet bolds
> _everything_. If your font needs bolding for any text, then you need a
> different font.
>
> Just throw away the style sheet and start from scratch. What do you _need_
> to do? Well, highlight the heading - but start by making it a header, in
> markup. Then consider which parts should be subheadings or maybe table
> header cells.
>
> And then you might wish to set
> td { vertical-align: top; }
> and maybe some borders on table cells (though that's largely a matter of
> taste).
>
> > My problem is I'd like to reduce the distance between the 2 table
> > columns in each row,
>
> No, it isn't. The distance (the default cellspacing) is just a couple of
> pixels. It's the width of the first column that needs tuning. And it's
> futile to analyze why the current style sheet causes the problem. It's so
> much easier to start from scratch.

Is it really necessary to set explicit widths at all? It certainly isn't
necessary to set width on both columns of a two-column table! If your
aim is to keep the first column the same width in multiple instances of
the table, I would recommend setting a width in em units; that way, it
should adapt to the user's font and font-size better than using px,
especially if you adopt the following suggestion from Jukka, which is
a good one:

> Using just
>
> font-size: 100%;
> font-family: sans-serif;
>
> would be reasonable, but the latter could be something more elaborate like
>
> font-family: Calibri, Helvetica, Arial, sans-serif;

If your page will only ever have a single table in it, I would be
for letting the browser sort out the widths, and using padding to
space the cell contents from one another (although I suppose your
border-spacing achieves the same thing - not a setting I'd actually
noticed before). By not setting a width on the table at all, you
allow the browser to adapt the contents to the user's window size.
If you want to avoid overly long lines in the second column in
windows that have been maximised on large screens, you can always
set a max-width (again in em units) though I'm not sure that would be
entirely necessary.
From: Roy A. on 28 Jan 2010 14:58
On 28 Jan, 20:03, David Stone <no.em...(a)domain.invalid> wrote:
> In article <5kj8n.70198$La7.61...(a)uutiset.elisa.fi>,
>  "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote:

[...]

> Is it really necessary to set explicit widths at all?

Yes it would be necessary. Without you would get a tiny column with
wrapped text to the left.

> It certainly isn't
> necessary to set width on both columns of a two-column table! If your
> aim is to keep the first column the same width in multiple instances of
> the table,

With multiple instances of the table, you got to set both to make it
look the same.

Have you read how the width of the cells is calculated?
http://www.w3.org/TR/CSS2/tables.html#width-layout

If the OP sets the first column to an fixed width (in ems), and set
the table to a desired width, then the second column could be set to
100% (of the available cell space).

> I would recommend setting a width in em units; that way, it
> should adapt to the user's font and font-size better than using px,
> especially if you adopt the following suggestion from Jukka, which is
> a good one:
>
> > Using just
>
> > font-size: 100%;
> > font-family: sans-serif;
>
> > would be reasonable, but the latter could be something more elaborate like
>
> > font-family: Calibri, Helvetica, Arial, sans-serif;
>
> If your page will only ever have a single table in it, I would be
> for letting the browser sort out the widths, and using padding to
> space the cell contents from one another (although I suppose your
> border-spacing achieves the same thing - not a setting I'd actually
> noticed before). By not setting a width on the table at all, you
> allow the browser to adapt the contents to the user's window size.

The browser will adapt the width to the content of the cells, making
to little room for the first column. The first column will only get as
much room as the longest word in that column.
 |  Next  |  Last
Pages: 1 2
Prev: Can Someone please help me with my Computer stuff? 59001
Next: css problems