Weird positioning behaviour using ASP.Net, CSS, VS 2008, in IE7

Question

I am working on a webpage in ASP.Net/C# that uses absolute positioning for a textbox, for several in fact. It was working just fine, until I added some more text boxes. That is, the existing text boxes still positioned correctly, but the new ones did not, despite the fact that I created new styles in the CSS for them just like the others. An exampe is below:

.pieceBox
{
    position: absolute;
    top: 425px;
    left: 133px;
    background-color: White;
    color: Black;
    width: 132px;
    font-weight: bold;
    text-align: center;  
}

Identical styles in the same CSS file (with different names of course) both above and below this one work fine. I have checked, double-checked, and triple-checked the name of the style in the CssClass attribute of the and it is correct. However, no matter what I do, including giving it a new name, copying the old entries, and renaming them, etc., these three new text boxes position themselves at the top of the page, whereas the others show in their correct absolute positions. I looked at the aspx source page and made sure they are not in some other DIV, etc. I am at my wits end with it. I did come up with a workaround for now, but it is not how I want to leave it (involves programmatically creating some HTML inside an Asp:Literal.)

I checked the resulting source (via IE's viewsource) and the class is set correctly in the resulting HTML.

One more thing in case this matters; this website project was originally created in VS 2005 and converted to VS 2008 format. Not that it should matter, but thought I would mention it.

Has anyone else experienced this type of behavior?

Answer 1

It is difficult to explain problems like this if no actual code is provided, but my first guess would be that you're having problem with new controls that are not using the same parent containers as the old ones.

Have you checked the css rules that apply for parent containers of properly working text boxes? They usually should be set to "position: relative;" if you want to have your child controls aligned according to them.

Also make sure that the layout problem isn't occurring due to overlapping of the controls i.e. two text boxes might have similar or near positions and then one comes over another.

In any case, if you want proper and straight solution to your problem, i would suggest that you post part of your code.

Answer 2

If you have absolutely positioned elements that have a parent that is either absolutely or relatively positioned, they will position themselves relative to their container instead of the whole page.

In other words, your elements might be positioning themselves from different origin points.