- This topic has 12 replies, 2 voices, and was last updated 13 years, 10 months ago by
.
-
Posts
-
The full-calendar year wraps below the month and both are left-justified in the center cell instead of centered using either IE 6 or 7. I haven’t looked at the code yet to see why.
This problem occurs because a 50px table td cell width is specified here:
table.fullcalendar td {
text-align: left;
width: 50px;
height: 50px;
border: 1px solid #888;
vertical-align: text-top;
}IE 6 & 7 set the specified 50px cell width for all cells which is too narrow for
td.month_name. However, IE 8 and Firefox 3.6.13 ignore the width specification if a cell is too narrow and widen it as necessary.The problem described above can be fixed by specifying a 71% width for the month_name cell (because
100*(5/7)=71.4285... ), e.g.:table.fullcalendar td.month_name {
text-align: center;
width: 71%;
}However, it seems to me that additionally the 50px td cell width specified in
table.fullcalendar td {}should be changed to 14% (because100*(/7)=14.2857... )to accommodate calenders of any width.Those changes provide correct full calendar cell layouts with IE6/7/8 and Firefox 3.6.13.
I added 14% and 70% to trunk (14%*5=70%), but I just tested it with an event for each day and using twentyten theme: the table overflows the rest of the page …
That doesn’t happen here with the Twenty Ten theme, but my full calendars are full-width on single-column, no sidebar WP pages. I will investigate and report back.
I reduced my full calendar width and could see the problem you described. That happens because tables are expanded without limit to accommodate total cell content width unless “table-layout:fixed;” is specified. Limitless expansion can be avoided by changing from:
table.fullcalendar {
border-collapse: collapse;
}To:
table.fullcalendar {
table-layout: fixed;
border-collapse: collapse;
}However, table column widths probably will not be equal after adding that, because of other styling issues. I will make other recommended changes after some testing.
Because colspan=”5″ is specified, the td.month_name width should be set to 100% instead of 70% (100% of the width of 5 columns), i.e.:
table.fullcalendar td.month_name {
text-align: center;
width: 100%;
}That change makes all the columns widths equal in size in Firefox 3.6.13. The remaining problem is cell content that is too wide to fit within equal-width columns. IE and Firefox deal with that problem differently. IE ignores “table-layout:fixed;”, makes column widths irregular, and prints content outside the right table boundary. Firefox honors the fixed layout specification and doesn’t violate the right table boundary, but internally prints cell content across cell column boundaries.
The solution to both those problems is to reduce cell content width to where it is less than the table column width. I am going to work on that next.
In 3.6.6, the “width:70%” or “width:100%” doesn’t change anything at all …
For the “table-layout: fixed” thingie: nice find, see also http://www.w3.org/TR/CSS2/tables.html#width-layout
“width:70%” or “width:100%” makes a big table layout difference here, but the amount of difference depends on individual cell content widths that vary according to event text word lengths. Columns 1 and 7 in an empty (no event) calendar with “width:70%” will be considerably wider than columns 2,3,4,5 & 6.
Anyone who has tried to make even simple HTML code render exactly the same in an assortment of different web browsers knows how difficult that can be without resorting to hacks that don’t validate, especially if one of those browsers is Internet Explorer. The problem is especially difficult with HTML tables, because no modern browser fully complies with W3C standards and they interpret the standards they do support differently. The problem is even more difficult in applications like EME where table cell contents have unpredictable sizes.
I spent a considerable amount of time yesterday making CSS and PHP code changes that cause the EME full calendar to render correctly and exactly the same with IE/6/7/8 and Firefox 3.6.13 using either the Twenty Ten page “Default Template” or the “One column, no side bar” option. I was able to do that without resorting to any hacks. The W3C validators validate that the resulting HTML and CSS are both standards-compliant.
I am going to post the PHP code change below, but because of considerations related to a new website I am working on I will send the associated CSS changes and some screen images to Franky via email after work later today so he can decide whether he wants to incorporate these changes into EME.
Starting at Line 177 in “eme_calendar.php” change from:
$full ? $fullclass = 'fullcalendar' : $fullclass='';
// Build the heading portion of the calendar table
$calendar .= "<table class='eme-calendar-table $fullclass'>n".
"<thead>n<tr>n".
"<td>$previous_link</td><td class='month_name' colspan='5'>$month_name $year</td><td>$next_link</td>n".
"</tr>n</thead>n".
"<tr class='days-names'>n".
$days_initials.
"</tr>n";To:
if ($full) {
$fullclass = 'fullcalendar';
$head = "<td class='month_name' colspan='7'>$previous_link $next_link $month_name $year</td>n";
} else {
$fullclass='';
$head = "<td>$previous_link</td><td class='month_name' colspan='5'>$month_name $year</td><td>$next_link</td>n";
}
// Build the heading portion of the calendar table
$calendar .= "<table class='eme-calendar-table $fullclass'>n".
"<thead>n<tr>n".$head."</tr>n</thead>n".
"<tr class='days-names'>n".$days_initials."</tr>n";Franky, I am concerned that the email I sent you yesterday with suggested full calendar CSS changes may have been trapped by a spam filter due to it having several file attachments. Please let me know whether you received it.
I received it today 🙂 But very busy as well 🙂
I already did a diff to see the differences but still need to check things out.
Ok. Don’t feel pressured to meet my needs. I have already implemented the changes at the website I am developing. I just wanted to be sure you received the email.
- The forum ‘Bug fixed or feature request implemented’ is closed to new topics and replies.