A tiny bit of table help please?

certificates · December 11, 2012, 11:07pm

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

ralphm · December 11, 2012, 11:32pm

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 · December 12, 2012, 12:33am

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

certificates · December 12, 2012, 5:16am

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 · December 12, 2012, 5:29am

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?

certificates · December 12, 2012, 5:42am

It’s OK, I have got it now.

The top table appears to override it all

Thanks

certificates · December 12, 2012, 5:45am

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 · December 12, 2012, 5:55am

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:


<!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:


<!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 · December 12, 2012, 6:21am

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>

ralphm · December 12, 2012, 7:02am

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:

<!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:

<!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 · December 12, 2012, 7:09am

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">
<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 · December 12, 2012, 7:52am

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

<head>

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 · December 12, 2012, 8:23am

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.

Cheers!

ralphm · December 12, 2012, 9:44am

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.