CODEWITHSUNDEEP
htmlcssinternet-explorer-6
user369661
user369661

Reputation:

ie6 text wrapping issue

My tool tip text doesn't wrap with given text in ie6, live example http://jsfiddle.net/hWAJh/

All other browsers text is wrapped, but in IE6 doesn't, used code as follows.

HTML code

<div id="CountryDiv" class="toolTipHolder">  
    <p>
        <img src="question-mark.png" alt=""/>
        <span>Best tooltip goes here for user information, can you feel this?</span>   
    </p>
</div>

CSS code

div.toolTipHolder {
    position:relative;
    z-index:24; 
}

div.toolTipHolder p{ 
    display:block;
    position:absolute;
    top:0; 
    left:0; 
    width:150px;
    height:150px;
    background-color:#FFF; 
    border:blue 1px solid;
    color:#000;
    text-align: left;
    font-size:11px;
    padding:5px;
}

div.toolTipHolder p span {
    padding-left:5px;
    width:150px;
    word-wrap: break-word;
    border:red 1px solid;
}

Upvotes: 1

Views: 697

Answers (2)

MissScarlett
MissScarlett

Reputation: 63

Adding, 

white-space:nowrap

Worked for me for IE6.

Upvotes: 0

user369661
user369661

Reputation:

Changed as follows, it works for me.

div.tooltipText {
    margin-left:5px;
    width:80%;
    height:140px;
    font-size:11px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space : normal      /* Internet Explorer 5.5+ */
}

Upvotes: 1

Related Questions