EE calendar module IE CSS problem

#1 / Sep 30, 2008 12:41pm

stephen-wilson

16 posts

EDIT: THIS CODE IS OLD, PLEASE SEE MY NEXT POST. S

Hi everyone,

I appreciate this is a CSS problem not so much a problem with the module itself however, I’m hoping a CSS guru may be able to help me out!

I’ve setup a calendar @ http://www.acceleratorhq.com/cjl/index.php/about/

There will only ever be 2 events on the same day so I thought it would be a nice idea to use stars to indicate more than one event. The problem I’m having is that whilst this renders okay in FF etc. it breaks down in IE. Ideally I would like the day numbers range top right and the stars range bottom left.

The code I am using so far is as follows:

CSS

/* ---------->>> MINI CALENDAR <<<----------- */

table.calendar {
    margin:20px;
    border-left:10px solid #eee;
    background-color:#fff;
    color:#666;
}

table.calendar tr.calendarheader {
    background-color:#eee;
    font:1.4em/25px Arial Narrow, Arial, Helvetica, clean, sans-serif;
}

table.calendar tr th.calendarmonth {
    display:block;
    float:left;
    width:125px;
    height:25px;
    text-align:center;
}

table.calendar tr th.calendarmonthlink {
    display:block;
    float:left;
    width:25px;
    height:25px;
    text-align:center;
}

table.calendar tr th.calendarmonthlink a,
table.calendar tr th.calendarmonthlink a:hover {
    color:#906;
    text-decoration:none !important;
}

table.calendar td {
    display:block;
    float:left;
    width:24px;
    height:24px;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    font:1em/10px Arial Narrow, Arial, Helvetica, clean, sans-serif;
}

table.calendar td div.float {
    position:absolute;
    float:left;
}

table.calendar tr td.calendarday {
    background:#ccc url("images/bg-calendar-day.gif") repeat-x;
    font:bold 1.1em/25px Arial Narrow, Arial, Helvetica, clean, sans-serif;
    text-align:center;
}

table.calendar tr td.calendarblank {
    background-color:#eee;
}

table.calendar tr td.calendartoday {
    display:block;
    width:24px;
    height:24px;
    background-color:#f0d9e8;
}

table.calendar tr td.calendarcell {
    background-color:#f0f0e0;
}

table.calendar tr td.calendarcell a {
}

HTML

Any help would be greatly appreciated. This is the last 2% of the site before completion!

Thanks,

Steve

#2 / Sep 30, 2008 1:04pm

Robin Sowell
13255 posts

It does look good in FF on my Mac. But my css skills fail at tweaking for IE. Let me shift this up to the css forum. I suspect the gurus there can get this sorted and it’s a better fit overall.

#3 / Oct 01, 2008 5:05am

stephen-wilson

16 posts

Think I may have come to a sort of fix @ http://www.acceleratorhq.com/cjl

I’ve wrapped a div around both the {day_number} and the {entries}, each of these have a width of 24px and a height of 12px so they’ll make up a 24px x 24px square for each of the calendar days. However, in IE the {day_number} appears to be vertically aligned middle does anyone know why this is occurring?

Code as follows:

CSS:

/* ---------->>> MINI CALENDAR <<<----------- */

table.calendar {
    margin:0 20px 20px 20px;
    border-left:10px solid #eee;
    background-color:#fff;
    color:#666;
}

table.calendar tr th.calendarmonth,
table.calendar tr th.calendarmonthlink {
    display:block;
    float:left;
    width:125px;
    height:25px;
    background-color:#eee;
    font:1.4em/25px Arial Narrow, Arial, Helvetica, clean, sans-serif;
    text-align:center;
}

table.calendar tr th.calendarmonth {
    width:125px;
    height:25px;
}

table.calendar tr th.calendarmonthlink {
    width:25px;
    height:25px;
}

table.calendar tr th.calendarmonthlink a,
table.calendar tr th.calendarmonthlink a:hover {
    color:#906;
    text-decoration:none !important;
}

table.calendar td {
    display:block;
    float:left;
    width:24px;
    height:24px;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    font:1em/10px Arial Narrow, Arial, Helvetica, clean, sans-serif;
}

table.calendar tr td.calendarday {
    background:#ccc url("{site_url}themes/site_themes/default/images/bg-calendar-day.gif") repeat-x;
    font:bold 1.1em/25px Arial Narrow, Arial, Helvetica, clean, sans-serif;
    text-align:center;
}

table.calendar td div.day,
table.calendar td div.url {
    overflow:hidden;
    width:24px;
    height:12px;
}

table.calendar td div.day {
    text-align:right;
}

table.calendar tr td.calendarcell {
    background-color:#f0f0e0;
}

table.calendar tr td.calendartoday {
    background-color:#f0d9e8;
}

table.calendar tr td.calendarblank {
    background-color:#eee;
}

HTML:

Thanks,

Steve

Thread

stephen-wilson

Robin Sowell

stephen-wilson

Username

Password

Thread