Text wrapping incorrectly in Internet Explorer

Question

To provide help to users - a div appears when they click on a question mark:

A javascript function makes the div appear:

function showhelpby(whichdiv,e,divwidth,leftorright,message)
{
    e=(!e)?window.event:e;//IE:Moz

    document.getElementById(whichdiv).style.display = 'block';
    document.getElementById(whichdiv).style.width = divwidth + 'px';
    if (leftorright == 'left')
    {
        if (e.pageX)
        {
        document.getElementById(whichdiv).style.left = e.pageX - divwidth - 20 + 'px';
        document.getElementById(whichdiv).style.top = e.pageY + 'px';
        }
        else if(e.clientX)
        {
        document.getElementById(whichdiv).style.left = window.event.clientX - divwidth - 20 + 'px';
        document.getElementById(whichdiv).style.top = window.event.clientY + 'px';    
        }
    }
    else
    {
        if (e.pageX)
        {
        document.getElementById(whichdiv).style.left = e.pageX + 20 + 'px';
        document.getElementById(whichdiv).style.top = e.pageY + 'px';
        }
        else if(e.clientX)
        {
        document.getElementById(whichdiv).style.left = window.event.clientX + 20 + 'px';
        document.getElementById(whichdiv).style.top = window.event.clientY + 'px';
        }
    }
    document.getElementById('message').innerHTML = message;
}

The css for the divs that appear is:

div.notes
{
font-family: Verdana;
font-size: 12px;
color: #000066;
line-height:140%;
display:none;
border-style:solid;
border-width:2px;
border-color:#000099;
position:absolute;
padding:15px;
background-color:#FFFFFF;
background-image:url(images/F3F3F3White200.jpg);
background-repeat:repeat-x;
overflow-y:auto;
overflow-x:hidden;
z-index:201;
}

And the text that shows within the divs is in <p> tags with no css styles applied.

I have been using the above for years to show little 'help' divs that pop up.

Now, all of a sudden, developing a site in Visual Studio 2010 - for use on an intranet - being viewed (after publishing) using IE 9 (we have to use IE) - the text in my help divs does not wrap properly. The text appears justified and words just break wherever they want . This has nothing to do with long words not breaking. The word 'the' may end up with the 't' on one line and the 'he' on the next.

Apart from the usual muttering about 'bloody Internet Explorer - can they do NOTHING right?' - anyone know what I need to do to get something as basic as text wrapping properly within a fixed width div?

Answer 1

Have you tried adding word-break:normal? http://www.w3schools.com/cssref/css3_pr_word-wrap.asp