Accessibility

CSS Advisor

Creeping text

by CSSAdvisorAdmin on November 1, 2006
Edited by: sfegette on September 11, 2010
Avg Rating 2.5 (4)   |   Log in to rate post.

Tagged with Explorer 6.0 , Border , Position , Padding , Text , Explorer 5.5

Problem

If a block element is nested inside another block element that has a left or right border and padding-bottom specified, the second and subsequent occurances of such a set will result in the inner block's text creeping outside of the outer block on the side that the border is applied. The more times the set is repeated, the farther the text will creep.

Solution

Apply the Holly Hack, or add a bottom border to the outer nested DIVs.

Detailed description

This IE 5.5/6/Windows bug occurs when a block element is nested inside another, and the outer element has both a left (or right) border and bottom padding applied. Example CSS:

.creeping-div {
border-left: 1px solid black;
padding-bottom: 5px;
}

When this 'trigger' case is repeated, any subsequent instances of the case will exhibit the bug. The bug pushes text inside the inner element away from the border at a distance equal to twice the width of the border. This can result, in sequential cases, in exponential creep in subsequent cases - not good!

By applying either the Holly Hack, or a bottom border to the outer DIV, you can work around this bug.

This issue was originally reported by Holly Bergevin and Big John Gallant on positioniseverything.net.




Tagged with Explorer 6.0 , Border , Position , Padding , Text , Explorer 5.5

Tag it on del.icio.us or Digg

Text ID: MAGIK_CREEPING_TEXT



Comments (0)

To add a comment, please Log in.








CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)