Hi all,

I'm using a div as a pop-up on a page to show some addtional information.
First some code:

<div class="floatingDiv" id="popup">
some txt here...
<p style="margin-top: 0px" onMouseOver="ShowContent('popup',0); return true;" onMouseOut="HideContent('popup'); return true;" >
.. short message here
	display: none;
	position: absolute;
	border: 1px solid #000000;
	background-color: #FFFFEE;
	padding: 10px;
	font-size: 8pt;
	/*white-space: pre-line;*/

So when I hover the short-text, a popup shows and displays: " some txt here...". This works.

However: I have a problem with the wrapping of the text. When viewing this in FF3 it shows correct:

some txt here...

In IE7 however, it shows as:


So I surfed around a bit and found white-space: nowrap; . This fixes the problem with wrapping in IE, but gives new problems when the shown text exceeds the width of the screen. I've also tried other options as line-wrap, pre-wrap and pre. But they all have the same behaviour on IE as default.
Is there another option that I can use?

Just assign widht at '.floatingDiv' hope that will solved your issue.

Just assign widht at '.floatingDiv' hope that will solved your issue.

It could, but that's not desired functionality. The text can be an a random place in a page, so if I assign a fixed-width to the div, the chance exists that the div will still exceed the width of the page if the text is on the right side of the screen.

So I've tried using a fixed width and it worked as you expected. But since I really would like to this without using fixed-width, I was looking at min-width: , but this apperantly was never implemented in IE, so it doesn't work either.. Does anyone have some other ideas? I'd like to do this with html/css only and no Javascript etc if it's possible.

I think in IE6 and its later version you are getting this, insteed of that you can use


, but other issue will arise. Betting assign fixed width where height will be flexible. Content will be fitted best.