homepage Welcome to WebmasterWorld Guest from 54.237.249.10
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Table Problem
Certificates




msg:4526861
 8:26 am on Dec 11, 2012 (gmt 0)

I have two tables on my web page.

I want the first one to have no visible borders and the second one to have them.

At present IE9 and firefox shows no borders for either

Chrome on the other hand shows a double border for the bottom one which is OK and a single border for the first one.

Can some one help please ?

CSS
#table-3 {border-collapse:collapse;}


table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-style:italic; font-weight:bold;}}
td{font-weight:bold; font-style:italic;border:1 solid #000000;

HTML

<table id="table-3" width="50%">
<tr><!-- Row 1 -->
<td>Name and Description of</td><!-- Col 1 -->
<td>The Union Workhouse</td><!-- Col 2 -->
<tr><!-- Row 2 -->
<td>Institution or Establishment</td><!-- Col 1 -->
<td></td><!-- Col 2 --></tr> <tr><!-- Row 2 -->
<td>Postal Address</td><!-- Col 1 -->
<td>Ashton Under Lyne</td><!-- Col 2 --></tr>
</table>
<p class="local">
LOCAL SUB DIVISIONS IN WHICH THE INSTITUTION OR ESTABLISHMENT IS SITUATED</p>
<p class="tobefilled">To be filled up by the Registrar. Strike out such words of the headings as are inappropriate.</p>

<table id="table-2" >
<tr><!-- Row 1 -->
<td><div align="center">Civil Parish</div></td><!-- Col 2 -->
<td><div align="center">Ecclesiastical Parish</div></td><!-- Col 3 -->
<td><div align="center">Borough<strike> or Urban District</strike></div></td><!-- Col 4 -->
<td><div align="center">Ward of Borough <strike>or Urban District</strike></div></td><!-- Col 6 -->
<td><div align="center"><strike>Rural District</strike></div></td><!-- Col 7 -->
<td><div align="center">Parliamentary Borough <strike>or Division</strike></div></td><!-- Col 8 -->

<tr><!-- Row 2 -->
<td><div align="center">Ashton&nbsp;Under&nbsp;Lyne
<br>(pt of)</div></td><!-- Col 1 -->
<td><div align="center">Ashton&nbsp;Under&nbsp;Lyne&nbsp;St&nbsp;Michaels
<br>(Part of)</div></td><!-- Col 2 -->
<td><div align="center">Ashton Under Lyne MB (Pt of)</div></td><!-- Col 3 -->
<td><div align="center">Ashton&nbsp;Under&nbsp;Lyne&nbsp;St&nbsp;Michaels
<br>(Part of)</div></td><!-- Col 4 -->
<td></td><!-- Col 6 -->
<td><div align="center">Ashton&nbsp;Under&nbsp;Lyne
<br>(pt of)</div></td><!-- Col 7 -->
<!-- Col 8 --></tr>
</table>

The page may be viewed at www.c5d.co.uk/descriptionworkhouse1911.php

Thanks for any help

Antony

 

lucy24




msg:4526868
 9:29 am on Dec 11, 2012 (gmt 0)

#table-3 {border-collapse:collapse;}

table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-style:italic; font-weight:bold;}}
td{font-weight:bold; font-style:italic;border:1 solid #000000;

Say what now? For kicks I fed those three lines into the CSS validator. It got a whopping seven errors.

To pick one at random:
{border:1 solid #000000;}
1 what? If a user agent can't make sense of the CSS, it goes back to its own defaults.

And where's the CSS for table2?

And --rhetorical question-- what's this fixation with using IDs for styling? I see it everywhere and frankly it makes no sense. You're just painting yourself into a corner.

Someone else may have something to say about the equally inexplicable
<td><div align="center">Ward of Borough <strike>or Urban District</strike></div></td>

I'm going to bed. Just as soon as I've wrestled .2cc of azithromycin into Little Feet.

Certificates




msg:4526962
 1:52 pm on Dec 11, 2012 (gmt 0)

Thanks for the friendly welcome I hoep you slept well.

I am a beginner at this. Six weeks ago the site was still in frames, but I am not trying to paint anything into anywhere. I am just trying to bring it all up to date.

As for your criticism of <td><div align="center">Ward of Borough <strike>or Urban District</strike></div></td>. Perhaps you could you say why you feel it is inexplicable?

How else would you show a word that has been crossed out?

I would welcome the benefit of your knowledge rather than a slagging off

As for table two, it works so I didn't post it.

Regards

Antony

bhonda




msg:4526970
 2:03 pm on Dec 11, 2012 (gmt 0)

table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-style:italic; font-weight:bold;}}

Is that not supposed to be -

table {margin:auto;}
a:link, a:visited {color:#000000; font-size: 15px;font-style:italic; font-weight:bold;}

Just a guess. Probably won't fix your other problems, though.

Certificates




msg:4526999
 3:32 pm on Dec 11, 2012 (gmt 0)

The table displays fine. The HTML appears OK.

It's just that I can't get the borders of Table 3 to disappear. Here is the revised CSS. There are no links in the table in any event

table {margin:auto;font-size: 15px;font-style:italic; font-weight:bold;}
td{font-weight:bold; font-style:italic;border-collapse:collapse;}
#table-3 {border-collapse:collapse; border:0px solid black;}
#table-2,td {border: 1px solid black; }

Certificates




msg:4527077
 7:55 pm on Dec 11, 2012 (gmt 0)

I have almost achieved what I set out to do.

There is now just a vertical line left visible in table-3

I have tried everything I possibly can think of to remove this. Any thoughts anyone ?

Table CSS

table {margin:auto;font-size: 15px;font-style:italic; font-weight:bold;}
td{font-weight:bold; font-style:italic;border-collapse:collapse;}
#table-3, {border-collapse:collapse; border:0px solid black;border-style:hidden;}
#table-3,tr,th,td {border-collapse:collapse; border:0px solid black;border-style:hidden;border-bottom-color:#708090;}
#table-2,td {border: 1px solid black; }

web page [c5d.co.uk...]

lucy24




msg:4527162
 12:33 am on Dec 12, 2012 (gmt 0)

For starters:
#1 read the Forums rules. No links to your own site.
#2 validate the html and the css.

You're expected to do the basics yourself.

Picking one thing at random: "border-collapse" is not a cell property. It is a table property. The default value is "separate", meaning that each cell will have its own border.

Why are the bold and italic properties applied to both the table and the cell? font-style and font-weight are both inherited, so once they're applied to a table, everything inside the table will have the same properties unless you explicitly say otherwise.

You've redefined "td" twice after its initial definition.

#table-3,tr,th,td
and
#table-2,td
do not mean "cells within table-3 or table-2", they mean "all cells everywhere". If you mean
#table-3 td
and similar, then say so.

Is
#table-3, {border-collapse:collapse; border:0px solid black;border-style:hidden;}
a typo? The trailing comma makes the whole thing into one big parse error. This is just as well, since "hidden" makes all other border statements meaningless-- unless they are overridden by other declarations later in the CSS.

See above about basics. You can also view the offending page in one of the many browsers that has a "developer" feature (exact name depends on browser). Firefox is one of them.

Certificates




msg:4527245
 7:03 am on Dec 12, 2012 (gmt 0)

I'm sorry Lucy24 but as I said I am a beginner at this.

To say I have not done the basics is unfair, I spent a whole day yesterday reading, scouring the web and doing everything I could to resolve this.

All I can say is that I am glad you are not my teacher you type things and don't explain why. You give me no suggestions.

I didn't realise that this forum was not for learners.

If you have any comments, I shan't see them because I have unsubbed from this thread. I was hoping for help not a slagging off

Regards

Antony

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved