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).
Joined: 10 May 2005 Posts: 1654 Location: Austin, TX (USA)
Posted: Tue Aug 17, 2004 2:39 pm Post subject:
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.)
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;"
Joined: 10 May 2005 Posts: 1654 Location: Austin, TX (USA)
Posted: Tue Aug 17, 2004 2:39 pm Post subject:
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).
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.
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...
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.
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
You cannot post new topics in this forum You can reply to topics in this forum You cannot edit your posts in this forum You can delete your posts in this forum You cannot vote in polls in this forum