Back with a Problem about vertical alignment

**certificates** · Dec 30, 2012 09:50

Having been away for a few days, I am back with a problem.

I have a page which is loaded at www.c5d.co.uk/descriptioned11891.htm.

Is there any way I can do this with a stylesheet and the php page I am using. An example of the PHP is at http://www.c5d.co.uk/descriptioned11901.php

I have tried and my best shot looks ridiculous at http://www.c5d.co.uk/descriptioned11891.php

Thanks for any help

Antony

**Paul O'B** · Dec 30, 2012 11:02

Hi,

I'm not quite sure what you are asking exactly but the cell content can be aligned to the top with this:

Code:

#description td{vertical-align:top}

**certificates** · Dec 31, 2012 00:22

Originally Posted by Paul O'B

Hi,

I'm not quite sure what you are asking exactly but the cell content can be aligned to the top with this:

Code:

#description td{vertical-align:top}

What I am trying to do is transform the table which has vertical text in the htm page, to one which will look the same in php.

As the text has to be rotated/flipped to show vertically, then I guess you meant #description td{vertical-align:bottom}, but either way I can't get this to work with CSS

Maybe one to leave as it is ?

Thanks

Antony

**thovo** · Dec 31, 2012 03:23

Could you please attach an image to describe what you want to do?
I have a code here to help you do as your php page, please check:
#description td{font-weight:bold;}
Please remove vertical-align:top if you want the text center the box, remove text-align:center if you want the text move to left.
Is it okay?

**Paul O'B** · Dec 31, 2012 05:30

Originally Posted by certificates

What I am trying to do is transform the table which has vertical text in the htm page, to one which will look the same in php.

I looked at the page and I saw no vertical text so I assumed you meant vertical alignment. I now see that you had only implemented this for IE but you neglected to mention this so that when I looked in Firefox there was no vertical text.

to one which will look the same in php.

php has nothing to do with this as all a browser really understand is html. How you deliver the html makes no difference to a browser as all it sees in the end is html (just view source in the browsers and all you see is html). If you have a coding question about php then that belongs in the php forum.

Back to your original question and if you want to rotate text in a table then you will need to rotate the text and not the cell itself. here is an example that works back to IE7(and probably further).

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">
table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
	border:1px solid #000;
	width:150px;	
	text-align:center;
}
.test td{vertical-align:middle;}
p.rotate{
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	-ms-transform: rotate(-90deg); 	
	transform: rotate(-90deg);
	white-space:nowrap; 
}
</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;
letter-spacing:1px;
}
</style>
<![endif]-->
</head>


<body>
<table class="test" cellspacing="0" cellpadding="0">
		<tr>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
		</tr>
		<tr>
				<td><p class="rotate">Rotated Heading</p></td>
				<td><p class="rotate">Rotated Heading with longer text</p></td>
				<td><p class="rotate">Rotated Heading</p></td>
				<td><p class="rotate">Rotated</p></td>
				<td><p>Commencing at one house in Mossley Road, then all houses in Queen Street from No 1 to Hurst Cross then all houses in Hope Street from No 9 to 179, then all houses in Hope Street from No 2 to 152 then 280 Whiteacre Road and one house in Russel Street, two houses in Back Hope Street, and all houses in Chapel Street and at Old Carrs, then all houses at Crompton Street near Carrs Weaving Shed, the whole in the Parliamentary Borough of Ashton Under Lyne. </p></td>
		</tr>
</table>
</body>
</html>

Hope that helps.

**certificates** · Dec 31, 2012 11:41

This helps tremendously and it works in the three browsers I have tried.

There is just one minor point, I should like to adjust, if it is possible.

I should like column 9 to be about 1/3 of the width, and the other 8 columns to take up the other 2/3rds.

Is it possible to style the column widths. The reason for that is that column 9 has a lot of text and by compressing the width, it forces a very tall table. A wider column 9 would give a shorter table which the ultimate desire.

One to play around with I think but this really is a great help

Thanks very much

Antony

**ronpat** · Dec 31, 2012 18:55

Originally Posted by certificates

There is just one minor point, I should like to adjust, if it is possible.

I should like column 9 to be about 1/3 of the width, and the other 8 columns to take up the other 2/3rds.

Is it possible to style the column widths. The reason for that is that column 9 has a lot of text and by compressing the width, it forces a very tall table. A wider column 9 would give a shorter table which the ultimate desire.

Antony, try assigning a class to column 9. Maybe call it ".col9".

Then, in css, assign a % width to that class.

See if that works for you.

PS: Your css has errors. Try writing your code in a consistent, predictable pattern. It becomes much easier to read, and errors are easier to spot.

**Paul O'B** · Jan 1, 2013 10:31

As Ron said you can try applying a width to the end column but you may find that the other columns will not all be the same width. This is because the text pushes the cell wide due to the white-space:nowrap rule and although when the text is rotated it is narrower the cell will not adjust with it.

You'd probably have to do something like this:

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">
table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
	border:1px solid #000;
	width:150px;	
	text-align:center;
}
.test .content{width:300px;}
.test td{vertical-align:middle;}
p.rotate{
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	-ms-transform: rotate(-90deg); 	
	transform: rotate(-90deg);
}
</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;
letter-spacing:1px;
}
</style>
<![endif]-->
</head>


<body>
<table class="test" cellspacing="0" cellpadding="0">
		<tr>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th scope="col">Table Head</th>
				<th class="content" scope="col">Table Head</th>
		</tr>
		<tr>
				<td><p class="rotate">Rotated Heading</p></td>
				<td><p class="rotate">Rotated Heading with longer text</p></td>
				<td><p class="rotate">Rotated Heading</p></td>
				<td><p class="rotate">Rotated</p></td>
				<td><p>Commencing at one house in Mossley Road, then all houses in Queen Street from No 1 to Hurst Cross then all houses in Hope Street from No 9 to 179, then all houses in Hope Street from No 2 to 152 then 280 Whiteacre Road and one house in Russel Street, two houses in Back Hope Street, and all houses in Chapel Street and at Old Carrs, then all houses at Crompton Street near Carrs Weaving Shed, the whole in the Parliamentary Borough of Ashton Under Lyne. </p></td>
		</tr>
</table>
</body>
</html>

**certificates** · Jan 5, 2013 01:05

Thanks for the help an I'm sorry for the delayed reply but I have been away

This is what eventually worked

Thanks for the help

Antony

table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
border:1px solid #000;
width:150px;
text-align:center;
}
.test td{vertical-align:middle;}
p.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space:nowrap;
width: 100px;
}

.test tr {width:50px; }
.col9 {width: 250px; height: 500px;}

**ronpat** · Jan 5, 2013 03:47

http://www.c5d.co.uk/descriptioned11891.php

Impressive, Antony! I've never used rotations. This looks like quite an accomplishment.

I have a few bits of feedback for you, if you're interested.

For starters... Line 40 on the descriptioned11891.php page begins with a stray <p> tag.
<p><table class="table-3">
The stray <p> tag should be deleted. (Is that the one that's following you around? If so, break out the sledge hammer and squash it!!!)

Very oddly, the page does not have an open <head> tag. There should be an open <head> tag just beneath the
<html lang="en"> tag. Are you bringing in part of the head with a php "include" call or was this just an "oops"?

Even stranger, the validator that Firefox uses didn't complain about the missing <head> tag which makes me wonder if the validator is out of date or if the standards for writing HTML5 are different than HTML4. Dunno.

The vertically aligned table columns look like books on a shelf. Really cool. Don't know if this matters to you or not, but I glanced at the books on my shelf and noticed that the titles read from top to bottom, 180 degrees from the orientation that you chose. Like I said, that's just an observation.

One more observation that might matter is that the table has become too wide. Wider than the #container width of 950px. That gives the table an "off center" look, and indeed, in a 4x3 monitor, it begins pushing off the right edge of the viewport. You might want to reconsider the widths of the columns of that table in order to reduce its fixed width.

I ran through some example widths and found that the following seemed to work nicely to my eyes.

The attached screen shots show your current settings in the Before view, and these settings in the After view for comparison purposes. Be sure to note the horizontal scroll bar in the Before view.

Line 148

Code:

.test th, .test td {
    border: 1px solid #000000;
    text-align: center;
    width: 150px;    /* Delete this width property */
}

Line 154

Code:

p.rotate {
    transform: rotate(-90deg);
    white-space: nowrap;
    width: 85px;     /* Change from 100px to 80-90px to reduce the width of the columns with rotated text. */
}

Line 163

Code:

.test tr {           /* Delete this rule entirely */
    width: 50px;
}

Line 164

Code:

.col9 {              /* Delete this paragraph rule entirely (See next note about padding.) */
    height: 500px;   /* Delete.  Way too tall.  Fixed heights are inflexible. */
    width: 250px;    /* Delete.  A width is unnecessary; this is too wide anyway. */
}

NOTE: If you want more space beneath the column9 paragraph, add a little padding to the bottom of the paragraph.

Code:

.col9 {
	padding-bottom:2em;    /* or thereabouts */
}

- - BEFORE - - - - - - - - - - - AFTER - -
Antony-Before.jpg - - Antony-After.jpg

Cheers

**Paul O'B** · Jan 5, 2013 05:50

Good work Ron

The design will also need the fixes from my post #8 to make it work in ie8 and under.

**ronpat** · Jan 6, 2013 22:11

Antony, while working on the table issue, I realized that the #advert2 image also extends outside of the width of #container 14px to the right. Fortunately, it's easy to fix.

Then I realized that the black line underneath the ads is probably unintentional, so that has been "fixed", too, and also restored in such a way that it is under your control. In other words, you can delete it or change its height if you wish.

At present, lines 114 and 116 contain strings of properties, most of which are counterproductive or useless. Change both lines so they contain only the float properties show below. Then add the two new rules. The last rule also controls that bottom black line. Pretty simple, huh?

censusstyle.css

Line 114:

Code:

#advert1 {float:left;}

Line 116:

Code:

#advert2 {float:right;}

ADD:

Code:

#advert1 a, #advert2 a {display:block;}

ADD:

Code:

a img {display:block; border-bottom:4px solid #000;}

**certificates** · Jan 7, 2013 00:56

Thanks for the comments.

First off the rotates were given to me earlier in the thread, and they work fine, It's not my invention unfortunately.

However when you suggent modifying the Col9 section, then I don't know if what you are suggesting is practical. There are 17 EDs, to do, though as yet I have only done 12. and the content in each box varies. Whilst there is little text in some, there is lots in others. This one has the most however, http://www.c5d.co.uk/descriptioned41891.php and the box size is set for this one.

There is a minor problem with http://www.c5d.co.uk/descriptioned121891.php in that there was a crossing out and when I use the text line through it sends the text to the bottom even though the CSS has in line included. Any thoughts ? .strike {text-decoration:line-through; display:inline;} On http://www.c5d.co.uk/descriptioned61891.php it just leaves a jumbled mess. It works on all other deletions.

I have made the adjustments to the advert but I think that you meant a img {display:block; border-bottom:4px solid #708090;} and not a img {display:block; border-bottom:4px solid #000;} as this still left the black line round, but by changing the colour it worked. So thanks it's great

I do take your point about colum 9 extending outside the margin, but if I were to narrow it, then because of the amount of text it would look ridiculously narrow.

On a seperate point, and I guess this is HTML rather than CSS, several of my pages have a currency converter from xe.com and the HTML checker says that there are 8 errors. I'm damned if I know what to do about them. Is it likely that the HTML is wrong or is it more likely me http://www.c5d.co.uk/scotland.php is one of the pages concerned. I appreciate that the table still needs styling to fir in the centre and have the right colours.

Thanks

Antony

**ronpat** · Jan 7, 2013 01:28

Originally Posted by certificates

I have made the adjustments to the advert but I think that you meant a img {display:block; border-bottom:4px solid #708090;} and not a img {display:block; border-bottom:4px solid #000;}

No, I actually meant exactly what I wrote. Since we had not spoken about the black line, I felt obligated to leave it in place in case my assumption was wrong. However, I did it in such a way that you could DELETE it by simply deleting {border-bottom:4px solid #000;}. It's better if you do not change the color to match the background, instead just delete the border-bottom property from the code.
Line 117 should read:

Code:

a img {display:block;}

Give me a few minutes or so to look at the table in 41891 and I'll get back with you

Then we'll go from there.

**certificates** · Jan 7, 2013 01:51

OK, I have deleted it.

Thanks. I 'll look forward to the other reply but it will be tonight when I can do anything as I'm off to work now !

Thanks Antony

**ronpat** · Jan 7, 2013 02:54

The matter of the recommended mods for the table...

These two screenshots show "As-Is" and "WithMods" comparisons of descriptioned41891.

- - As Is - - - - - - With Mods - -

41891-AsIs.jpg - 41891-wMods.jpg

To my eyes, the mods look more professional than the table pushing off the right edge of the window.

If you agree, the code again is:
censusstyle.css

Line 151:

Code:

.test th, .test td {
    border: 1px solid #000000;
    text-align: center;
    width: 150px;    /* Delete this width property */
}

Lines 161 and 169:

Code:

p.rotate {
    transform: rotate(-90deg);
    white-space: nowrap;
    width: 80px;     /* Change from 100px to 80px to increase the width of .col9. */
}

Line 172:

Code:

.test tr {           /* Delete this rule entirely */
    width: 50px;
}

Line 173:

Code:

.col9 {              /* Delete this paragraph rule entirely (See next note about padding.) */
    height: 570px;   /* Delete.  Way too tall.  Fixed heights are inflexible. */
    width: 250px;    /* Delete.  A width is unnecessary; this is too wide anyway. */
}

Also, I have copied the code from Paul's post that assures IE7 compatibility of the transform rotate code. Be sure to paste this code exactly just above the </head> tag (~line 15) on all of the pages that use the rotate code.

Code:

<!--[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;
}
</style>
<![endif]-->

And FINALLY, be SURE to add the OPEN <head> tag just under the <html lang="en"> tag at the top of these pages, as I mentioned in my earlier post.

You left me with some more questions to explore, so let me do that now and I'll post another response later.

Cheers

**ronpat** · Jan 7, 2013 04:12

Regarding the errant strikethrough on the descriptioned121891.php page...

censusstyle.css

Line 175:

Code:

.strike {text-decoration:line-through;display:inline;}    /* Delete. Unnecessary. */

descriptioned121891.php

Line ~92 - change the "p" tags to "span" tags

from:

Code:

<p class="strike">that</p>

to:

Code:

<span class="strike">that</span>

Also on the descriptioned121891.php page:

1. Add a </p> tag just before the </td> tag at the end of line ~92.

2. Add the open <head> tag just beneath the <html lang="en"> tag at the top of the page.

**ronpat** · Jan 7, 2013 04:48

The "jumbled mess" on descriptioned61891.php...

1. This page needs the same open <head> tag added just under the <html lang="en"> tag.

2. Looks like you do not need the p.rotate2 class in css. That can be deleted.

3. I am including all of the <table class="test"> code here to be sure you can see my changes. They are few and could easily be missed. Look for the blue colored code.
A. The non-breaking spaces, " ", have been deleted and replaced with ordinary spaces.
B. The rotate2 class was replaced with a rotate class.
C. The text with the strike-thru is surrounded with <span class="strike"> tags.

It looks like this was being used for testing, so I believe you have other text to add here; but now you can see how the strike-thru is accomplished.

Code:

<table class="test">
    <tr>
        <th scope="col">Cols:&nbsp;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 scope="col">7</th>
        <th scope="col">8</th>
        <th id="col9">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 
            <br>Sanitary
            <br>District
        </td>
        <td>Parliamentary Borough or Division</td>
        <td>Ecclesiastical Parish or District</td>
        <td></td>
    </tr>
    <tr>
        <td><p class="rotate">Ashton Under Lyne</p></td>
        <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
        <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
        <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
        <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
        <td><p class="rotate">Hartshead Prestwich Division</p></td>
        <td><p class="rotate"><span class="strike">Christ Church Ashton Under Lyne</span><br>Holy Trinity Bardsley</p></td>
        <td><p class="rotate">Christ Church Ashton Under Lyne<br>Holy Trinity Bardsley</p></td>
        <td><p class="col9">Parsonage
            <br>Lordsfield
            <br>Taunton Road
            <br>Newmarket Road
            <br>Oldham Road
            <br>Store Street
            <br>Langham Street
            <br>Gordon Street
            <br>Oaken Clough
            <br>Buckley Street
            <br>Wilshaw Road
            <br>Limehurst</p>
        </td>
    </tr>
</table>

Past my bedtime. Until later.

**certificates** · Jan 7, 2013 13:17

Thanks for the messages.

I have added the <head> tag to the web pages. I have also made the adjustments to the CSS. However I need the p.strike setion of it, so I have done what you said but renamed p.strike2

The ed12 page now works fine, but ed6 is still a jumbled mess. Not only that, but the end column, has now become far too narrow, and I wonder why that is ?

It hasn't o any of the other pages.

Antony

**ronpat** · Jan 10, 2013 06:04

Antony, there is no need to create a "strike2" class. It is OK to use "strike" with the "display:inline" property in it. On page ed6, "strike" is assigned to a <span> tag, which is an inline element. I had indicated that "display:inline" could be removed it because it is redundant, however, it is completely harmless to leave it in; especially, if needed elsewhere. You can delete .strike2 from your css.

The shrinking width of column 9 is an oversight, I did not anticipate that column 9 might contain a list of short names rather than sentences. It needs to have a width assigned.

Firefox has a problem with {transform:rotate}. It hasn't been very obvious so far, but on the ed6 page it becomes apparent as the rotated text is something of a mess.

I came up with a solution tonight, but want to test more before passing it along.

Please tell me the purpose of assigning a scope to the th tags. I haven't seen any code that utilizes that scope anywhere. If it has no purpose, would you consider deleting it?

**Paul O'B** · Jan 10, 2013 06:37

Originally Posted by ronpat

Please tell me the purpose of assigning a scope to the th tags. I haven't seen any code that utilizes that scope anywhere. If it has no purpose, would you consider deleting it?

Scope is a useful accessibility aid and should not be omitted lightly

.

**ronpat** · Jan 10, 2013 13:40

Originally Posted by Paul O'B

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!

**certificates** · Jan 10, 2013 13:59

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

**ronpat** · Jan 10, 2013 18:26

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.

Code:

<!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:&nbsp;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">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
                <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
                <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</p></td>
                <td><p class="rotate">&mdash;&mdash;&mdash;&mdash;&mdash;</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>

**certificates** · Jan 11, 2013 00:02

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

User Tag List

Thread: Back with a Problem about vertical alignment

Thread Tools

Display

Back with a Problem about vertical alignment

Bookmarks

Bookmarks

Posting Permissions