align batch of spans with float:left to a new block

I've got a calendar that is based on the concept of lots of blocks that are
spans with float:left. I would like to be able to have a detail section on
the right side of the screen, so that when the user selects an item on the
calendar, the detail can get displayed on the right side there. What I
have below appears to look perfect in mozilla based browsers - the detail
is aligned at the top right corner of the calendar, but in IE the detail
section appears at the bottom left corner of the calendar. Instead, when I
define my detail section as float:left, it is floated at the bottom right
corner of the calendar (as if it is another calendar day)... so not
floating it seems to be the closest I can get on my own.

Want (x = div1, D = div2):
XXXXXXX DDD
XXXXXXX DDD
XXXXXXX DDD
XXXXXXX
XXXXXXX

1. Is there a better way to do this (without using spans for my daily
blocks)?
2. I need a recommendation on how I get the detail info displayed without
using stinky html form elements (in other words - using javascript instead
of making a trip to the server to get a newly generated page)?

Thanks!


<style type="text/css">
#calendar {padding-top: .5em; width: 60em; margin-left:2em; font-family:
century gothic, arial, tahoma;}
#calendar span {float: left; width: 8em; height: 6em; padding: 0; margin:
0.125em; text-align: left; border: 1px dotted #E0E0E0; overflow:hidden;}
#calendar{clear: left; font-size: 9pt; color: navy;}
.dead {color: #C0C0C0; background-color: #F0F0F0;}
p.event {font-size: 6pt; color: navy; margin: 0;}
p.date {font-weight: bold; margin: 0;}
img {margin-left: 2px; margin-right: 2px;}
.month {font-size: large; text-transform: capitalize; letter-spacing: 3px;
vertical-align:text-bottom;}
#detail {}
</style>

<div id="calendar">
<p class="month">August&nbsp;2004</p>
<span class="day">1</span>
<span class="day">2<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day">7</span>
<span class="day">8<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">9</span>
<span class="day">10<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">11</span>
<span class="day">12<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">13<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">14</span>
<span class="day">15</span>
<span class="day">16<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">17<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">18<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">19</span>
<span class="day">20</span>
<span class="day">21</span>
<span class="day">22</span>
<span class="day">23</span>
<span class="day">24</span>
<span class="day">25</span>
<span class="day"><p class="date">26</p></span>
<span class="day">27</span>
<span class="day">28</span>
<span class="day">29</span>
<span class="day">30</span>
<span class="day">31</span>
<span class="dead">1</span>
<span class="dead">2<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="dead">3</span>
<span class="dead">4</span>
</div>

<div id="detail">
detail section<BR>
description<BR>
start<BR>
end<BR>
due<BR>
completed<BR>
</div>
--
TJ

TJ wrote:

1. Is there a better way to do this (without using spans for my daily
blocks)?

Rows: Weeks
Columns: Days

Looks like tabular data. Use a table.

2. I need a recommendation on how I get the detail info displayed without
using stinky html form elements (in other words - using javascript instead
of making a trip to the server to get a newly generated page)?

http://w3.org/DOM/ - read the level 1 spec. You want to create and and
replace text nodes. Make sure you have the round-trip to the server as fall
back for browsers which don't support it. You should also consider the
implications on link sharing and bookmarking.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

David Dorward wrote:

Rows: Weeks
Columns: Days
Looks like tabular data. Use a table.

I was originally thinking that the purpose of CSS was simply to separate the
content from the formatting. What I seem to be picking up from this
newsgroup is that there are presentational purposes that require certain or
specific CSS methods. Should I be trying to figure out how the content
will look "acceptable" without formatting prior to applying a css? There
seems to be a bit of uncertainty as to which side of the dotted line the
html table tag falls... when and how it is used. In my application, I was
trying to avoid table cells for two reasons - because of a few articles
from people screaming that tables shouldn't be a part of a presentation
that is formatted with CSS... and because i wasn't planning on always
presenting a finite number of cells for a given calendar month. The span
tag allowed me to do both - not use tables and to not know the number of
cells.

http://w3.org/DOM/ - read the level 1 spec. You want to create and and
replace text nodes. Make sure you have the round-trip to the server as
fall back for browsers which don't support it. You should also consider
the implications on link sharing and bookmarking.

Ah! (and thanks so much for not berating me about it!)

--
TJ

TJ wrote:

Looks like tabular data. Use a table.

There seems to be a bit of uncertainty as to which side of the dotted line
the html table tag falls... when and how it is used. In my application, I
was trying to avoid table cells for two reasons - because of a few
articles from people screaming that tables shouldn't be a part of a
presentation that is formatted with CSS...

The message has got a bit muddled I'm afraid. Somehow "Don't use tables for
layout" has suffered from Chinese Whispers and become "Don't use tables".

HTML should be used to describe the data and its relationship to other data.
In the case of data which can be divided in to rows and columns with
specified meaning (e.g. Each row contains cells representing days which are
part of the same week. Each column contains cells representing the same day
of different weeks.) Then a table is the correct HTML to describe the
relationship.

It is tables which don't describe such a relationship that should be avoided
(this top cell, which spans 3 columns, contains the page header. The first
and last cells of the next row contain side bars, and the middle contains
the actual page content).

and because i wasn't planning on always presenting a finite number of
cells for a given calendar month.

I don't think it is possible to have an infinite number of days in a
month

The span tag allowed me to do both - not use tables and to not know the
number of cells.

You could use a script to generate the table for the current month. There
are probably dozens out there prewritten. I believe that Word Press
includes some PHP code that does it and that you can use under a Free
license.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Brian wrote:

I don't understand what you're trying to say here.

You've already answered it - when & why to use a table in a presentation
containing css. Thanks.

I'll post my next attempt at cleaning this in a few minutes on the other
branch of this thread.

--
TJ

Thanks for your reply. I'll study up on the DOM, but until then, my (php)
solution is:

xxxxxxx ddd
xxxxxxx ddd
xxxxxxx
xxxxxxx
xxxxxxx

1. Calendar is now a table
2. Always render 5 weeks gives finite number of days for rows & cols
3. Calendar is in a span (to get horiz align w/detail)
4. Detail is in a span (to get horiz align w/cal)
5. Table cell width & height are fixed using a div tag in each cell, to
show a minimum amount of data
6. Table cell overflow:hidden to prevent expansion

More feedback welcome.
Thanks!



<style type="text/css">
#calendar {float:left; padding-top: 0; margin-left:1em; table-layout:
fixed; font-family: century gothic, arial, tahoma; font-size: 9pt;
color:navy;}
.calcell{height: 6em; overflow:hidden;}
.day {vertical-align: top; text-align: left; width: 8em; height: 6em;
padding: 0; margin: 0.125em; border: 1px dotted #E0E0E0;}
.dead {vertical-align: top; text-align: left; color: #C0C0C0;
background-color: #F0F0F0;}
p.event {font-size: 6pt; color: navy; margin: 0;}
p.date {font-weight: bold; text-decoration: blink; margin: 0;}
img {margin-left: 2px; margin-right: 2px;}
.month {font-size: large; text-transform: capitalize; letter-spacing: 3px;
vertical-align:text-bottom;}
#detail {}
</style>

<span id="calendar">
<p class="month">
<a href="javascript:jsCalendarOffset(-1,'years');"><img
src="graphics/planner/2leftarrow.png"></a>
<a href="javascript:jsCalendarOffset(-1,'months');"><img
src="graphics/planner/1leftarrow.png"></a>
August&nbsp;2004
<a href="javascript:jsCalendarOffset(1,'months');"><i mg
src="graphics/planner/1rightarrow.png"></a>
<a href="javascript:jsCalendarOffset(1,'years');"><im g
src="graphics/planner/2rightarrow.png"></a>
</p>
<table class="calendar">
<tr>
<td class="day"><div class="calcell">1</div></td>
<td class="day"><div class="calcell">2<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">3</div></td>
<td class="day"><div class="calcell">4</div></td>
<td class="day"><div class="calcell">5</div></td>
<td class="day"><div class="calcell">6</div></td>
<td class="day"><div class="calcell">7</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">8<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="day"><div class="calcell">9</div></td>
<td class="day"><div class="calcell">10<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="day"><div class="calcell">11</div></td>
<td class="day"><div class="calcell">12<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">13<p class="event"><img
src="graphics/planner/anniversary.gif">EventName</p></div></td>
<td class="day"><div class="calcell">14</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">15</div></td>
<td class="day"><div class="calcell">16<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">17<p class="event"><img
src="graphics/planner/anniversary.gif">EventName</p></div></td>
<td class="day"><div class="calcell">18<p class="event"><img
src="graphics/planner/birthday.gif">EventNamel</p></div></td>
<td class="day"><div class="calcell">19</div></td>
<td class="day"><div class="calcell">20</div></td>
<td class="day"><div class="calcell">21</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">22</div></td>
<td class="day"><div class="calcell">23</div></td>
<td class="day"><div class="calcell">24</div></td>
<td class="day"><div class="calcell">25</div></td>
<td class="day"><div class="calcell"><p class="date">26</p></div></td>
<td class="day"><div class="calcell">27</div></td>
<td class="day"><div class="calcell">28</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">29</div></td>
<td class="day"><div class="calcell">30</div></td>
<td class="day"><div class="calcell">31</div></td>
<td class="dead"><div class="calcell">1</div></td>
<td class="dead"><div class="calcell">2<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="dead"><div class="calcell">3</div></td>
<td class="dead"><div class="calcell">4</div></td>
<tr>
</table>
</span>

<span id="detail">
detail section<BR>
description<BR>
start<BR>
end<BR>
due<BR>
completed<BR>
</span>

--
TJ