Scope is a useful accessibility aid and should not be omitted lightly :).
Thank you for the quick notice and the link, Paul. Very much appreciated! 
Thanks for coming back to me.
The scope tags were provided by Paul O B earlier in this thread. It is something that was noew to me. As was CSS in November. Until then, most of this site was in frames!
But I am learning and whenever you suggest anything, I do try and check out why it works rather than just doing it. I have checked out scope and to my simple mind, it is there more as a help to the browser rather than to style anything.
I do find that thanks to your help, my book and google, I am asking less and less which is great, not that I am ungrtaeful for it, but it does mean that I can crack some of this myself.
I look forward to receving your suggestion though this evening.
Antony
Antony, this test page is not a plug-n-play fit for your ed6 page. That will come later.
@Paul_O_B, I would be grateful if you would voice your take on this test page or the issue in general.
The problem was that the rotated text was not vertically centered in the table cells.
On the ed6 page, because the cell height is so short, the text rests at least 1/3 of the distance from the bottom of the cell. The longer rows of rotated text stretch up and overlay the second row.
I borrowed Antony’s table to search for a solution to the Firefox vs transform:rotate bug in table cells. This seems to do the trick and doesn’t seem to have adverse effects on IE but has not been tested in other browsers.
In a nutshell, the solution requires applying negative horizontal margins to the [rotated] paragraphs. Any value larger (more negative) than a calculable minimum seems to work OK.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
This {table-layout:auto|fixed} tested in IE8&9 and FF17,18.
Negative horizontal margins applied to rotated text will compensate for FFs behavior.
( maxtextboxwidth = ~256px ) - td{width:~100px;} = ( 2 margins >= -76px ea )
Without the neg h-margins, FF goes w-i-d-e. It does not seem to recalculate the width of the rotated text boxes.
-->
<head>
<title>Rotation Tester 4d</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
background-color:#708090;
font-weight:bold;
font-style:italic;
font-size:15px;
line-height:1.3;
font-family:"New Century Schoolbook", Times, "Trebuchet MS", "Palatino Linotype", sans-serif;
padding:0;
margin:200px 0 0;
}
/* TABLE */
table {
table-layout:auto; /* auto or fixed work OK */
width:950px;
border-spacing:3px;
margin:0px auto;
}
th,td {
width:9%;
border:1px solid #000;
text-align:center;
vertical-align:middle;
padding:0px 2px;
margin:0px;
}
th.col7,
td.col7 {width:11%;}
th.col8,
td.col8 {width:11%;}
th.col9,
td.col9 {width:24%;}
/* TEXT */
p.rotate {
display:inline-block; /* FF vs {transform:rotate} [in table-cells?] */
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
line-height:1.5;
white-space:nowrap;
letter-spacing:1px;
margin:0 -111px; /* FF vs {transform:rotate} see notes at top of page. *//* Comment Out and watch FF go nuts */
outline:1px solid magenta; /* Delete after TESTING */
border:1px solid cyan; /* Delete after TESTING */
}
/* LIST */
ul {
list-style-type:none;
padding:4px 0 6px;
margin:0;
}
li {
margin:5px auto;
}
/* MISC */
.strike {
display:inline;
text-decoration:line-through;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
p.rotate {
writing-mode:tb-rl;
filter:flipv fliph;
display:inline-block;
*display:inline;
zoom:1.0;
}
</style>
<![endif]-->
</head>
<body id="ed6">
<table class="test">
<tr>
<th scope="col">Cols: 1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th class="col7" scope="col">7</th>
<th class="col8" scope="col">8</th>
<th class="col9" scope="col">9</th>
</tr>
<tr>
<td>Civil Parish</td>
<td>Municipal Borough</td>
<td>Municipal Ward</td>
<td>Urban Sanitary District</td>
<td>Town or Village, or Hamlet</td>
<td>Rural Sanitary District</td>
<td class="col7">Parliamentary Borough or Division</td>
<td class="col8">Ecclesiastical Parish or District</td>
<td class="col9"></td>
</tr>
<tr>
<td><p class="rotate">Ashton Under Lyne</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">Hartshead Prestwich Division</p></td>
<td class="col7"><p class="rotate"><span class="strike">Christ Church Ashton Under Lyne</span><br>Holy Trinity Bardsley</p></td>
<td class="col8"><p class="rotate">Christ Church Ashton Under Lyne<br>Holy Trinity Bardsley</p></td>
<td class="col9">
<ul>
<li>Parsonage</li>
<li>Lordsfield</li>
<li>Taunton Road</li>
<li>Newmarket Road</li>
<li>Oldham Road</li>
<li>Store Street</li>
<li>Langham Street</li>
<li>Gordon Street</li>
<li>Oaken Clough</li>
<li>Buckley Street</li>
<li>Wilshaw Road</li>
<li>Limehurst</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Thanks for this. It works in Chrome & FF, but with a drawback that all of the phrases have a purple and white border around them.
On IE, the words from the first five columns appear to have moved to the left with the wording from the first column being out of the box and column five being empty.
The jumbled mess though is solved perfectly
Thanks
Antony
Antony, THE TEST CODE IS NOT MEANT TO BE PLUGGED INTO YOUR PAGES AS-IS. THE CSS IS INCOMPLETE AND NOT SPECIFIC ENOUGH.
I am working on “cutover” instructions right now and compatible css. PLEASE BE PATIENT.
Antony, the purple borders are part of the TEST PAGE. NOT MEANT OTHERWISE. I think you are mixing the css in the test page with existing css. It will not work. Please be patient. I will send workable code to you shortly with instructions for implementing it.
Antony,
This is the code for a working ed6 page. It is not quite the same as your original. Please try it exactly as-is. It will not look normal until we modify the css.
Make the similar HTML tables on the other pages look just like this by (1) adding classes to the last 3 columns in each row, (2) by removing the class=“col9” from the column 9 <p> tag, and (3) by removing id=“col9” from the <th> tag in the first row.
(4) IMPORTANT! ADD the IE specific code just above the </head> tag to all pages that use the rotated text. THAT IS Paul’s code for IE8- AND IS NOT OPTIONAL.
The other pages will have a paragraph in row3 col9 whereas this page has a list. OK? If you can’t live with the list, then keep your existing paragraph full of break tags. The list is better, though.
I would be grateful if you would use this page instead of transferring the changes to your existing page. The indented code is much easier to read. If you can’t live with that, so be it.
The HTML must be modified on all of the similar “ed” pages for the css to style the table.test properly.
css changes will follow shortly.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The 1891 Census of Hartshead Enumeration District 6</title>
<meta charset="utf-8">
<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">
<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>
<!--[if lte IE 8]>
<style type="text/css">
p.rotate {
writing-mode: tb-rl;
filter: flipv fliph;
display:inline-block;
*display:inline;
zoom:1.0;
letter-spacing:1px;
width:auto;
}
</style>
<![endif]-->
</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 -->
<?php include $_SERVER["DOCUMENT_ROOT"] . "/includes/menu.php"; ?>
<!-- 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="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&v=2114&q=126749&r=127588">
<img src="http://www.awin1.com/cshow.php?s=265538&v=2114&q=126749&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/ed61891.php'">Go to the 1891 Census</button>
</div>
<p class="censusofenglandandwales1911">CENSUS OF ENGLAND AND WALES 1891</p>
<table class="table-3">
<tr><!-- Row 1 -->
<td>Registration District</td> <!-- Col 1 -->
<td>Ashton Under Lyne</td> <!-- Col 2 -->
<td>Enumeration District, No. </td> <!-- Col 3 -->
<td>6</td> <!-- Col 4 -->
</tr>
<tr> <!-- Row 2 -->
<td>Registration Sub District</td> <!-- Col 1 -->
<td>Hartshead</td> <!-- Col 2 -->
<td>Name of Enumerator, Mr.</td> <!-- Col 3 -->
<td>Henry Charlesworth</td> <!-- Col 4 -->
</tr>
</table>
<p class="local">DESCRIPTION OF ENUMERATION DISTRICT</p>
<p class="tobefilled">[The description of the District is to be written in by the Enumerator in Column 9c from the copy supplied to him by the Registrar. Any explanatory notes or observations calculated to make the description clearer or more complete, may be added by the Enumerator. It is especially necessary that the names of the various Local Sub-Divisions should be inserted in Columns 1 to 8.]</p>
<table class="test">
<tr>
<th scope="col">Cols: 1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th class="col7" scope="col">7</th>
<th class="col8" scope="col">8</th>
<th class="col9" scope="col">9</th>
</tr>
<tr>
<td>Civil Parish</td>
<td>Municipal Borough</td>
<td>Municipal Ward</td>
<td>Urban Sanitary District</td>
<td>Town or Village, or Hamlet</td>
<td>Rural Sanitary District</td>
<td class="col7">Parliamentary Borough or Division</td>
<td class="col8">Ecclesiastical Parish or District</td>
<td class="col9"></td>
</tr>
<tr>
<td><p class="rotate">Ashton Under Lyne</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">Hartshead Prestwich Division</p></td>
<td class="col7"><p class="rotate"><span class="strike">Christ Church Ashton Under Lyne</span><br>Holy Trinity Bardsley</p></td>
<td class="col8"><p class="rotate">Christ Church Ashton Under Lyne<br>Holy Trinity Bardsley</p></td>
<td class="col9">
<ul>
<li>Parsonage</li>
<li>Lordsfield</li>
<li>Taunton Road</li>
<li>Newmarket Road</li>
<li>Oldham Road</li>
<li>Store Street</li>
<li>Langham Street</li>
<li>Gordon Street</li>
<li>Oaken Clough</li>
<li>Buckley Street</li>
<li>Wilshaw Road</li>
<li>Limehurst</li>
</ul>
</td>
</tr>
</table>
<div class="buttonHolder">
<button style="width:150;height:30" ONCLICK="window.location.href='http://www.c5d.co.uk/ed61891.php'"> View the 1891 Census</button>
</div>
</div>
<p class="copy">©C5D-Certificates</p>
</div>
</body>
</html>
Cheers
Line 146 on your css sheet is the beginning of the table.test code.
DELETE everthing from that line through the end of the page and replace it with the following css.
(NOTE: Not everything was modified but most was.)
/* TABLE.test */
.test {
table-layout:auto;
width:950px;
border-spacing:3px;
margin:0px auto;
}
.test th,
.test td {
width:9%;
border:1px solid #000;
text-align:center;
vertical-align:middle;
padding:2px 0 1px;
}
.test th.col7,
.test td.col7 {width:11%;}
.test th.col8,
.test td.col8 {width:11%;}
.test th.col9,
.test td.col9 {width:24%;}
/* TEXT */
.test p {
margin:.2em .1em .4em;
}
.test p.rotate {
display:inline-block;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
line-height:1.5;
white-space:nowrap;
letter-spacing:1px;
margin:0 -111px;
}
/* LIST */
.test ul {
list-style-type:none;
padding:4px 0 6px;
margin:0;
}
.test li {
margin:5px auto;
}
/* MISC */
.strike {
text-decoration:line-through;
display:inline;
}
.csstest {
display:inline;
vertical-align:super;
}
This has been tested with the pages ed1, ed4, ed6, and ed12.
If this, in combination with the HTML changes, doesn’t fix table.test, let me know.
Cheers
Thanks for the message.
I am very happy to be patient. After all you guys have done for me, some of it very late at night I guess, and gratis, how could I be anything but. I just thought that you might value the feedback
I shall await your “final design”
Thanks
Antony
You mean you haven’t received a bill yet??? 
Everything that I have written has been posted. I would have preferred for Paul to weigh in on my code, since I’ve never delt with rotated text before AND never run into that Firefox anomaly, either, so there is plenty of room for errors of inexperience in this particular problem.
Anyway, if something doesn’t work as desired, let us know.
Thanks.
So far I have done with with ED6.
I have posted your code as is, and altered the CSS from line 146 as you said.
It works perfectly in Chrome and Firefox, but in IE the first fiv columns appear to have shunted to the lwft with the result that col 5 is empty and the that words from col 1 are outside the box
Have I not done it right ?
Antony
I guess I must have done it wrong because having now done ED1, All the text from the first 6 columns has moved left too.
It was a good test though to include the wrong php include in your code !! Testing me to see if I was awake (;-)))
Oops, sorry about the php code. I copied it from an old note. Glad you spotted it. What is the correct call?
This must be a problem with IE9. IE8 and Firefox render the page perfectly. Do you have Chrome? Can you compare Firefox with Chrome?
No, I don’t see that you’ve done anything wrong. It’s most likely a problem with my css and cross browser compatibility. I’ll keep tinkering, but I do need to get some sleep now. It’s after 5am local time.
Thanks,
Ron
Yes do have some sleep.
I have chrome ff and ie. In ie some of the columns shunt left. In th eother two they are fine but on some of the ed’s col 9 is narrow and others not
That suggests I haven’t done evrything quite right either
Thanks again
Antony
[FONT=Verdana]Yes, the HTML is important, and the IE compatibility piece near the top of the page is vital. It is OK to update the HTML on all of the pages. The only page that will look funny is ed6 because of the list code and you can always copy and paste the list piece from my css into your css and that will get rid of the bullets.
I just had an idea…
Just for fun, please make the following changes to two properties in my css and try it again.
FROM:
.test p.rotate {
display:inline-block;
margin:0 -111px;
}
TO:
.test p.rotate {
display:block;
margin:0 -92px;
}
[/FONT]
I have done that thanks and it does the trick
However I have had to change it to -45px; My site is now exactly how I want it to be with the exception of one or validation errors which I suspect are really resolvable because it is from Paypal and XE.com
This is the page.http://www.c5d.co.uk/scotland.php
I guess it is better to post a new thread
Thanks all of you for your help, it has been absolutely great. Prompt and clear.
I am glad I joined this group, it has been a great experience
Antony
[FONT=Verdana]Antony, PLEASE check the css again. The column widths are out of whack.
.test p.rotate {
[COLOR="#FF0000"]display:inline-block[/COLOR]; /* HAS NOT CHANGED YET */
[COLOR="#ff0000"]margin:0 -45px;[/COLOR] /* not cross-browser compatible */
CHANGE TO THIS
.test p.rotate {
[COLOR="#0000FF"]display:block;[/COLOR]
[COLOR="#0000FF"]margin:0 -90px;[/COLOR]
IN ADDITION: This was missed!
Look at Row3 Column9 on ALL PAGES.
VERIFY that class=“col9” is assigned to the <td> tag, NOT to the <p> tag.
Page ed11891 Row1 Column6 has a stray “>” mark beside the number 6
Take care,
Ron[/FONT]
I have now done this, and everything looks OK.
Thanks for that additional adjustment.
It finishes it off great
Antony
Good work Ron
Sorry for the late reply but been busy with a project last night and looking after 3 grandkids today so not much time on my hands
The problem was that the rotated text was not vertically centered in the table cells.
Yes that was the issue I ran into and the reason I forced the width of the cell in my last example. The width forces the content to be centred and will hold multiple wrapping lines until they overflow the width.
In your example the negative margins effectively do the same thing as the width I applied and if you have longer lines then they will overflow the height of the table because of the white-space:nowrap rule you have in place. If you remove the white-space:nowrap rule the text will wrap naturally but as in my example it will overflow the width.
The thing you need to remember is that although the text is rotated the layout should not be affected so the cells will look like they would had the text not been rotated.
In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the ‘overflow’ property is ‘scroll’ or ‘auto’, scrollbars will appear as needed to see content that is transformed outside the visible area.