0

Thanks for your attention and time, I need your support please.

I am doing site with div (table less layout) structures.

I have a user login box which is made by divs in it and no table. Problem is that the control is not coming in center of page rather it is appearing on left side. Please guide me how I can resolve this issue.

I am pasting code below:

CSS Code

body
{
    margin:0 0 0 0;
    
}

div.banner
{
    background:gray url("../Images/grad1.gif");     
    height:62px;        
    
}
div.logo
{
    background:url("../Images/TraccrLogo.png") no-repeat;     
    width:217px;
    height:59px;
    margin:1px 0 0 1%;
}

div.staffLoginPanel
{
    height:200px;
    width:350px;
    border:solid 1px #F28226;
     display:block;
     position:fixed;   
    
     
    
}

div.staffLoginPanel .staffLogiPanelHeading
{    
    height:14%;
    width:100%;
    background: #F28226;
    color:White;
    text-align:center;    
    vertical-align:middle;  
    font:bold 16px Arial;    
     margin:0 0 0 0;
}

div.staffLoginPanel label
{
    color:#878787;
    font: bold 14px arial;
    margin:7px 0 0 12px;  
    display:block;       
    
}

div.staffLoginPanel Input[type="text"]
{
    border:solid 1px #F28226;
    background:#F2F2F2;
    font: bold 12px arial;
    width:225px;   
    border:dsshed 1px black;      
    margin:5px 0 0 12px;
}

div.staffLoginPanel input[type="submit"]
{
    background:#F28226;
    font: bold 12px arial;
    color:White ;
    margin:0 0 0 15px;       
}
div.staffLoginPanel div
{
    color:#F28226;
    font: bold 10px arial;    
    margin:20px 50px 0px 15px;
}

Page Code

<body>
    <form id="form1" runat="server">
    <div class="staffLoginPanel">
        <div class="staffLogiPanelHeading">
            Staff Login
        </div>
        <label>
            Staff ID</label>
        <input type="text" />
        <label>
            Password</label>
        <input type="text" />
        <asp:Button runat="server" ID="btnLogin" Text="Login" />
        <div>
            If you cannot remember your Traccr password, contact the Global IT Services Helpdesk
            and ask for a password reset</div>
    </div>
    </form>
</body>

I am very thankful to you for sharing and sparing time.


Thanks a lot.

Edited by peter_budo: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by cereal
0

In your CSS:
@ line 4 add this rule: text-align: center; so IE will center the div
@ line 27 remove: position: fixed; and add:

display: block;
margin: 0px auto;
text-align: left;

Right after add a new rule for the form:

form
{
   margin-top: 30px;
}

Bye :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.