Topic: Norap and undoing norap

I have been struggling with this page for some time: http://tiny.cc/calendar17

The problem is with IE (sigh). The event titles break into vertical lines of single words when viewed in most/some IEs, including 8.

To fix it, I added white-space: nowrap to the text

.calnk a {
text-decoration:none;
color:#000000;
border-bottom:1px dotted #000000;
white-space: nowrap;
}


Which works, but the fix causes the rollover text to go nowrap as well. If I remove white-space: nowrap; it all gets better but the titles are back to stupid.

I tried deleting the nowrap for a new class:

.calnka a {
text-decoration:none;
color:#000000;
border-bottom:1px dotted #000000;
}

But couldn't get it to work in this string (my attempts not shown):

$details = '<br />*<span class="calnk" {white-space:nowrap}.><a href="'.$linky.'" style="'.$style.'">' . $event->event_title . '<span style="'.$style.'">' . $header_details . '' . $event->event_desc . '</span></a></span>';


What I need is for the event desc to go back to a wrap. Or a php fix that lets the CSS go back the way it was.

In case it helps, this is in the CSS as well:

.event-title-break {
width:96%;
margin-left:2%;
margin-right:2%;
margin-top:5px;
margin-bottom:5px;
text-align:center;
height:1px;
background-color:#000000;
}
.event-content-break {
width:96%;
margin-left:2%;
margin-right:2%;
margin-top:5px;
margin-bottom:5px;
height:1px;
background-color:#000000;
}


Thanks I am not overly skilled but willing to slug it out.