A quick bit of advice about the <pre > tag

HTML & CSS
1

I have been advised to use it in stead of nbsp;

I have tried it bit seems to work sporadically.

See www.c5d.co.uk/kimmeridge1911.php

Under the first family there is a box which begins I certify that…

<pre> has been used to indent the text on the rows beginnning and and the which works fine. But the third one seems to be doubly indented. Why?

2

You forgot the bacticks around <pre>

For the benefit of any others that may try to use their browsers “find” the word is not certify, but “certifiy”

<td colspan="3" rowspan="3">I certifiy that:—<br>
		(1.) All the ages of this Schedule are entered in the proper sex columns.<br>
		(2.) I have counted the males and females in Column 3 and 4 separately,<br><p class="padding"> and have compared their sum with the total number of persons.</p>
	    (3.) After making the necessary enquiries I have completed all the entries on<br><p class="padding">the Schedule which appeared to be defective, and have corrected</p><p class="padding">such as appeared to be erroneous.</p>
		<p class="ifonly">Initials of Enumerator &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G.E.B &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></td>

I’m not seeing any <pre> tags. You mean <p> tags?

1 Like
3

They are in this part, starting line 403, on line 406 and 409:-

<td colspan=5 rowspan=6><p class="table1911alignleft"><br>I certifiy that:—<br>
(1.) All the ages of this Schedule are entered in the proper sex columns.<br>
(2.) I have counted the males and females in Column 3 and 4 separately,<br>
<pre>     </pre>and have compared their sum with the total number of persons.<br>
(3.) After making the necessary enquiries I have completed all the entries on<br>
<pre>     </pre>the Schedule which appeared to be defective, and have corrected<br>
<pre>     </pre><p="table1911alignleft">such as appeared to be erroneous.</p><br>
<p class="initials">Initials of Enumerator      G.E.B</p></td>

By who?
If you want indents, use css text-indent.
This is not the purpose of the pre element.
In this case I think semantically the text should be an ordered list. Using a list you should be able to get an indent with the list-style-position property.

<td colspan=5 rowspan=6>
 <p class="table1911alignleft">I certifiy that:—</p>
 <ol>
  <li>All the ages of this Schedule are entered in the proper sex columns.</li>
  <li>I have counted the males and females in Column 3 and 4 separately and have compared their sum with the total number of persons.</li>
  <li>After making the necessary enquiries I have completed all the entries on the Schedule which appeared to be defective, and have corrected such as appeared to be erroneous.</li>
 </ol>
 <p class="initials">Initials of Enumerator      G.E.B</p>
</td>
5 Likes
4

Thanks. I have a friend who works at the RNIB. He tells me lots of nbsp; characters confuse the readers they have.

This is an example of what I was trying to constructs

787×221 97.5 KB

5

Hi there certificates,

here is one possible solution…

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.5em arial, helvetica, sans-serif;
 }
#enumerator {
    border: 0.2em solid #000;
    border-collapse: collapse;
    margin: auto;
    background-color: #fff;
    font-size: 0.9em;
 }
#enumerator th,
#enumerator td {
    padding: 0 0.5em;
 }
#enumerator td {
    border-right: 0.06em solid #999;
    text-align: center;
 }
#enumerator td:nth-child(3) {
    border-right: 0;
 }
#enumerator th {
    border-bottom: 0.06em solid #999;
 }
#enumerator th:nth-child(1),
#enumerator th:nth-child(2) {
    border-right: 0.06em solid #999;
 }
#enumerator ol, 
#enumerator p:nth-child(1) {
    text-align: left;
    text-indent: 2.75em;
 }
#enumerator li {
    padding-left: 1.5em;
    padding-right: 1em;
    text-indent: -1.5em;
 }
</style>
</head>
<body> 
<table id="enumerator">
<tr>
 <td rowspan="3">
  <p>I certifiy that:—</p>
   <ol>
    <li>All the ages of this Schedule are entered in the proper sex columns.</li>
    <li>I have counted the males and females in Column 3 and 4 separately,<br>
        and have compared their sum with the total number of persons.</li>
    <li>After making the necessary enquiries I have completed all entries on<br>
        the Schedule which appeared to be defective, and have corrected<br>
        such as appeared to be erroneous.</li>
   </ol>
  <p>Initials of Enumerator</p>
 </td>
  <th colspan="3">Total</th>
</tr><tr>
 <th>Males</th>
 <th>Females</th>
 <th>Persons</th>
</tr><tr>
 <td>2</td>
 <td>2</td>
 <td>4</td>
</tr>
</table>
</body>
</html>

coothead

2 Likes
6

I came up with this that might work responsively - IF - you can do without numbers or find a way to replace them.

ol {
 padding-left: 2em;
 list-style-type: none;
}
li:before {
 content: "(#)";
 margin-left: -5em;
 width: 1em;
/* opacity: 0; */
}
li {
 margin-left: 5em;
}

695×338 661 KB

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.