SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A tiny bit of table help please ?

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Why are there 2 doctypes at the top of the page?

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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
    Last edited by TechnoBear; Dec 12, 2012 at 09:00.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's OK, I have got it now.

    The top table appears to override it all

    Thanks

  7. #7
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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>

  9. #9
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by certificates View Post
    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.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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.
    Last edited by ronpat; Dec 12, 2012 at 01:22. Reason: add closing statements.

  12. #12
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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!

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by certificates View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •