Welcome to the MacNN Forums.

Diggory Laycock · Oct 20, 2004, 07:55 AM

http://www.monkeyfood.com/design/phpcsscalendar/

works fine on most browsers (even IE:Win) - but IE:Mac lays the days out in a single row.

Chris O'Brien · Oct 20, 2004, 03:20 PM

Dunno what's causing it specifically... What happens if you use inline elements (spans) for the individual 'cells' or give those divs display: inline? Seems you're just relying on float: left to do all the work?

I'll admit I haven't had much of a look I'm afraid, but that was my first impression...

Diggory Laycock · Oct 20, 2004, 07:51 PM

Thanks for the once-over.

I think I've tracked it down. (I've fallen for this before)

Bloody IE:mac cares about newlines in the source -

Code:
<div>hello</div><div>world</div>

will render differently to:

Code:
<div>hello</div>
<div>world</div>

even though as far as XML is concerned they are syntactically identical.

I hate you Gates.

Diggory Laycock · Oct 20, 2004, 08:21 PM

Wow - I actually got it working in Firefox/Safari/IE:Win/IE:Mac.

I had to put an extra empty para under every week division (row) styled as clear:both to get IE:mac to not go completely mental.

Here's the source (just in case someone finds it useful)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>PHP CSS Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="StyleSheet" href="css/calendar.css" type="text/css" media="all"/>	
	</head>
	
	<body>
	
	<?php
		$dateInfo =  getdate ();
		$timestampNow = time();
				
		echo("<h1>". $dateInfo['month'] . " " . $dateInfo['year'] . "</h1>");

		$secondsSinceFirstOfMonth = 60 * 60 * 24 * ($dateInfo['mday'] - 1); 
		$timeStampAtStartOfMonth = $timestampNow - $secondsSinceFirstOfMonth;
		$firstDayInfo  = getdate($timeStampAtStartOfMonth);
		echo("<p>month started on a " . $firstDayInfo['weekday'] . "</p>");		
//		echo("<p>month started at date: " . $firstDayInfo['mday'] . " / " . $firstDayInfo['mon'] . "</p>");		
		$numDaysInMonth = (int)date( 't' , $timeStampNow);
		echo("<p>There are: $numDaysInMonth Days in this month: </p>");
//		print_r($dateInfo);
		
		echo("<div id=\"calendarContainer\">");		
		$monthDay = 1;
		$started = false;
		while ($monthDay < $numDaysInMonth) { 
			echo("<div class=\"weekContainer\">");
			for ( $weekday = 1; $weekday <= 7; $weekday ++) {
				
				$dayClass = "";
				if (($started == false) && ($weekday == $firstDayInfo['wday'])) {
					$started = true;
				}

				if ($started != true) {
					$dayClass = "preStart";
				} else {
					if ($monthDay == $dateInfo['mday']) {
						$dayClass = "today";
					}
				}
				
				$monthDayMarkup = "";
				if ($started == true) $monthDayMarkup = " ($monthDay)";
 
				$dayMarkup = "<div class=\"dayClass $dayClass\">" . /*$weekday .*/ $monthDayMarkup .  "</div>";
				echo $dayMarkup;

				if ($monthDay == $numDaysInMonth) break;

				if ($started == true) {
					$monthDay++;
				} 

			}
			echo("</div>");
 				//	we need a spacer below each week for IE:mac to layout properly.
			echo("<p class=\"clearSpacer\"></p> ");
		}
		echo("<p class=\"clearSpacer\"></p> ");
		echo("</div>");		
	
	?>
	
	</body>
</html>

Code:
#calendarContainer
{
	border: 1px solid black;
	width: 464px;
	
	font-size: 0.9em;
}

.weekContainer
{
	height: 60px;
	width: 100%;
	
/*	border: 1px solid black;  */
}

.preStart
{
	color: grey;
	background: #eee;
}

.dayClass
{
	float: left;
/*	display: inline; */
	
	border: 1px dotted gray;
	height: 60px;
	width: 60px;
	
	margin: 2px;
}

.today
{
	background: #D3EAFF;
	color: #DC6C58;
	border: 1px solid #DC9D89;
}

.clearSpacer
{
	padding: 0;
	margin: 0;
	clear: both;
}