Internet Explorer 7 diff vs IE 6, Firefox
Brought to you by:
cknudsen
Menu
▾
▴
I notice that Internet Explorer 7 on Windows XP displays month.php and day.php differently from Internet Explorer 6 and Firefox. There is more height in the heading area, and the date text and category text are positioned much lower in the heading area than in Firefox or IE 6.
Online examples:
http://www.scrapbookcottage.ca/calendar/day.php
http://www.scrapbookcottage.ca/calendar/month.php
http://elevenblackmen.com/calendar/day.php
http://elevenblackmen.com/calendar/month.php
Has anyone got the cure for this height and alignment problem? Can it be fixed just by CSS?
We added a CSS fix for this in later versions. The placement may not be exactly the same because you are using an older version of WebCalendar, but from the looks of your site, you can handle it. This hack would be applied to month.php. Something similar should work for day.php
<div class="title"' //This is called navtop in later versions
// Hack to prevent giant space between minicals and navigation in IE.
. ( get_web_browser () == 'MSIE' ? ' style="zoom:1"' : '' ). '>';
-Ray
Thanks, I'll give that a try, maybe as a custom style to test, and then maybe a change to the PHP if there are cross-browser problems.
A small clarification - I am the 1.0.5 WebCalendar download. The example URLs I used in my original post are by other parties, not me. I think I found the sites in an a list of WebCalendar users.
A follow-up. I didn't use the "zoom: 1" hack because it wasn't giving the results I wanted. I ended up placing the title block and the two minicalendars in a new div, setting the new containing div to position: relative, and used absolute positioning to place the minicalendars and the title to where I wanted them to be in Firefox and IE 6 and 7.
Can you post your new code here?
Thanks!
-Ray
For my version of WebCalendar (1.0.5), this is the relevant part of my rearranged php:
From month.php
<div id="da_cal_head"> // New div to hold minicalendars and title
<?php
display_small_month ( $prevmonth, $prevyear, true, true, "prevmonth",
$monthURL );
/* NEW LOCATION FOR TITLE DIV */
?>
<div class="title">
<span class="date"><br /><?php
echo date_to_str ( sprintf ( "%04d%02d01", $thisyear, $thismonth ),
$DATE_FORMAT_MY, false, false );
?></span>
<span class="user"><?php
if ( $single_user == "N" ) {
echo "<br />\n";
echo $user_fullname;
}
if ( $is_nonuser_admin ) {
echo "<br />-- " . translate("Admin mode") . " --";
}
if ( $is_assistant ) {
echo "<br />-- " . translate("Assistant mode") . " --";
}
?></span>
<?php
if ( $categories_enabled == "Y" && (!$user || ($user == $login || $is_assistant ))) {
echo "<br /><br />\n";
print_category_menu('month',sprintf ( "%04d%02d01",$thisyear, $thismonth ),$cat_id );
}
?>
</div>
<?php
/* END OF TITLE DIV */
display_small_month ( $nextmonth, $nextyear, true, true, "nextmonth",
$monthURL );
/* OLD LOCATION FOR TITLE DIV */
?>
</div> <!-- End of da_cal_head -->
=======================================================
=======================================================
Associated CSS:
#da_cal_head {
position: relative; /* This "position: relative" declaration is necessary for absolute
positioning of the minicalendars and the title */
width: 100%;
height: 13em;
margin: 0 0 10px 0;;
padding: 0;
}
body#month div.title {
position: absolute;
left: 25%;
width: 50%;
height: 10em;
margin: 2em 0 0 0;
padding: 0;
}
body#month div#cal_div_obj table.minical{
position: absolute;
width: 25%;
}
body#month #prevmonth{
left: 0;
}
body#month #nextmonth{
right: 0;
}
=======================================================