Solution (Clean Solution) - with Side Effects
Date of the Solution
Fri Jul 17 03:06:49 2009
5.5 and 7
The cleanest way to fix this bug is to remove layout from the container.
The methods to make an element loose layout vary. The idea is to not use any properties that give an element layout. Keep in mind that it is not always possible; for example, when properties that give layout are crucial to the page style or an element has layout by default.
Let's see how we can fix our demo using this method.
First of all, since one of the triggers is container having layout, this is exactly where we should start looking -
<div id="container">. A quick scan of the CSS code for the demo reveals that
width property, which in turn gives it layout. We need to loose it. How? Since the set width is in percent units (80%), let's try using margins instead. And since we already have
auto value for our left and right margins, we will need to make them both equal (10% each).
Here is it, fixed demo:
I am cut off
- HTML Code:
I am cut off<br>
- CSS Code:
padding: 2em 0;
margin: 2em 10% .5em; /* 10% left and right margins, no width */
margin: -4em 2em 0; /* negative margin is used */
Fixed version looks the same as original demo, however the bug does not appear anymore.
Removing layout from the container causes peek-a-boo bug to appear in IE versions below 7. If you are supporting such versions consider using "layout solution" for this bug.