A tiny bit of table help please ?

**certificates** · Dec 11, 2012 17:07

http://www.c5d.co.uk/descriptionworkhouse1911.php

The box at the bottom of this page is made up of a table.

I should like the edges of the cells to be visible so that they all look to be in boxes.

The box is Table-2

Is there anything in this CSS preventing that ?

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;text-align:center;}
#table-2,th,td {border: 1px solid black;}
#table-4, {border-collapse:collapse; border:0px solid black;border-style:hidden;}
#table-4,tr,th,td {border-collapse:collapse; border:0px solid black;border-style:hidden;border-bottom-color:#708090;text-align:left;}

Thanks

**ralph.m** · Dec 11, 2012 17:32

You've set the width of the borders to 0px, so they can't show up. You might also want to remove the border-collapse:collapse rule.

I find divs easier to style than tables, and I'm not sure this is really a place for a table, but perhaps I'm wrong, as I'm not sure what the information in those cells is for.

**ronpat** · Dec 11, 2012 18:33

Why are there 2 doctypes at the top of the page?

**certificates** · Dec 11, 2012 23:16

The border in table=2 is set to one though, and border collapse is only in table 3 & 4.

Surely the border should show up in table 2 ?

Antony

**ronpat** · Dec 11, 2012 23:29

Please delete line number 3 at the top of the page. It contains duplicate tags.
Line #4 is empty. You could delete it, too, if you wish.
In their pace, please add
<html>
<body>

This is what the table looks like in Firefox. How should it be different?
CensusOfHurst.jpg

**certificates** · Dec 11, 2012 23:42

It's OK, I have got it now.

The top table appears to override it all

Thanks

**certificates** · Dec 11, 2012 23:45

Thanks, our posts seem to have crossed.

It works fine. As a beginner I thought I'd done OK with this lot but couldn't sort out the table at the top overriding all the ones underneath

Thanks

Antony

**ronpat** · Dec 11, 2012 23:55

OK, my bad. I was expecting you to delete the HTML4 doctype and keep the XHTML doctype like your other revised pages. If you wish to maintain the XHTML doctype, please do the following:

delete:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<HTML><HEAD><TITLE>The 1911 Census of Hurst</TITLE>

And replace it with:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

**certificates** · Dec 12, 2012 00:21

You mean it should start like this ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<HTML><HEAD>

**ralph.m** · Dec 12, 2012 01:02

Originally Posted by certificates

You mean it should start like this ?

Almost. He meant you to replace it with the exact code he posted, which doesn't include the <head> element twice.

Although, any new sites on the web shouldn't be using the transitional doctypes any more, as they were just to help olden day sites transition to the era of web standards—which has been around for a long time now.

A better way to start your page is with this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

or an even more modern version:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

If you find your site breaks or doesn't validate with a modern doctype, that's a good reason to update the code.

**ronpat** · Dec 12, 2012 01:09

Like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>The 1911 Census of Ashton Under Lyne District Infirmary</title>
    <link rel="stylesheet" href="http://www.c5d.co.uk/censusstyle.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/censusdropdownmenu.css" type="text/css" media="screen" />
    <link rel="stylesheet" id="easy-fancybox.css-css" href="http://www.c5d.co.uk/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4" type="text/css" media="screen" />
    <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>
<div id="wrapper">
    <div id="container" class="container">
<!-- BEGIN menu.php INCLUDE -->
        <div id="header" class="span-24" style="height:180px;">
            <div class="span-12">
                <img src="http://www.c5d.co.uk/c5dbackground.png" alt="my address" height="175" width="650" />
            </div>
            <div class="span-12 last" style="padding-top:30px; text-align:right;"></div>
        </div>
        <div class="span-24">
            <div id="navcontainer">
                <ul id="nav" class="menu">
                    <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="http://www.c5d.co.uk/homepage.php"><img src="http://www.c5d.co.uk/home.gif" alt ="home" /></a></li>
                    <li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">Eng &amp; Wales</a>
                        <ul class="sub-menu">
                            <li id="menu-item-64000" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">England&nbsp;&amp;&nbsp;Wales&nbsp;Certificates</a>
                                <ul>
                                    <li id="menu-item-89"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                                    <li id="menu-item-88"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                                    <li id="menu-item-87"><a href="http://www.c5d.co.uk/pre1858.php">Pre 1858 Probates</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.c5d.co.uk/groups.php">Family&nbsp;Groups</a></li>
                            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://www.c5d.co.uk/research.php">Research&nbsp;Service</a></li>
                            <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.c5d.co.uk/ninthfield.php">Large&nbsp;Orders</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://www.c5d.co.uk/scotland.php">Scotland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.c5d.co.uk/scotland.php">Scottish&nbsp;Certificates</a></li>
                            <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://secure.jotformeu.com/form/20562318766356">Scottish&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.c5d.co.uk/northernireland.php">N.Ireland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.c5d.co.uk/northernireland.php">Northern&nbsp;Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="https://secure.jotformeu.com/form/20562335218347">Northern&nbsp;Ireland&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://www.c5d.co.uk/roi.php">Eire</a>
                        <ul class="sub-menu">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.c5d.co.uk/roi.php">Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://form.jotformeu.com/form/20560737900349">Irish&nbsp;Certificate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="dummy7"><a href="http://www.c5d.co.uk/parishrecords.php">P R Es</a>
                        <ul class="sub-menu">
                            <li id="menu-item-86"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                            <li id="menu-item-85"><a href="https://secure.jotformeu.com/form/20563263008345">Parish&nbsp;Register&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-222 current_page_item menu-item-227"><a href="http://www.c5d.co.uk/censusentries.php">Censuses</a>
                        <ul class="sub-menu">
                            <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"><a href="http://www.c5d.co.uk/censusentries.php">Census&nbsp;Entry&nbsp;Copies</a></li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20563312173343">Census&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/sterlingpayments.php">Payments in £</a>
                        <ul class="sub-menu">
                            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://www.c5d.co.uk/sterlingpayments.php">Make&nbsp;Payments&nbsp;in&nbsp;£</a></li>
                        <li id="menu-item-42000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20562220135338">Order Form</a></li></ul>
                    </li>
                    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.c5d.co.uk/nzcerts.php">NZ</a>
                        <ul class="sub-menu">
                            <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">New&nbsp;Zealand&nbsp;Certificates</a></li>
                            <li id="menu-item-122000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">Order Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/probates.php">Probates</a>
                        <ul class="sub-menu">
                            <li id="menu-item-84"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                            <li id="menu-item-420000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.c5d.co.uk/pre1858.php">Pre&nbsp;1858&nbsp;Probates</a></li>
                            <li id="menu-item-4200000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotform.com/form/20393244360"> Probate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
<!-- END menu.php INCLUDE -->
        <h1>Your Certificates in 5 Days ?</h1>
        <p class="one">There is another way. <a href="http://www.c5d.co.uk">Certificates in 5 Days (C5D)</a> Why not give me a try ?</p>
        <div id="wrapper">
            <div id="advert1">
                <a href="http://www.jdoqocy.com/click-5433512-10520381" target="_top">
                <img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="234x60: I am, your Nan" border="0" /></a>
            </div>
<!--START MERCHANT:merchant name Find My Past from affiliatewindow.com.-->
            <div id="advert2">
                <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588"><img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60" border="0" /></a>
            </div>
<!--END MERCHANT:merchant name Find My Past from affiliatewindow.com-->
            <div class="buttonHolder">
                <button style="width:200;height:30" onclick="window.location='http://www.c5d.co.uk/workhouse1911.php'">Go to the 1911 Census</button>
            </div>
            <p class="censusofenglandandwales1911">CENSUS OF ENGLAND AND WALES 1911</p>
            <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>
                <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>Civil Parish</td><!-- Col 1 -->
                    <td>Ecclesiastical Parish</td><!-- Col 2 -->
                    <td>Borough<p class="two"> or Urban District</p></td><!-- Col 3 -->
                    <td>Ward of Borough <p class="two">or Urban District</p></td><!-- Col 4 -->
                    <td><p class="two">Rural District</p></td><!-- Col 5 -->
                    <td>Parliamentary Borough <p class="two">or Division</p></td><!-- Col 6 -->
                </tr>
                <tr><!-- Row 2 -->
                    <td>Ashton&nbsp;Under&nbsp;Lyne<br />(pt of)</td><!-- Col 1 -->
                    <td>Ashton&nbsp;Under&nbsp;Lyne&nbsp;St&nbsp;Michaels<br />(Part of)</td><!-- Col 2 -->
                    <td>Ashton Under Lyne MB (Pt of)</td><!-- Col 3 -->
                    <td>Ashton&nbsp;Under&nbsp;Lyne&nbsp;St&nbsp;Michaels<br />(Part of)</td><!-- Col 4 -->
                    <td>&nbsp;</td><!-- Col 5 -->
                    <td>Ashton&nbsp;Under&nbsp;Lyne<br />(pt of)</td><!-- Col 6 -->
                </tr>
            </table>
            <div class="buttonHolder">
                <button style="width:150;height:30" onclick="window.location.href='http://www.c5d.co.uk/workhouse1911.php'"> View the Census</button>
            </div>
            <p class="copy">&copy; C5D-Certificates</p>
        </div>
        <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html40" alt="Valid HTML 4.0 Transitional" height="31" width="88" /></a>
    </div>
</div>
</body>
</html>

There is 1 error. Duplicate id names on Lines 18 and 99. You should fix that, but most browsers will forgive if you don't, IN THIS CASE.
Is it usually better to use classes rather than id's unless one MUST be unique. Otherwise, id's are overkill and sometimes troublesome... like now.

I concur with Ralph's comment about doctype's, too. You began your rewrites using the XHTML transitional doctype, so I stuck with that. But frankly, HTML 4.01 strict or XHTML strict would be better. So far, I have seen no justification for the "X" doctype. Even HTML4.01 would have sufficed nicely, and not been so fussy. The most important thing, thought, is to pick one doctype and stick with it throughout your site so the css will behave predictably on all pages.

There were several paragraph tag, table tag, and div tag errors on the page. They have all been fixed.

The remaining error is a case of duplicate id's which is up to you to fix because the code for the id resides on your css.

**certificates** · Dec 12, 2012 01:52

Though not tested as valid HTML yet, that latest <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

Views fine in HTML views fine in IE & Chrome.

I have about 350 pages on this web site so it will take me a long time to adjust them all. However slowly and surely I shall do.

It's work time now so I can't do much more now

Thanks

Antony

**ronpat** · Dec 12, 2012 02:23

This is how the page looks with the HTML5 doctype that you posted. The duplicate ID's still flag an error, and a couple of html attributes are replaced by css. The best web pages are a good marriage between html and css. The validator helps you get there.

CensusOfHurst-2.jpg

Cheers!

**ralph.m** · Dec 12, 2012 03:44

Originally Posted by certificates

I have about 350 pages on this web site so it will take me a long time to adjust them all.

If you are going to do that, it's worth changing the extension to .php and inserting PHP includes, so that you don't have to go through this hell again.

User Tag List

Thread: A tiny bit of table help please ?

Thread Tools

Display

A tiny bit of table help please ?

Bookmarks

Bookmarks

Posting Permissions