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
Off Topic
Recipe Summaries - Standards and Microsoft
49 comments on Recipe Summaries - Standards and Microsoft:(Post a comment)
On August 17, 2004 at 10:39 AM, an anonymous reader 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 persson
PS I really like the recipe summaries
PPS The new readership might come from Widgetopia
jens persson
PS I really like the recipe summaries
PPS The new readership might come from Widgetopia
On August 17, 2004 at 10:39 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
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
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
If printing is a concern, why not make a print stylesheet? Hide everything except the main content. Works transparently on all browsers.
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 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).
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).
On August 17, 2004 at 10:39 AM, an anonymous reader 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
Just thought I would let you know.
-Sucktastico@techloser.com
On August 17, 2004 at 10:39 AM, an anonymous reader said...
Try IE7 at http://sf.net/projects/ie7
Seb
Seb
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 AM, an anonymous reader said...
GIF or PNG images can have a transparent background.
On August 17, 2004 at 10:39 AM, an anonymous reader 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...
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 AM, an anonymous reader 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?
I don't know about the CSS thingie. What aisle would I find it in?
On August 17, 2004 at 10:39 AM, an anonymous reader 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)
On August 17, 2004 at 10:39 AM, an anonymous reader 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
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
On August 17, 2004 at 10:39 AM, an anonymous reader 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
Just my $0.02
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 AM, an anonymous reader 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
I invite anyone thats still using a 'word processor' for anything to read the article at:
http://www.ecn.wfu.edu/~cottrell/wp.html
On August 17, 2004 at 10:39 AM, an anonymous reader 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. :)
Awesome site, BTW. :)
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
Good Job.
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 AM, an anonymous reader 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)
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)
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:39 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:40 AM, an anonymous reader 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.
On August 17, 2004 at 10:40 AM, an anonymous reader 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.
Food for thought (pun intended) ;)
Simon McF.
On August 17, 2004 at 10:40 AM, an anonymous reader 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.
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.
On August 17, 2004 at 10:40 AM, an anonymous reader 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!
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!
On August 17, 2004 at 10:40 AM, an anonymous reader 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
Hank
On August 17, 2004 at 10:40 AM, an anonymous reader 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.
On August 17, 2004 at 10:40 AM, an anonymous reader 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.
On August 17, 2004 at 10:40 AM, an anonymous reader said...
Everything seems to work fine on Safari 1.2.3 / Mac OS X 10.3.5 as well.
On August 17, 2004 at 10:40 AM, an anonymous reader 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
On August 17, 2004 at 10:40 AM, an anonymous reader 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
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
On August 17, 2004 at 10:40 AM, an anonymous reader said...
Michael,
Looks great under Firefox 0.9.2...don't sweat it!
Also, congrats on your "slashdot-ing"!
- g
Looks great under Firefox 0.9.2...don't sweat it!
Also, congrats on your "slashdot-ing"!
- g
On August 17, 2004 at 10:40 AM, an anonymous reader said...
Your tables render fine in Camino 0.7.
Keep up the great work.
Keep up the great work.
On August 17, 2004 at 10:40 AM, an anonymous reader 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!
Please don't use gifs to show vertical text. Keep it dial-up friendly for those of us in the sticks.
Great site!
On August 17, 2004 at 10:40 AM, an anonymous reader 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!
http://www.packed.org/index.php?cat=4
thanks!
On August 17, 2004 at 10:40 AM, an anonymous reader said...
If you have enough control over the webserver you can serve up different pages depending on the HTTP_AGENT http environment variable.
On August 17, 2004 at 10:40 AM, an anonymous reader 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
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
On August 17, 2004 at 10:40 AM, an anonymous reader said...
how much are you paying each month, exactly? You may want to look at www.fuitadnet.com
On August 17, 2004 at 10:40 AM, an anonymous reader said...
I'm using opera and your site renders beautifully.
On August 17, 2004 at 10:40 AM, an anonymous reader said...
layout is beautiful in OmniWeb 5.0.1, Mac OS X 10.3
On August 17, 2004 at 10:40 AM, an anonymous reader 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:1:84623471e6]
element {
color: green;
}
* html element {
color: red;
}
[/code:1:84623471e6]
will come out green in a normal browser, while explorer will display it in red.
[code:1:84623471e6]
element {
color: green;
}
* html element {
color: red;
}
[/code:1:84623471e6]
will come out green in a normal browser, while explorer will display it in red.
On August 17, 2004 at 10:40 AM, an anonymous reader 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.)
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.)
On August 17, 2004 at 10:40 AM, 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. :)
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. :)
On August 17, 2004 at 10:40 AM, Ben Powell (guest) 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
View Solution
On August 17, 2004 at 10:40 AM, HappySquare (guest) 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.
On August 17, 2004 at 10:40 AM, an anonymous reader 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...
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...