table row - border on the bottom

[eomer]

I would like my table header to have a border on the bottom. What I
have written works in Mozilla (1.7.12) but not IE (6).

I have included the snippet of html and the snippets of CSS. Any
suggestions would be appreciated. Thank you.

http://www1.esc.edu/personalstu/fhartnet/books.html
<tr class="lightblu e">
<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>

table {border-collapse: collapse;
table-layout: auto;
width: auto;}

tr.lightblue{
background-color: #CCFFFF;
color: black;
font-weight: bold;
font-family: sans-serif, serif;
font-size: 18px;
caption-side: top;
padding: 5px;
border-bottom: 5px solid black;
}

[Els]

eomer wrote:

I would like my table header to have a border on the bottom. What I
have written works in Mozilla (1.7.12) but not IE (6). [snip] <tr class="lightblu e">
<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>

table {border-collapse: collapse;
table-layout: auto;
width: auto;}

tr.lightblue{ [snip] border-bottom: 5px solid black;
}

You need to put the border on the bottom of the <th>s.
tr.lightblue th{
border-bottom:5px solid black;
}

(not because of that being the right way according to the specs, but
because IE won't do it otherwise ;-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[eomer]

Thank you so much!
I just love these differences between the browsers.

[Gérard Talbot]

eomer wrote :

I would like my table header to have a border on the bottom.
Then
<table frame="below" ...>
will be sufficient

What I have written works in Mozilla (1.7.12) but not IE (6).

I have included the snippet of html and the snippets of CSS. Any
suggestions would be appreciated. Thank you.

http://www1.esc.edu/personalstu/fhartnet/books.html
<tr class="lightblu e">
<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>

table {border-collapse: collapse;
table-layout: auto;
The initial and default value of table-layout is auto. So, you do not
need to define this property value. I must point out that defining
table-layout: auto;
is not making much sense. The best/better setting is table-layout: fixed
in a very wide majority of cases when a table displays tabular data.
width: auto;}
Same thing here. width initial and default value is auto. There is no
need to set it to auto. Again here too, if you want to have a table
which is scalable and proportional, then using a %tage is appropriate too.

tr.lightblue{
background-color: #CCFFFF;
color: black;
color is inherited and is an inheritable property. Chances are you do
not need to define this.
font-weight: bold;
font-family: sans-serif, serif;
font-size: 18px;
caption-side: top;
Caption-side is wrongly used here. caption-side should be used on the
table element or the caption element. Note again that caption-side
initial and default value is top.
padding: 5px;
border-bottom: 5px solid black;
}

I checked your markup code and noticed many incoherences:

<table class="books" summary="book recommendations " width="80%">
<caption id="recommended reading">Book Recommendations </caption>
<colgroup width="20%"></colgroup>
<colgroup width="20%"></colgroup>
<colgroup width="40%"></colgroup>

Your markup code is being redefined by the CSS; so it's illogical,
counter-productive.

If the table width should be set by the content, then you should not set
any value for the width attribute value.

The colgroups width should total 100%, otherwise this does not make any
sense. If you have n colgroups, then the total value of each of these
colgroup's width should equal to 100%.
td.stayleft{
text-align: left;
vertical-align: middle;
}

Here, the default horizontal alignment value in all browsers for <td> is
left. What you do is unneeded and unnecessary. Same thing with
vertical-align: the initial and default value of vertical alignment of
table cell in all browsers is middle.

"left: Left-flush data/Left-justify text. This is the default value for
table data."

"middle: Cell data is centered vertically within the cell. This is the
default value."

HTML 4.01 spec, Section 11. Tables
11.3.2 Horizontal and vertical alignment
http://www.w3.org/TR/html401/struct/....html#h-11.3.2

So, here you have 14 occurences of class="stayleft " which is unneeded
and unnecessary.
Overall, your CSS file is over-constraining, over-declaring and
over-defining. There is no reason to have so many classes, CSS rules in
your

http://www1.esc.edu/personalstu/fhartnet/newstyle.css

You should be using the power of inheritance and using/relying on
default/initial value instead of redefining all the time the properties
which are already inherited.

- Writing Good and Efficient CSS:
http://developer.mozilla.org/en/docs..._Efficient_CSS
- Writing perfect style sheets:
http://www.richinstyle.com/masterclass/perfection.html (except for tip 4
where it is written: "each and every block element must have
declarations for margin, padding and line height"), I recommend this
tutorial

My own interactive demo:
Dynamic table formatting for DOM 1 browsers
http://www.gtalbot.org/DHTMLSection/...ormatting.html

Gérard
--
remove blah to email me

[Gérard Talbot]

eomer a écrit :

I would like my table header to have a border on the bottom. What I
have written works in Mozilla (1.7.12) but not IE (6).

I have included the snippet of html and the snippets of CSS. Any
suggestions would be appreciated. Thank you.

http://www1.esc.edu/personalstu/fhartnet/books.html
<tr class="lightblu e">
For best maintenance purpose, you should define class name by the
purpose or functionality of a group of element, not by its style and
presentational purpose. In my opinion, your webpage would most likely
not be needing any class declaration if your markup semantic was better.

E.g.:

Book Recommendations would be the caption and
Title Author Synopsis
would be the table header (<thead>).

<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>

table {border-collapse: collapse;
table-layout: auto;

'table-layout'
Initial: auto
http://www.w3.org/TR/CSS21/tables.ht...f-table-layout
width: auto;}

'width'
Initial: auto
http://www.w3.org/TR/CSS21/visudet.html#propdef-width

tr.lightblue{
background-color: #CCFFFF;
color: black;
font-weight: bold;
font-family: sans-serif, serif;

font-family should be given only and only one generic font-family.

In any case, you do not need to define a font-family if such font is
inherited from your body node. Again, you may be defining unneedlessly
and unnecessarly a CSS declaration here. And if you need to define a
particular font-family for your table, then you do not need to redefine
it for each table row: that is why I say you have over-declared and
over-defined your CSS file.

font-size: 18px;
You should not use absolute value for font-size. What you do will make
your table data unresizable, non-scalable in visual browsers like MSIE 6:

"# Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
# Use relative length units such as percent or (better) em, or, even
better, set a base font-size for the document (...)"

W3C Quality Assurance tip for Webmasters:
Care with Font-size
Good usage of CSS's font properties; Recommended practices
http://www.w3.org/QA/Tips/font-size#goodpractice
caption-side: top;

'caption-side'
Initial: top
Applies to: 'table-caption' elements
http://www.w3.org/TR/CSS21/tables.ht...f-caption-side
Note that caption-side applies to table-caption elements, not table rows.
padding: 5px;
border-bottom: 5px solid black;
}

Gérard
--
remove blah to email me