Member Avatar for cguan_77

the code below works fine in IE7 but not in firefox 3 the last sentence is cut.. it display only until "7. The quick brown fox"
what could be wrong? please help... thanks :)

.ws11 {font-size: 16px;}


<div id="text17" style="position:absolute; overflow:hidden; left:226px; top:165px; width:539px; height:144px; z-index:1"><div class="wpmd">
<div><font class="ws11"><B>March 2009</B></font></div>
<div><font class="ws11"><B><BR></B></font></div>
<UL>
<li><font class="ws11">1. The quick brown fox 2.The quick brown fox 3. The quick brown fox 4. The quick brown fox</font>
<BR><DIV></DIV><BR>
</UL>

</div></div><div id="text18" style="position:absolute; overflow:hidden; left:226px; top:275px; width:539px; height:144px; z-index:1"><div class="wpmd">
<div><font class="ws11"><B><BR></B></font></div>
<UL>
<font class="ws11">1. The quick brown fox 2.The quick brown fox 3. The quick brown fox 4. The quick brown fox 5. The quick brown fox 6.The quick brown fox 7. The quick brown fox 8. The quick brown fox</font>
</UL>
  • 1 Contributor
  • 1 Reply
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cguan_77

Dani AI

Generated

Nice follow-up, — changing the container height exposed the real issue. When text is clipped in one browser but not another, it usually means the fixed container size doesn't match how that browser computes line boxes, margins or font metrics. Firefox tends to be stricter about line-height and list/margin handling than older IE builds, so a pixel-short container will clip the last line.

Practical checks to reproduce and diagnose:

  • Turn off overflow:hidden (or switch to overflow:visible) temporarily to see the hidden content.
  • Give the container a visible outline or background so you can see its computed box.
  • Inspect the computed height, line-height, font-size, and the element margins in the browser dev tools.
  • Verify the page is in standards mode (correct DOCTYPE). Quirks vs standards mode changes layout behavior across browsers.

Robust fixes to apply:

  • Use semantic markup (one <li> per item) and remove deprecated tags like <font> or odd <br>/<div> hacks inside lists.
  • Prefer flexible sizing: use height:auto or min-height rather than a fixed pixel height so the block grows with content.
  • Set an explicit line-height that matches the font sizing to avoid subpixel clipping.
  • If you must absolutely position the box, make its height large enough or compute it dynamically (JS) rather than rely on tight fixed pixels.

Example pattern to start from:

.list { font-size:16px; line-height:1.4; }
.container { position:absolute; min-height:120px; overflow:visible; }
<ul class="list">
  <li>First item</li>
  <li>Second item</li>
</ul>

Final note: your fix (increasing the height) is a valid quick solution, but for long-term stability use semantic markup and flexible sizing so different browsers and font settings won't break the layout.

Member Avatar for cguan_77

able to figure out i just change the value of the height and it works well in firefox and ie.. ;)

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.