Email conversation
| From | Bloodflowers |
|---|
| To | Me |
|---|
| Subject | Fixing one of internet Explorer's glitches. the Overflow:visible; problem- |
|---|
| Date | 16 October 2005 22:29 |
|---|
I was trying to get around this problem, and found out that this works!
The overflow:visible; "solution":
If the element that will overflow is set to "position:absolute;" and
the parent block is "position:relative;" the parent box will not grow
outside the specified dimensions to accommodate the child element.
It's an odd solution, but simple and works in Firefox and IE. Opera
screws things up though. Here's the html you used in your example
adapted by me to fix the IE problem.
<div class="demo">
This represents a page layout:
<div class="fakePage">
<div class="thehead">
My FakePage
</div>
<div class="thelinks">
<a href="./">Link goes here</a><br />
<a href="./">Link goes here</a><br />
<a href="./">Link goes here</a><br />
</div>
<div class="thepage" style="overflow:visible;">
<div style="position:relative;"> <!-- I added this here -->
<p>Demo: These words should be in a box.</p>
<p>The box should not overlap the links to the right.</p>
<!-- and this style rule as well -->
<p style="position:absolute;">The long word in this
line should overflow the edge of the box but should not force the box
to stretch over the links:
areallyreallylongwordthatsomeonepasted</p>
</div>
</div>
</div>
</div>
| From | Me |
|---|
| To | Bloodflowers |
|---|
| Subject | Re: Fixing one of internet Explorer's glitches. the Overflow:visible; problem- |
|---|
| Date | 17 October 2005 09:21 |
|---|
Bloodflowers,
> I was trying to get around this problem, and found out that this works!
yep, I have used this myself before. Proposed it to Dean Edwards - his
confusingly named "IE7" patch contains this fix :)
> works in Firefox and IE. Opera screws things up though.
Just to be awkward, Opera gets things right, the other two get them wrong. A
box with position:absolute; is not constrained by the width of its parent.
What should happen is the box should shrinkwrap to fit the longest line - in
this case the really long word. The rest of the content's inline boxes can
also spill to that width (Firefox and IE seem to think they can't).
However, getting the response you want is easy. You need to set the desired
width on the absolutely positioned element. You need to do this to force its
content width to remain within the same width as its parent. IE will get it
wrong of course, but that actually leads to the correct response in IE.
Compliant browsers will allow the long word to overspill, but not the main
content, so everyone's happy.
<p style="position:absolute;width:15em;"> ... </p>
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/