SitePoint Sponsor

User Tag List

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

    Problem with a table layout

    I have a problem with a two tables. The problem is that although they are both styled table-2 the widths of the columns in each table are different.
    Is it possible for them to be the same ? I have read my book, and scoured the web, put cannot crack this bit.

    Also, you will see in the HTML that there is a <hr color="black"> The checker says that this is no longer acceptable, but apparantly hr cannot be coloured or so I read. If this is resolvable, that would be great. I did try styling it as hr {color: #000000} but it didn't work. All I want is a black line !

    The web page is at: http://www.c5d.co.uk/description1911ed1.php

    I'd like to resolve this because I have twenty of these pages !

    Thanks as always

    Antony


    This is the relevant CSS

    table {margin:auto;font-size: 15px;font-style:italic; font-weight:bold;}
    td{font-weight:bold; font-style:italic;}
    #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 td,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;}

    This is the HTML

    <hr color="black">
    <p class="local">Boundary of Enumeration District</p>
    <p class="local">On the north and northwest by the civil parish of Bardsley, on the south by the civil parish of Ashton Under Lyne, on the east by the civil parishes of Hurst and Hartshead and on the west by that portion of the civil parish of Waterloo which is in the Knott Lanes sub district.</p>
    <hr color="black">
    <p class="censusofenglandandwales1911">Contents of Enumeration District</p>
    <br>
    <p class="local">If the Enumeration District extends into more than one Civil Parish, Ecclesiastical Parish, Parliamentary Division etc., state the name in Column 1, and show the Contents separately in Column 2 opposite the respective names in Column 1; after each division of the Enumeration District draw a line across the page.
    </p><table id="table-2" >
    <tr><!-- Row 1 -->
    <td>COLUMN 1</td><!-- Col 1 -->
    <td>COLUMN 2</td><!-- Col 2 -->
    <td>COLUMN 2</td><!-- Col 3 -->
    <td>COLUMN 2</td></tr>
    <tr><td>Ecclesiastical Parish</td><!-- Col 1 -->
    <td>Lordsfield (3 Cottages)</td><!-- Col 2 -->
    <td>Langham Street</td><!-- Col 3 -->
    <td>Wilshaw Road up to Wilshaw Farm </td><!-- Col 3 -->
    </tr>
    <tr><!-- Row 3 -->
    <td>Ashton Under Lyne Christ Church Part of</td><!-- Col 1 -->
    <td>Elgin Street N<sup>os</sup> 53 to 61 odds</td><!-- Col 2 -->
    <td>Clive Street</td><!-- Col 3 -->
    <td>Gordon Street</td><!-- Col 3 --></tr>
    <tr><!-- Row 3 -->
    <td>Ashton Under Lyne Christ Church Part of</td><!-- Col 1 -->
    <td>Elgin Street N<sup>os</sup> 53 to 61 odds</td><!-- Col 2 -->
    <td>Clive Street</td><!-- Col 3 -->
    <td>Gordon Street</td><!-- Col 3 --></tr>
    <tr><!-- Row 5 -->
    <td> </td><!-- Col 1 -->
    <td>Taunton Road Crowhill House Milton Villas and <P class="two">94</p> 90 to 146 even Thornfield Fern Lea Hazel Dene Oaklands Gardener's Arms and N<sup>os</sup> 95 to 135 odd</td><!-- Col 2 -->
    <tD>Cavendish Street</td><!-- Col 3 -->
    <td>Store Street</td><!-- Col 4 -->
    </tr>
    <tr><!-- Row 6 -->
    <td> </td><!-- Col 1 -->
    <td> </td><!-- Col 2 -->
    <td>Walton Street</td><!-- Col 3 -->
    <td> </td><!-- Col 4 -->
    </tr>
    </table>
    <hr color="black">

    <table id="table-2" >
    <tr><td>Ecclesiastical Parish: Bardsley Holy Trinity (Part of)</td><!-- Row 1 -->
    <td>Oldham Road N<sup>os</sup> 255 to 305 Odd and 312 to 384 even and Glendor including Strafford House off the road</td><!-- Col 2 -->
    <td>Limehurst Farm and Cottage</td><!-- Col 3 -->
    <td>Oaken Clough and 2 Cottages off</td><!-- Col 4 -->
    </tr>
    <tr><!-- Row 2 -->
    <td></td><!-- Col 1 -->
    <td>Limehurst Road</td><!-- Col 2 -->
    <td>Buckley Street and 4 Cottages off</td><!-- Col 3 -->
    <td></td></tr>
    </table>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The columns find their own widths based on their content. If you want to force a width, you need to set them via CSS. You could give each column a class and set a width.

    Regarding the <hr>, you should be able to style it black, but still, it's better to use CSS for this rather than an HTML element. This would do it:

    Code:
    #table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
    #table-2 + #table-2 {margin:0; padding: 0; border: none;}
    However, you have broken the most basic rule for IDs. You can only use them once per page. So change id="table-2" to class="table-2", and then change the above code to

    Code:
    .table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
    .table-2 + .table-2 {margin:0; padding: 0; border: none;}
    You can do all that more efficiently with CSS3, but it's not as reliable. It might be better to give a special class to the first table for this styling, rather than having to set the rule and then remove it.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HR works in the table but there are two more HRs that have now turned white ?

    Also the adjustment to the table has removed the internal borders within the table.

    What I want it to look like is

    http://www.c5d.co.uk/description1911ed1.htm The actual page is http://www.c5d.co.uk/description1911ed1.php

    I shall try working on this tonight after work

    Thanks

    Antony

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hm, not sure where those cell borders went. You could do something like this:

    Code:
    .table-2 td {border: 1px solid #000;}
    Use borders instead of <hr> throughout your document—o do the same wherever you want a horizontal line. You could put a bottom border on a <p>, par example.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .table-2 td,th,td {border: 1px solid black;}
    .table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}

    Works to a certain extent. It gives me a bottom margin on the second table which I don't want though. Easy to resolve though by renaming the table and removing the border bottom elements I guess.

    I guess I shall have to set each column width as 15 50 15 20 % or similar. Will try tonight

    Thanks

    Antony

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I was suggesting the above code in addition to the previous code, which wiped out the border bottom on the second table.

    Quote Originally Posted by certificates View Post
    .table-2 td,th,td {border: 1px solid black;}y
    Not that this code will apply to a td in .table-2 and to every th and td on the page. You prolly meant

    Code:
    .table-2 th, .table-2 td {border: 1px solid black;}

  7. #7
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I have actually used is this and it works a treat

    .table-2 td,th,td {border: 1px solid black;}
    .table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
    #Row1 {width:15%; }
    #Row2 {width: 50%;}
    #Row3 {width: 15% }
    #Row4 {width: 20% }
    .table-5 td,th,td {border: 1px solid black;}
    #Row5 {width:15%; }
    #Row6 {width: 50%;}
    #Row7 {width: 15% }
    #Row8 {width: 20% }

    Just need to sort out the two HRs now. How to get them black

    Thanks

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Antony, be aware that ALL <th> and <td> elements in ALL tables are being given this black border. NOT just the ones in .table-2 and .table-5 .

    .table-2 td,th,td {border: 1px solid black;}

    If targeting matters, please see Ralph's post #6 for the syntax that targets only those two tables.

    If targeting does not matter, then you can simplify your code by deleting everything before and including the first comma, leaving only th,td {border: 1px solid black;}, and deleting the .table-5 line entirely.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Antony, your example shows that you have "id"d <td> elements as "Row-number"... <td id="Row1"> for example.

    Be aware that this might be confusing because <td> elements are columns, not rows.

    A more informative naming convention would be <td class="Col1"> , etc.

    Note that I used "class" instead of "id".
    ID's are unique. Classes can be repeated. There would be no need to create *5, *6, *7, and *8 if you used classes. You could just repeat the classes in the second table, <td class="Col1"> etc, in both tables as needed.


    Finally, please DELETE the stray <p> tag from the start of line 105. It has been following you for many pages.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    (1) Oops, I forgot to subtract the line count in the php include. Without the php include, the line number should be 29 or 30.
    The following is the line with the stray <p> tag. The leading <p> tag needs to be deleted.

    <p><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>

    (2) New on this page, on line 59, there is no closing </td> tag at the end of column2, after the word "of". Needs to be added.

    (3) One more missing tag and we're done. This one's been around for awhile, too. At this time, there is no close tag for <div id="wrapper">. This will fix it.
    Add a </div> tag immediately above|before the </body> tag.

    Cheers

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Antony, if you simply want to replace an <hr> tag, try replacing it with this...

    The CSS:
    Code:
    .hr0 div {
        width:96%;
        height:0;
        border:1px solid #000;
        margin:7px auto;
    }
    The HTML:
    Code:
    <div class="hr0"><div></div></div>

  12. #12
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input. I don't want to replace the HR, but make it black which is what it looked like in FF, but nor in Chroem or IE. I have found this example by searching and whilst the original author had a red line, it was easy enough to turn it black by changing the colour.


    hr {
    border: 0; width: 100%;color: #000; background-color: #000; height: 2px;

    I have amended the HTML. The HTML checker I used did not pick up the missing TD, nor the extra <p>. The missing div appears on all of the current set up and is being replace as I change them all.

    This stylesheet is only for this 1911 census, so the TD classes/ids are fine.

    Thanks all for the help.

    I'm sure I'll be back !

    Antony

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Smashing!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by certificates View Post
    Thanks for the input. I don't want to replace the HR, but make it black
    Some browsers use background-color to color the hr and some use color so you need to set both strangely enough. In IE7 and under it is impossible to collapse the default margins in the hr and the gap will always be bigger.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    hr {
    	border:none;
    	padding:0;
    	margin:0;
    	font-size:0;
    	overflow:hidden;
    	height:1px;
    	background:red;
    	color:red;
    }
    </style>
    </head>
    
    <body>
    <hr>
    <hr>
    <hr>
    </body>
    </html>


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
  •