Getting some weird results when nesting Login control inside absolutely positioned element

Question

Hi

Login control is nested inside the div element.

aspx file:

        <div id=”parentE”>
            <asp:Login ID="Login1" Width="100%" runat="server">
        </asp:Login></div>

CSS file:

        #parentE
        {
           position: absolute;
           top: 16px;
           right: 300px;
           width: 60px;
           height: 80px;
           padding: 2px 2px 2px 2px;    
           font-size: 9px;
        }

a) As far as I know, the width of a nested element (Login) should by default be constrained by the width of a parent element. But that isn’t the case, since Login is always expanded to its full width, no matter how small is the width of a #parentE element. Any idea why Login doesn’t have its width constrained?

b) I’m also getting some inconsistent results: if I change the value of “right” property to 200px, then element should be closer to the right edge by one third, but is in fact closer to the edge by 50%. If I then change the value of “right” property to 100px, then the element is only few pixels removed from the right edge of the browser ( while it should be 100px removed from the right edge ). Any idea what the reasons are for such behavior?

thanx

Answer 1

Your css selector is for "parentE", and your div has an ID of "parent". So it doesn't apply to the div in your code snippet... Is this copy and pasted or is that a typo?