Sorry, Cooking For Engineers has reorganized. This page isn't going to display quite right anymore... You will be redirected immediately or click here to be forwarded immediately.


Tuesday, August 17, 2004

Recipe Summaries - Standards and Microsoft

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.

Thanks,
Michael

posted by Michael Chu @ 8/17/2004 09:12:09 AM   49 comments
Toggle Printer Friendly   Toggle commentsPost a Comment  

49 Comments:

At 12:23 AM, Anonymous said...

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

jens perssonPS I really like the recipe summaries

PPS The new readership might come from Widgetopia

 
At 12:44 AM, Michael Chu said...

Thanks for the comments Jens,

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

Michael

 
At 3:04 AM, Anonymous said...

"Someone suggested GIFs but I really want to keep the tables so readers can cut and paste them into a word processor to print."

If printing is a concern, why not make a print stylesheet? Hide everything except the main content. Works transparently on all browsers.

 
At 6:43 AM, Anonymous said...

I'd give up on the vertical text, there's no support for it in non-IE browsers. However, keep it for those users and don't worry about it as it doesn't ruin the layout to read it normally.

As for the L-shaped sections. You need cellspacing="0" added to your table so that the outer box of one cell overlap with the outer boxes of it's 4 neighbors.

Then you can turn off the two touching borders to create the L-shape with CSS like "border-right: none;"

Very nice site. Keep up the good work.

 
At 9:03 AM, Michael Chu said...

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

 
At 1:10 PM, Anonymous said...

Just as an aside, and I haven't read all the other posts, I use Opera 7.54 and all the rescipes (as well as everything else on the site) looks good to me.

Just thought I would let you know.

-Sucktastico@techloser.com

 
At 6:18 PM, Anonymous said...

Try IE7 at http://sf.net/projects/ie7
Seb

 
At 6:22 PM, Anonymous said...

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.

 
At 6:26 PM, Anonymous said...

GIF or PNG images can have a transparent background.

 
At 6:33 PM, Anonymous said...

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

 
At 6:37 PM, Anonymous said...

You should probably blow off IE.

I looked at your site in IE 5 (5.00.3700.1000)
which is still pretty common.

Your tables come out with black text on a dark green background and no border lines at all, just these floating black works--the result is nearly invisible and totally incomprehensible.

 
At 6:45 PM, Anonymous said...

I'm using Firefox 0.8 and all the recipes look yummy.

I don't know about the CSS thingie. What aisle would I find it in?

 
At 6:46 PM, Anonymous said...

To fix the border-right: none in IE you can use border-right: 0; It'll still display fine in at least firefox (I'm not sure about others)

 
At 6:48 PM, Anonymous said...

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

 
At 7:01 PM, Anonymous said...

Why not render with Java applets. The later versions of Java have the ability to rotate text (Java 1.2...). You could provide two versions one for IE and one for the Gecko crowd and provide different content based upon the user-agent string. Also is flash an option?

Just my $0.02

 
At 7:02 PM, Anonymous said...

I'm not sure this has all the functionality you're looking for, but you may want to look at:

http://sourceforge.net/projects/ie7/
and
http://dean.edwards.name/IE7/

It's an attempt using behaviors to make IE6 more "standards" compliant with respect to CSS. He seems to have made some impressive headway.

 
At 7:16 PM, Anonymous said...

Im curious how gifs prevent printing? And why on earth anyone would copy something from a website to a *word processor*, of all things, to print it.

I invite anyone thats still using a 'word processor' for anything to read the article at:

http://www.ecn.wfu.edu/~cottrell/wp.html

 
At 7:18 PM, Anonymous said...

The summaries look fine to me (Firefox 0.9.3). Actually, I prefer the look in Firefox (all text displayed horizontally) over the look on IE (some text horizontal, some text vertical).

Awesome site, BTW. :)

 
At 7:19 PM, Anonymous said...

Very nice site. I am not one for fancy stuff. Since the content of the site awesome, any asthetics(sp?) are not a problem. :)

Good Job.

 
At 7:22 PM, Anonymous said...

Excelent site, finally a site that makes a clear picture of this cooking business.
I use mozilla 1.7.2 and most of the pages display correctly. there are only a few tables that are missing the occationall border. Great job overall.

 
At 7:45 PM, Anonymous said...

I'm not sure what you mean by needing table elements to form L-shapes, but if you use appropriate nested divs you should be ables to force text into any L-shape of your choosing.

I presume colspan settings are insufficient for what you want...

Do you have a good example of what you want to acheive that css-hackers could have a look at?

(bevan at fulcrummicro dot com)

 
At 7:51 PM, Zan said...

If you make the tables as a GIF or PNG with a transparent background, it will print on a white background (since most browsers leave out background colors when printing), and copying into a word processor will also result in a white background.

 
At 8:40 PM, Anonymous said...

You can use "border-right: 0px;" for IE, I believe. Also, don't use cellspacing="0". Use "border-collapse: collapse; border-spacing: 0px;"

This should take care of most of the minor issues.

I don't know if I missed something about your comment, but you might try print stylesheets in CSS2. By allowing you to set different colors, fonts, *everything* differently for printning, it can make life quite easy.

 
At 9:07 PM, Anonymous said...

An idea for vertical text that you might try is to write the text with <br>'s after each letter. e.g.:
s
t
i
r
It's longer than you may have intended, but still readable and saves on horizontal space. For your sanity, you can also make a javascript function to insert the breaks when given a string.

 
At 9:22 PM, Anonymous said...

For an L shape space, I would place a div with a defined size and float: right. The div will take the place on the top right and the text will take what's left.

 
At 9:30 PM, Anonymous said...

Why not use a gif with a transparent background? These would display properly in most browsers, and would display fine when pasted into word processors (most).

Food for thought (pun intended) ;)

Simon McF.

 
At 9:34 PM, Anonymous said...

"A print stylesheet won't alter the fact that the recipe summary is a gif (with a green background)."

It certainly can. Just make some elements hidden in the print style sheet, and other elements hidden in the screen style sheet. That lets you substitute a non-gif for the printer that replaces the gif for the screen. I have a "NoScreen" class and a "NoPrint" class that I use for this. Attach the class to the right sourrounding divs, tables, or whatever and you can easily hide a group of screen-only or print-only elements as needed.

 
At 9:42 PM, Anonymous said...

You may be intrested in this:

http://dean.edwards.name/IE7/This allows you to add a CSS style sheet to your page that makes IE standards compliant, weather it likes it or not :)

Thanks!

 
At 9:59 PM, Anonymous said...

Call me a nut, but comparing the Tiramasu recipe as presented by Safari and Firefox, I prefer the way Safari renders the table. I think the L-shaped cells detract a bit from the how the recipe should be completed. Every cell that abuts a cell that covers more than row is part of the direction in the tall cell. The L-shape make's it seem like the item in that cell has some special relationship to the direction. That's not phrased very well, but my hand-waving doesn't come across well in ASCII.

Hank

 
At 10:08 PM, Anonymous said...

Actually, I find the horizontal text in FF easier to read than the vertical IE version. And I love the tabular representations of ingredients/processes. Nice site.

 
At 10:36 PM, Anonymous said...

Perhaps PHP (or some other dynamic web presentation layer) is needed. With this tool, you can detect the user's browser, and deliver the appropriate stylesheet.

 
At 10:40 PM, Anonymous said...

Everything seems to work fine on Safari 1.2.3 / Mac OS X 10.3.5 as well.

 
At 10:44 PM, Anonymous said...

Im using Konqueror with KDE 3.3 looks fine.. Safari uses the khtml render lib from Konquerer (usually an older version) so this problem should be fixed in Safari

 
At 10:49 PM, Anonymous said...

hello michel
There is another option to consider. It is not perfect, but will become more perfect over time. Assuming you keep the recipe in some kind of structured form, you could transcode them to svg. Presently browsers have no native support for it, but that will change rather quikly i think. For now people would need the adobe plugin. The benefit is that svg has a bright future ahead (i think) and is perfictly sutable for your problem
regards,
Ernst

 
At 12:43 AM, Anonymous said...

Michael,

Looks great under Firefox 0.9.2...don't sweat it!

Also, congrats on your "slashdot-ing"!

- g

 
At 12:59 AM, Anonymous said...

Your tables render fine in Camino 0.7.
Keep up the great work.

 
At 1:23 AM, Anonymous said...

looks great in Safari.

Please don't use gifs to show vertical text. Keep it dial-up friendly for those of us in the sticks.

Great site!

 
At 6:06 AM, Anonymous said...

not to spam or anything, but the cooking section of my weblog may be interesting to Dutch people:
http://www.packed.org/index.php?cat=4

thanks!

 
At 6:39 AM, Anonymous said...

If you have enough control over the webserver you can serve up different pages depending on the HTTP_AGENT http environment variable.

 
At 6:40 AM, Anonymous said...

On vertical text:
I did a google search and came up with this:

http://forums.devshed.com/archive/t-115999
(lots of interesting topics here BTW)
Regarding a method that does work in IE but does not work in Mozilla.

Also, thanks for being Mozilla / Firefox compatible. I use them almost 100%. And have no virii, no spyware, no problems.

===========
mozilla correctly ignores is at it isn't part of the current w3.orgs css standard (http://www.w3.org/TR/CSS2/)

it isn't adviceble to use proprietary style in your css. stick to the standars.
============

That being the case, if you really need vertical text, a javascript sequesnce might get it. Or perhaps use the gif routine possibly via PHP. I don't think it is likely to get is via CSS unless the standards change.

/jerry

 
At 8:09 AM, Anonymous said...

how much are you paying each month, exactly? You may want to look at www.fuitadnet.com

 
At 8:53 AM, Anonymous said...

I'm using opera and your site renders beautifully.

 
At 11:07 AM, Anonymous said...

layout is beautiful in OmniWeb 5.0.1, Mac OS X 10.3

 
At 12:38 PM, Anonymous said...

I found some great CSS help from www.positioniseverything.net when I was setting up a website earlier this summer. Of particular help was the fact that Internet Explorer has a mysterious root element below the html tag. So

[code]
element {
color: green;
}

* html element {
color: red;
}
[/code]

will come out green in a normal browser, while explorer will display it in red.

 
At 12:20 PM, Anonymous said...

Your share of Firefox hits is probably high because it's a very popular choice for Slashdot users. Consequently it probably is important to fix your 'L' shaped table/cell problem. The tables render well in Opera, W3C's "reference browser" Amaya, and IE 5.5 and higher. It also looks fine in Mozilla version 1.4.1. (The text isn't always aligned vertically but tables, cells, and borders still look fine so the instructions remain clear.)

It looks predictably awful in the (text-based and almost never used) Lynx browser, it won't load properly in the (once great but now bottom-of-the-barrel) Netscape 4.x browsers.) They don't display properly in Explorer versions before 5.5 or my fairly recent version of Firefox.

The fact that it looks just fine in a fairly recent version of W3C's standards-cranky Amaya, Opera, and especially Mozilla suggests a possible problem in Firefox.

David Innes from 8020.org (referred to your site by Majikthise.)

 
At 2:41 PM, Michael Chu said...

re: Firefox

I now author to Firefox first. As far as I know it is rendering properly on Firefox now that I made a few changes. At least it looks okay on my system. :)

 
At 7:17 PM, Ben Powell said...

I have been searching on how to do the same thing and had had no luck. I had also been looking at HTML behaviours to get around the li:hover issue for CSS menus in IE which led me to coming up with the following solution:

View Solution

 
At 6:50 AM, HappySquare said...

Siince My iMac died, I dragged out my old 100Mhz Power Mac 8100/100AV with 33.6 dial-up. In IE 5.1 for Mac OS 9 your site is readable, and functions as expected. The download speed is comparable to other sites (a bit faster than comercial webmails) except the photos, which look fine, but must be quite a bit larger than the ones I typically see.

 
At 12:22 PM, Anonymous said...

"GIF or PNG images can have a transparent background."

PNG may be transparent but in IE you will see gray fields under the transparent PNG :)

But who cares about those IE users? IE does not respect standerds - we should not respect IE... and its users are guilty of making this buggy browser popular...

 

Post a Comment

<< Home