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.
Related Articles
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
Related Articles
jens persson
PS I really like the recipe summaries
PPS The new readership might come from Widgetopia
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
If printing is a concern, why not make a print stylesheet? Hide everything except the main content. Works transparently on all browsers.
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.
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).
Just thought I would let you know.
-Sucktastico@techloser.com
Seb
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 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 don't know about the CSS thingie. What aisle would I find it in?
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
Just my $0.02
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.
I invite anyone thats still using a 'word processor' for anything to read the article at:
http://www.ecn.wfu.edu/~cottrell/wp.html
Awesome site, BTW. :)
Good Job.
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 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)
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.
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.
Food for thought (pun intended) ;)
Simon McF.
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.
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!
Hank
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
Looks great under Firefox 0.9.2...don't sweat it!
Also, congrats on your "slashdot-ing"!
- g
Keep up the great work.
Please don't use gifs to show vertical text. Keep it dial-up friendly for those of us in the sticks.
Great site!
http://www.packed.org/index.php?cat=4
thanks!
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
[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.
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.)
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. :)
View Solution
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...