IE crazy bug!

Gotta see this one.

[Yakhunter]

URL snipped
If you look at my homepage you will see a box called "social scene". Now look carefully at the bottom border of this box, and scroll the screen up and down several times. You will see the bottom border magically disappear and reappear.
This would be a neat effect if I wanted to create some magical site with completely ilogical rules, and set aside the laws of the physical universe. However, I had hoped this site would have a professional look to it.
Has anyone else come across this problem, or have any idea what may be wrong?

<div class="feature_main">
<div id="personal_main" name="personal_main">
<div class="feature_personal_header">
<div class="feature_personal_title" id="feature_personal_title" name="feature_personal_title">
Social Scene
<!--end feature_personal_title-->
</div>
<!--end feature_personal_header-->
</div>

<div class="drop_shadow_grey">
<div class="feature_personal_bg">
<div class="feature_personal"> This box here has an interesting bug:
When you scroll up and down watch the bottom border of this box carefully as it goes in and out
of the screen.
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<!--end feature_personal-->
</div>
<!--end feature_personal_bg-->
</div>
<!--end drop_shadow_grey-->
</div>

<div class="feature_personal_header">
<div class="feature_personal_title" id="feature_personal_title" name="feature_personal_title">
Comments
<!--end feature_personal_title-->
</div>
<!--end feature_personal_header-->
</div>

<div class="drop_shadow_grey">
<div class="feature_personal_bg">
<div class="feature_personal">
This will be a place for any comments by people who like to make comments. There can also
be any number of these boxes under any given section.
<!--end feature_personal-->
</div>
<!--end feature_personal_bg-->
</div>
<!--end drop_shadow_grey-->
</div>

</div>
</div>

css:

.feature_main {
background: url(images/feature_drop_shadow.gif) bottom left no-repeat;
margin: 0px 0px 0px;
padding: 0 4px 4px 2px;
clear: both;
}

/*Personal_main encapsulates the drop shadows, and features in order to keep them grouped, and give
them a uniform background for tab links. */
#personal_main {
background: #F2F2F2;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
}

/*Feature title image. Use feature.gif for background. */
.feature_personal_header {
background: #F2F2F2 url(images/feature_grey.gif) bottom left no-repeat;
height: 44px;
text-align: center;
color: black;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 1px;
}

/*Title text goes on top of feature header. This div is needed for browser compliance */
.feature_personal_title {
margin: 0;
padding: 15px 0 0 5px;
}

/*Drop shadow image to be used behind the feature containers. */
.drop_shadow_grey {
background: #F2F2F2 url(images/drop_shadow_grey.gif) bottom left no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 1px 0px;
}

/*Featured_personal is the section for personal info. just like the rest of the featured
boxes. Personal and band pages have the featured section nested in the "main" in order to give
the background effect from the tabs above. */
.feature_personal {
margin: 0;
padding: 5px 5px 5px 5px;
word-wrap: break-word;
}

.feature_markup {
word-wrap: break-word;
}

/*Fade background with text. */
.feature_personal_bg {
background: #E7E7E7 url(images/feature_fade.gif) top left repeat-x;
margin: 0px 3px 4px 3px;
padding: 0 5px 5px 5px;
}

[edited by: SuzyUK at 11:48 am (utc) on Feb. 23, 2006]
[edit reason] ooops sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

Hi Yakhunter and Welcome to WebmasterWorld!

what you describe is the "peekaboo bug" which is not strictly an isolated bug, it is related to Most of IE's other "bugs" [webmasterworld.com]

In fact if you just put the code you've posted above into a test page the whole content of that

.feature_personal

div disappears :o

Anyway fix is to force "layout" on the affected element and you can do that a few different ways as explained in the second part of that thread linked above.

short way:

.feature_personal {
margin: 0;
padding: 5px 5px 5px 5px;
word-wrap: break-word;
zoom: 1; /* add this */
}

Suzy