DIV-based calendar

I’ve hit a snag trying to make my database-driven calendars work right. I started off with them as tables, and IE6 and Firefox just refused to render them the same way. So I decided to throw out the results of my careful planning and trial/error hacking and start over with a DIV-based system.

First of all, I don’t really know how web calendars are normally put together. All the examples I can find have far too complex code for me to sort through to get ideas. To make it more interesting, I don’t know nearly enough about CSS…but of course that’s why I’m here :slight_smile:

So here’s a sample of what I’ve got put together:

http://kevin.pope.cc/calendar_test.php

  1. Both IE6 and Firefox: I’d like for every day in a row to be the same height, but I don’t know how to acheive that. Nothing I tried has worked, and I’m out of ideas.

  2. Firefox: The HR that I’m using to divide the weekend divs doesn’t seem to accept the color attribute.

  3. IE6: In the weekend divs on the right, the div containing the date seems to be pushed down by the hr above it.

Of course if you seen anything else that needs fixing/improvement, I’m open to advice.

Hmm see, the thing here is, you specified a width for all the boxes, that’s why the saturday and sunday box are forced to move downward. And you specified a min-height property, which is unsupported by IE, you should just give the height that value using the tan hack. so for this block of code, change it to what’s below it.


/* your original code */
div.calendar_day{
	float:left;
	width:120px;
	border:1px #000000 solid;
	min-height:120px;
}
/* change to this */
div.calendar_day{
	float:left;
        min-width: 120px;
	border:1px #000000 solid;
	min-height:120px;
}
* html div.calendar_day{
	float:left;
        width: 120px;
	border:1px #000000 solid;
	height:120px;
}

And an easier way to achieve the same height row is to conclude all the divs in one row into a bigger wrap/container, and let the height of the container by fluid while do not specify the height for each individual box.

As for the problem with HR tag…err my suggestion is to ditch the HR tag altogether and use something like a p tag to specify a bottom border there.


html:
<p class="border"></p>
css:
.border{
 border-bottom: 1px solid color;
}

Hopefully this helps

Saturday and Sunday are supposed to be stacked like that. This will be a school calendar, and Saturday and Sunday will generally have much less information in them.

I’m not sure what you’re talking about when you say “the tan hack”.

So basically what you’re talking about there is adding a container to hold the entire row? I’d thought about doing that, was trying to keep from overdoing the div count.

That’s something I’d considered doing. The problem is that this calendar will be generated using PHP code, and it might require some significant tweaks to my code to make that change. I’ll have to review my PHP to see if that works.

Oh yea, I know that they are supposed to stack up together. What I meant was, then reason why their height surpasses the other day’s height is because you have specified a width for the boxes, so the only way to grow is to grow in height. And from what I understand from your post, you seem to want the height stay with the rest of the days and only see the width grow. So I suggested the method. The tan hack is simply adding ‘* html’ before any css element to make the css code IE only.

So basically what you’re talking about there is adding a container to hold the entire row? I’d thought about doing that, was trying to keep from overdoing the div count.

Yea, doing it with a big container solves the problem of difference in height for the different days.

That’s something I’d considered doing. The problem is that this calendar will be generated using PHP code, and it might require some significant tweaks to my code to make that change. I’ll have to review my PHP to see if that works.

Hmm I don’t think php would affect anything, in place of the hr tag, just write in <p class=“border”></p> and specify the class in css, and that’s it.

You may be dead set on your calendar layout…

However I did stumble on this great calendar example - thought it might be of some use to you.