[SOLVED] Calendar plugin (Kieran O'Shea's) and Atahualpa and MSIE
 

There was a thread here about how Atahualpa works with Kieran O'Shea's otherwise good calendar plugin. http://forum.bytesforall.com/showthread.php?t=2148

I thought it was working nicely, but then a user who uses a PC with MSIE reported a nasty problem: the event titles break after each word, so a title with 4 words takes up four very short lines. Ugh! I can't figure out how to deal with this in the CSS. Is this perhaps something I could deal with using Atahualpa's CSS insert?

If you can see this in MSIE, read it and weep: http://www.larchmontgazette.com/community-calendar/

It's the first calendar. I have the old calendar still running until we figure out which new one to go with.

what version of IE? I'm looking at it in ie* and it looks good to me.

I looked at it last night with IE 8 on my husband's Windows XP laptop, and the event titles were all just one word per line.

Can you think of a CSS way to fix this? I didn't check this using another theme, but I doubt it's a theme issue, do you?

I would also like to force the event titles, when they do wrap to the next line, to stay lined up like in an unordered list. I'd be happy to pay somebody to figure out the CSS for this.

Make sure you are looking at the Kieran O'Shea calendar, not the old Perl script calendar under it.

At first I wondered it it might be a font issue, like smeone not having the first fonts and displaying one of the others, but a quick test showed that is not it.

But as I look at it, it looks to me like IE is only using about 50% of the width of each cell?? what the hey! so I start plugging at it and made a copy and ripped it apart and eventually I discover something.

In the CSS for the table, you have defined 'day-with-date', 'day-without-date', and 'current-day' all with a width and height of 60px. This leads to a nice square box. The calendar-table itself is defined as 100% of the area it is in. So now for some math.

Your container is fized at 990px - 20px (the padding on the sides) = 970px
the left sidebar is 170px so 970px - 170px = 800px is the size of the center area.

each cell of the table (or day of the week) is 60px times 7 days = 420px which is just about 1/2 the width of the center area.

IE is behaving very badly once again. Eventhough is displays the table taking the entire 800px, each cell only uses 1/2 the width of the cell.

In this case, change the height and width to 100px for each of the three CSS elements 'day-with-date', 'day-without-date', and 'current-day'

Thanks, JD. I've done what you suggested. I looked at the calendar in MSIE. No change.

Whew. At first, I was also getting a very broken site when looked at in MSIE, but I refreshed the page and it's OK. Except that the calendar fix didn't work.

And I notice that even the days of the week are messed up.

Sund
ay

Frida
y

when I first was looking, it looked fine, but I went back later and it looks awful, but it looks fine again. Is someone playing with the theme??? also it still shows the 60px when I look at the source.

Well, I'm confused. The plugin has a Calendar Options section in the plugins admin area, and a place to configure the stylesheet. That's where I did it. Maybe I need to work from the main stylesheet?

If I remember correctly, you do make changes there, but if you have the 'Tick this box if you wish to reset the Calendar style to default' checked, it wipes out any changes. that's why I suggested making the changes in this code in the other post.

btw - when the site went fluky, I saw it in Safari and on several pages. Must have been a issue with getting the theme css file

Now I've disabled the calendar plugin and wp-num-captcha plugin too. I was getting awful errors and the site was completely broken.

The problem is that the plugin is using a fixed width for each of the days of the week, in this case 60px, while the table width is defined as 100%. In this case the space the table takes up is 800px, so this means the cells should only use 420px but they are extended across the full 800px of the table.

Safari and Firefox use the width of each cell (800px/7=114px) while IE only uses teh 60px so it looks like it's only using half of each cell in the table.

The solution is to change the widths of
'normal-day-heading',
'weekend-heading',
'day-with-date',
'day-without-date',
'current-day'
all to 'width:14.3%;' (14.3 x 7 = 100.1) this way if you ever change the width of your page it will correct the amount of space to use automatically.

I've applied this fix, and it works! Thank you, thank you! Another donation on the way. This is a super way to end 2009.