nowrap and IE

[wizardts]

I have been struggling with this Calendar 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.

 

Just

Like

This

 

the developer used: nowrap="nowrap"

 

To fix it, I removed and added white-space: nowrap to the text in CSS:

 

    .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; from the CSS 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 once the title is used. Or even better 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 skilled, obviously, but willing to slug it out.

[haku]

Are your rollovers CSS rollovers, or javascript rollovers? If they are css, you want this:

 

.calnk
{
  white-space: nowrap; // you already figured out this
} 

.calnk:hover // this is for the hover effect
{
  white-space: normal; // this will remove the no-wrap when the element is hovered over
}

[wizardts]

Thank you so much, that worked. The side effect in IE is that the event titles revert to one line per word (weird vertical stack) when you do the rollover. When the cursor is elsewhere, the titles look as they should. This is better than before, but still looks and acts weird. http://tiny.cc/calendar17

 

The popup window is Javascript but what is at issue here seems to be in the CSS/php.

 

Here is some of the CSS and the php string that seems to control this.

 

    .calnk a:hover {

        background-position:0 0;

        text-decoration:none; 

        color:#000000;

        border-bottom:1px dotted #000000;

        white-space: normal;

        }

    .calnk a:visited {

        text-decoration:none;

        color:#000000;

        border-bottom:1px dotted #000000;

        }

    .calnk a {

        text-decoration:none;

        color:#000000;

        border-bottom:1px dotted #000000;

        white-space: nowrap;

        }

  }

    span.event {

        font-size:0.95em;

      }

 

could this be fixed here? With a new class?

 

$details = '<br />*,<span class="calnk"><a href="'.$linky.'" style="'.$style.'">' . $event->event_title . '<span style="'.$style.'">' . $header_details . '' . $event->event_desc . '</span></a></span>';

 

 

 

[haku]

I don't get it - I thought that's what you asked for!

 

To fix it, I removed and added white-space: nowrap to the text in CSS:

 

...

 

Which works, but the fix causes the rollover text to go nowrap as well.

 

This made it sound like you wanted the rollover text to wrap (not nowrap). But it appears that you didn't mean this. What are you looking for?

[wizardts]

I think the problem is the developer made the event titles (headlines) and text the same class/style. So a nowrap that makes the headlines go wide (not break oddly) also made the text not wrap (as in string out across the page).

 

I managed to fix it, although now when you use the rollover the event titles (headlines) below revert to the weird breaks.

 

Hard to explain, but thanks your fix led me to a mostly satisfactory solution.