description td{font-weight:bold;}

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).

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.

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.

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.

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.

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?

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.

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.

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:

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

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.

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

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

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.

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?