Article Digest:
Until last weekend, the majority of my readers used some version of Internet Explorer to view my website. Something changed, and now I have a readership of which 75% are using a Mozilla based client. This is a problem for me because I have known about an issue with my website that I've been trying to fix for the last month and failed.

My recipe summaries don't display properly in browsers other than Internet Explorer. This is mainly because Internet Explorer is not fully CSS standard compliant and I had to come up with creative ways to get IE to present the table the way I desired it to. Unfortunately, some of the other browsers are standards compliant and render the tables awkwardly.

I've been working on this problem for the last couple days and when I come up with a solution, I will convert all my recipe representations over to the format that will at least work with IE and Firefox (that's my current goal).

Anyone know how to do vertical text in CSS with firefox? I rely on vertical text to save horizontal space in my recipes and use:layout-flow: vertical-ideographic;but this does not seem to work in Firefox.

The other issue I have is intersecting table elements (I need table elements to form non-rectangular shapes [like L's]). If someone can give me some tips, I'd be much appreciated.

I don't think that its posible to rotate text in firefox (or Gecko based browsers in general). There's some solutions in CSS3 but I don't think its implemented anyware yet. Perhaps you can use something like photomatts script but that requires php (more discussion here).

I've given up trying to do the rotated text in anything except for Explorer (at least for now). (Also, I'll have to move servers or pay money each month to add php support.)

I think I've got the website working with Explorer and Mozilla (FireFox) although Firefox seems to render the tables inconsistantly. Safari still doesn't render the tables properly though. I'm going to go back to writing articles and put fixing the formatting on the back burner for now until I come up with a better idea. (Someone suggested GIFs but I really want to keep the tables so readers can cut and paste them into a word processor to print.)

I have given up on vertical text - left it in for IE users so they have a more compact representation of the recipe, but the horiz. text doesn't hurt in other browsers.

I cannot use border-right: none because this doesn't work properly in IE (hey microsoft! Read the CSS spec! None has PRECEDENCE!). I kludged together a semi-working solution by making the border-right color the same as the background, but this doesn't work on Safari.

--

A print stylesheet won't alter the fact that the recipe summary is a gif (with a green background). In tabular format, at least you can copy and paste it into a word processor or spreadsheet to modify for printing (only need to change the "hidden" borders).

Ok, well if you are looking for a way to generate text vertically, I suggest doing it client side. Using PHP, you can generate images. If your content is dynamically generated from a database, use PHP to dynamically generate images and populate the tables that way.

Other than that have you looked into seeing if javascript can handle it? I think there is also a solution for javascript to do this.

I agree with the previous post on "IE7". It's an amazing set of scripts/CSS so almost all CSS with render the same in Internet Explorer as it does in Firefox. (I plan on using it on all sites I maintain.) Good luck...

If you can identify the webbrowser by the id string then you can choose how to serve up pages for particular browsers. It seems that the problem is IE and then everything else. make IE the exception and cater for complient browser if as you say 75% of the traffic is using firefox. It doesn't have to be too complicated just point the IE browser at a download link for firefox
Seriously the Internet is about open standards supported across many platforms. Microsoft is about locking users into their closed standards and operating systems. It's the little annoying things that microsoft do to ensure that people use microsoft products