Question

I have an overflow div which is on a jquery modal dialog.

                    <div style="overflow: auto; height: 300px; width: 780px;">
                        <fieldset>
                            <br />
                            <asp:TextBox ID="txtNote" runat="server" CssClass="notetext" Width="740px" Rows="6"
                                TextMode="MultiLine" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
                            <br />
                            &nbsp;
                        </fieldset>
                            <div id="notes">
                                <%
                                    Dim note As New note()
                                    Response.Write(note.shownotes(Val(txtRef.Text)))
                                %>                          
                            </div>    
                    </div>

Some of what I put in between the overflow is appearing ok and moves up and down with the scrollbar.

Other text which is within a css class does not move up and down with the scrollbar. It’s as if it’s not part of the div?

It does work in firefox as intended but not IE (as usual!)

Any ideas?

Anything I put in “p class=’triangle-right’> is appearing as if not part of the div, and it’s ot scrolling up & down.

.triangle-right {
    position:relative;
    padding:5px;
    /*margin:1em 0 1.5em;*/
    margin:1.5em 0em 1.5em;
    color:#000000;
    background:#ffffff; /* default background for browsers without gradient support */
    width:730px;
    border:1px solid #dddddd;
    line-height:1.4em;  
    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

/* creates the larger triangle */
.triangle-right:before {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-40px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    width:0;
    height:0;
    border:20px solid transparent;
    border-top-color:#aaaaaa;
}

.triangle-right:after {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-40px; /* value = - border-top-width - border-bottom-width */
    left:39px; /* controls horizontal position */
    width:0;
    height:0;
    border:21px solid transparent;
    border-top-color:#ffffff;
}  

Answer 1

I’ve hack-fixed this in the past with

.overflow-div * {
    position: relative;
}

However, the problem is related to the positioning of child elements. Make sure that .triangle-right’s parent has a position relative.

I recommend starting from scratch with the styles and making sure the positioning works before adding anything else. Often I’ve found obscure issues this way.