CSS Tables Formatting Problem

Hi,

I'm in the process of converting all the presentation aspects of my tables
from HTML to CSS (finally). I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the table
to no avail. The left and middle columns remain small, and the right column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

Please help - How can I fix this?

My CSS for the tables is:

table { border-collapse:collapse;
border:1px solid #308468;
text-align:center;
margin-left: 30%;
margin-right: 5%;
width: 55%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000000 }

thead th { background: #27AF81;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
padding: 1.5%;
text-align: center;
border: 1px solid #308468; }

caption { background: #27AF81;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
padding: 2%;
text-align: center;
margin-left: 30%;
margin-right: 5%;
width: 55%;
border: 1px solid #308468; }

tbody tr { background: #FFFFFF;
color: #000000 }

tbody tr.odd { background: #D8FFEE;
color: #000000 }

tbody td { font-size: 0.9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
border: 1px solid #308468;
text-align: left;
padding: 1.3% }


--
Asiya
**********
http://www.asiya.org/

In article <C3987D4B.26753%asiya_is_here (AT) sbcSORATHglobal (DOT) net>,
Asiya <asiya_is_here (AT) sbcSORATHglobal (DOT) net> wrote:

Hi,

I'm in the process of converting all the presentation aspects of my tables
from HTML to CSS (finally). I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the table
to no avail. The left and middle columns remain small, and the right column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

Your body>#menu { position: fixed; } makes the menu unable to
be seen on my 1200px monitor.

Get rid of

html>body #menu { width: 125px; }

and

body>#menu { position: fixed; }

and instead of your:

#menu { position: absolute;
top: 10px;
left: 10px;
border: #DFDB6A 2px solid;
background: #4682B4;
width: 154px;
padding: 5px 15px 15px 15px; }


put

#menu {
float: left;
border: #DFDB6A 2px solid;
background: #4682B4;
width: 8em;
padding: .3em;
}

and keep simplifying ...

--
dorayme

Scripsit Asiya:

I'm in the process of converting all the presentation aspects of my
tables from HTML to CSS (finally).

Why? "There is always someone who rewrites working code, to clean it up,
or to speed it up."

I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the
table
to no avail. The left and middle columns remain small, and the right
column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

What am I expected to see? I see no "spilling". The left column consists
of the names of the week. Where's the old implementation, for
comparison?

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

Why do you re-implement poor design, instead of redesigning the site
(using modern tools as appropriate, and older tools otherwise)?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2007-12-27, Asiya <asiya_is_here (AT) sbcSORATHglobal (DOT) net> wrote:

Hi,

I'm in the process of converting all the presentation aspects of my tables
from HTML to CSS (finally). I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the table
to no avail. The left and middle columns remain small, and the right column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

Please help - How can I fix this?
[...]

thead th { background: #27AF81;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
padding: 1.5%;
^^^^
text-align: center;
border: 1px solid #308468; }
[...]
tbody td { font-size: 0.9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
border: 1px solid #308468;
text-align: left;
padding: 1.3% }
^^^^

It seems to be these percentage paddings that are causing the problem in
Firefox.

My guess is that the browser is ignoring the percentage when it computes
the preferred width of the cell (since it doesn't at that point know the
total table width, so can't resolve the percentage). But then later,
when the table width is known, it does resolve the percentage and just
uses it. This makes the cell's contents including the padding wider than
the cell, which shouldn't happen. So it's a bug.

Suggested workaround is not to use a percentage padding there-- if I
were working on Firefox then I'd fix the bug by ignoring the percentage
altogether so your percentage paddings would then do nothing anyway.

So just set padding to 0.5em or something instead.

On 12/27/07 11:11 AM, "Ben C" <spamspam (AT) spam (DOT) eggs> wrote:

It seems to be these percentage paddings that are causing the problem in
Firefox.

My guess is that the browser is ignoring the percentage when it computes
the preferred width of the cell (since it doesn't at that point know the
total table width, so can't resolve the percentage). But then later,
when the table width is known, it does resolve the percentage and just
uses it. This makes the cell's contents including the padding wider than
the cell, which shouldn't happen. So it's a bug.

Suggested workaround is not to use a percentage padding there-- if I
were working on Firefox then I'd fix the bug by ignoring the percentage
altogether so your percentage paddings would then do nothing anyway.

So just set padding to 0.5em or something instead.

Thanks, that makes sense. I set th padding to 0.5em and td padding to 0.3em,
and that worked.

--
Asiya
**********
http://www.asiya.org/

On 12/27/07 2:21 AM, "Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

Scripsit Asiya:

I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the
table
to no avail. The left and middle columns remain small, and the right
column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

What am I expected to see? I see no "spilling".

Sorry, I had forgot to mention which browser I was using.

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

Why do you re-implement poor design, instead of redesigning the site
(using modern tools as appropriate, and older tools otherwise)?

Can you elaborate? What's wrong with those fonts?

--
Asiya
**********
http://www.asiya.org/

On 12/26/07 10:42 PM, "dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <C3987D4B.26753%asiya_is_here (AT) sbcSORATHglobal (DOT) net>,
Asiya <asiya_is_here (AT) sbcSORATHglobal (DOT) net> wrote:

I'm in the process of converting all the presentation aspects of my tables
from HTML to CSS (finally). I've run into a snag where the content of the
left column is spilling over to the next. I increased the width of the table
to no avail. The left and middle columns remain small, and the right column
remains large. Please look at this page for instance:

http://www.asiya.org/bos/corrdays.html

Your body>#menu { position: fixed; } makes the menu unable to
be seen on my 1200px monitor.

Get rid of

html>body #menu { width: 125px; }

and

body>#menu { position: fixed; }

and instead of your:

#menu { position: absolute;
top: 10px;
left: 10px;
border: #DFDB6A 2px solid;
background: #4682B4;
width: 154px;
padding: 5px 15px 15px 15px; }


put

#menu {
float: left;
border: #DFDB6A 2px solid;
background: #4682B4;
width: 8em;
padding: .3em;
}

and keep simplifying ...

Thanks much. This past month I've been in the process of bringing my HTML
and style up-to-date and the menu is new (before I had frames). My goal has
always been to keep things simple.

--
Asiya
**********
http://www.asiya.org/

On 2007/12/29 23:05 (GMT) Asiya apparently typed:

On 12/27/07 2:21 AM, "Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

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

Why do you re-implement poor design, instead of redesigning the site
(using modern tools as appropriate, and older tools otherwise)?

Can you elaborate? What's wrong with those fonts?

Exactly what's wrong with specifying just sans-serif, and allowing the
visitor to see the sans-serif font she prefers? I don't like any of those
three, and like your first choice the least.

Helvetica:
http://mrmazda.no-ip.com/auth/Font/f...ca.html#bitmap

Verdana:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
http://underthesun.robstel.co.uk/200...avoid-verdana/
http://virtuelvis.com/archives/2004/01/avoid-verdana
--
Jesus Christ, the reason for the season.

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/