[Synotic]

I am currently working on making a CSS-based calendar as a replacement for an older uglier (code-wise) table-based calendar. My goal is to get the calendar to look good cross-platform and have it work in text-based browsers such as Lynx as well. This is how the calendar looks in visual browsers:

<div style="width: 302px"><h1 style="margin-bottom: 8px; text-align: center; font-family: Arial, sans-serif; font-size: 10px">February 2003</h1><!-- titles --><h2 style="width: 100px; padding-bottom: 2px; border-bottom: solid 2px #4d4d4d; float: left; text-align: center; font-family: Arial, sans-serif; font-size: 10px">Sunday</h2><h2 style="width: 100px; padding-bottom: 2px; border-bottom: solid 2px #4d4d4d; float: left; text-align: center; font-family: Arial, sans-serif; font-size: 10px">Monday</h2><h2 style="width: 100px; padding-bottom: 2px; border-bottom: solid 2px #4d4d4d; float: left; text-align: center; font-family: Arial, sans-serif; font-size: 10px">Tuesday</h2><!-- week 1 --><div style="width: 99px; height: 99px; border-right: solid 1px #b2b2b2; border-bottom: solid 1px #b2b2b2; float: left; background-color: white; font-family: Arial, sans-serif; font-size: 10px"></div><div style="width: 99px; height: 99px; border-right: solid 1px #b2b2b2; border-bottom: solid 1px #b2b2b2; float: left; background-color: white; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">1</h3></div><div style="background-color: #ccffd0; border-right: none; text-align: center; width: 99px; height: 99px; border-bottom: solid 1px #b2b2b2; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">2</h3><a href="#">Important meeting</a><br><br>Mandatory<br><br>9:00 PM</div><!-- week 2 --><div style="background-color: #cce7ff; text-align: center; width: 99px; height: 99px; border-right: solid 1px #b2b2b2; border-bottom: solid 1px #b2b2b2; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">3</h3><a href="#">Meeting</a><br><br>Voluntary<br><br>7:30 PM</div><div style="width: 99px; height: 99px; border-right: solid 1px #b2b2b2; border-bottom: solid 1px #b2b2b2; float: left; background-color: white; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">4</h3></div><div style="border-right: none; background-color: white; text-align: center; width: 99px; height: 99px; border-bottom: solid 1px #b2b2b2; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">5</h3></div><!-- week 5 --><div style="border-bottom: none; background-color: white; text-align: center; width: 99px; height: 99px; border-right: solid 1px #b2b2b2; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">6</h3></div><div style="border-bottom: none; background-color: white; text-align: center; width: 99px; height: 99px; border-right: solid 1px #b2b2b2; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">7</h3></div><div style="border-bottom: none; border-right: none; background-color: white; text-align: center; width: 99px; height: 99px; float: left; font-family: Arial, sans-serif; font-size: 10px"><h3 style="width: 88px; margin-bottom: 4px; text-align: right; font-size: 18px; font-weight: bold">8</h3></div></div>

And in text-only browsers:

<div><h1>February 2003</h1><!-- titles --><h2>Sunday</h2><h2>Monday</h2><h2>Tuesday</h2><!-- week 1 --><div></div><div><h3>1</h3></div><div><h3>2</h3><a href="#">Important meeting</a><br><br>Mandatory<br><br>9:00 PM</div><!-- week 2 --><div><h3>3</h3><a href="#">Meeting</a><br><br>Voluntary<br><br>7:30 PM</div><div><h3>4</h3></div><div><h3>5</h3></div><!-- week 5 --><div><h3>6</h3></div><div><h3>7</h3></div><div><h3>8</h3></div></div>

Now it looks pretty good but the problem is the titles "Sunday", "Monday", "Tuesday" are redundant in the text-only browser. I know this isn't that big of a functionality problem but it's really annoying me. I know that you can easily hide text from visual browsers and have it display in text browsers but can you do the same in reverse? I looked into using generated content properties but it doesen't seem like anybody supports them. Thanks for any help

P.S. I wrote this code on a IE 6 set-up so I hope that it works in other browsers...

[Millennium]

Although it is theoretically possible to do this with CSS, none of the text-only browsers that I'm aware of support those aspects of CSS anyway.

Did you use th tags to for the days of the week, rather than td tags? That might help. In this particular case I'd add scope="col" as an attribute to the th tags too.

[Synotic]

Originally posted by Millennium:
Although it is theoretically possible to do this with CSS, none of the text-only browsers that I'm aware of support those aspects of CSS anyway.

Thanks for the response, I guess it's really not that serious of a problem. I'll look into doing some block spans for the days of the week so it doesn't take up so many lines in text only browsers. It seems like a media type would be perfect for this kind of thing but I suppose it's not well supported.

Did you use th tags to for the days of the week, rather than td tags? That might help. In this particular case I'd add scope="col" as an attribute to the th tags too.

Are you referring to the earlier version? I partially made this as an experiment to see if I could create a calendar using only CSS. I did this because I wanted it to be easy to be editable by hand which the code is. The older version was using a table (and embedded tables) to achieve the same effect. The problem is that a new one has to be created each month and GoLive (for the person who updates the calendar) completely butchers the code/site. I am experimenting with the current design and everything looks much better (because I can use pixel margins as opposed to break returns and creating new table cells and rows). Also to create the grid I have to resort to using tons of 1px tranparent gifs which I don't want to go back to. One problem that arises with the CSS design however is that since each day is a left floated DIV, the height of one DIV, if larger than the others doesn't resize the other days but creates some rather gruesome results instead. A table is much more flexible, however. So I am going to try and redo the orginal table-based design and use CSS for the content of the days and some other things. If it works out I'll definitely use TH and longdescs and whatnot to improve accessibility. A screenreader would probably react better with a well designed table than the current design. Again, thanks for your help