Positioning textboxes over 'login box' background image

Question

I have a 'background graphic' which is basically a design with two premade 'white boxes' where I would like to position my login/password textboxes. Stubbornly they refused to move from the top left of that image.

I'm using 960 grid system but I think the question probably isn't affected by that.

I've tried various things - trying absolute positioning, padding/margin settings. Even in visual studio I used the menus (gasp!) to select position as absolute and dragged the box down. In the designer it looked to be in the right spot, css had been added but in the browser, there it was at the top left again. Any suggestions before my computer learns about a new type of 'windows'?

My goal is to be able to specify the x,y coordinates of where each textbox should be. I'd rather not resort to slicing and tables and all that stuff.

The css is the standard grid960 setup, I won't post it due to size. For the box containing the login image:

#loginPanel {
    background: url('/images/Main_Login2.png');
    height: 300px;
}

[have put various positioning settings against #loginPanel and #txtLogin but no luck so far]

The markup:

<div id="test" class="grid_2 ">
<br />
</div>
<div id="loginPanel" class="grid_8 ">

    <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

</div>

Any help appreciated!

Mark

Answer 1

Lots of views but no news. I figured this would be an easy one. Anyway, I've found the solution, not sure why the absolute positioning didn't work for me initially but I think the secret was positioning the container Divs rather than using the positioning on the textbox itself. The below code works a charm, hope it helps someone.

<div id="loginPanel" class="grid_8 push_2">
        <div style="position: absolute; top: 122px; left: 240px; width: 200px;">
            <asp:TextBox ID="TextBox1" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
        <div style="position: absolute; top: 152px; left: 240px; width: 200px;">
            <asp:TextBox ID="txtPassword" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
    </div>