Member Avatar for n_e

Hi all,

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

<td>
<div class="floatingDiv" id="popup">
some txt here...
</div>
			
<p style="margin-top: 0px" onMouseOver="ShowContent('popup',0); return true;" onMouseOut="HideContent('popup'); return true;" >
.. short message here
</p>
</td>
.floatingDiv
{
	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:

some
txt
here...

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?

  • 2 Contributors
  • 4 Replies
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dipak_passion

Dani AI

Generated

Short diagnosis: IE7 is likely using a different "shrink‑to‑fit" result for an absolutely positioned block, so the popup ends up with a very narrow computed width and IE wraps every word onto its own line. The CSS spec explains that absolutely positioned elements with width:auto can shrink to fit; different engines can produce different widths (CSS2.1 shrink‑to‑fit).

Concise, CSS-only fixes that avoid a fixed pixel width:

  • Give the popup a capped width instead of a hard width: use max-width in em/px/%. That prevents the tiny shrink width while still allowing the box to remain flexible. min-width is supported in IE7+ (only IE6 lacks full support) — see MDN: min-width.
  • Allow long words to break so the box never forces horizontal scrolling: use the modern overflow-wrap: break-word and the legacy word-wrap: break-word for IE compatibility (MDN: overflow-wrap / word-wrap).
  • Anchor the popup to the right edge of its positioned container when you need it to stay inside the page edge (use right:0 / left:auto on the popup and make sure the containing TD is position:relative). If you need automatic left/right flipping based on viewport position you will need a small bit of JS; pure CSS cannot reliably flip placement in older browsers.

Practical checklist for troubleshooting:

  • Temporarily give the popup a visible border/background to inspect computed width in IE dev tools.
  • Try a conservative max-width (for example, in em), add word-wrap: break-word, and keep white-space at normal wrapping.
  • If supporting IE6 matters, use conditional comments to serve an IE6-specific stylesheet (min-width hacks or JS fallback); otherwise IE7 fixes above should suffice.

As noted, a fixed width works, but using max-width + word-wrap gives the flexible behavior wanted without locking the popup to one size.

Recommended Answers

All 4 Replies

Member Avatar for dipak_passion

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

Member Avatar for n_e

Hello!
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.

Member Avatar for n_e

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.

Edited by n_e because: n/a
Member Avatar for dipak_passion

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

white-space:nowrap

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.