SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy css positioning in IE5 and IE6, pls help!

    Hi ppl, for the life of me I cannot align a table mixed with CSS horizontally and vertically in the center of the screen in IE5 and IE6.

    It is a simple login page, where if a user fails to login, it takes them to another page which needs to be exactly the same, apart from an image appears instead of the login form. The other images need to stay put.

    Also, please take a look at the attachments, I also cannot get the images to absolute where I want them (not move a pixel )

    *Pls* take a look, and see what you think. Any suggestions will be great, or maybe a different route to write the 2 pages.

    Thanks;
    Richard
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rawkinrich1979
    Hi ppl, for the life of me I cannot align a table mixed with CSS horizontally and vertically in the center of the screen in IE5 and IE6.

    It is a simple login page, where if a user fails to login, it takes them to another page which needs to be exactly the same, apart from an image appears instead of the login form. The other images need to stay put.

    Also, please take a look at the attachments, I also cannot get the images to absolute where I want them (not move a pixel )

    *Pls* take a look, and see what you think. Any suggestions will be great, or maybe a different route to write the 2 pages.

    Thanks;
    Richard
    i usually have to use several style sheets and comment conditionals to compensate for IE problems
    Free Science Homework Help
    http://www.physicsforums.com

  3. #3
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For our users, we will only be using IE5+ / IE 6.

    What style sheets/code would I use to horizontally and vertically align a table for IE5+? Or would it be better to write the page in complete CSS so I could take advantage of absolute positioning for the images? (If only I knew how)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This thread may help you with centering and vertical alignment.

    http://www.sitepointforums.com/showt...hreadid=117685

    As to your other questions it's hard to tell what you are doing wrong without seeing the code that goes with all those images.

    To absolutely place something you just absolutely place it relative to its parent.

    Code:
    .test {
    position:absolute;
    top:100px;
    left:100px;
    width:150px;
    height:150px;
    }
    The above would place an element 100px from the top and the left of its parent container. The parent container would be any parent element that has a value for the property position other than static (default). Otherwise the viewport (html) is the point of reference.

    I'm not sure if any of that is helpful to you.

    Paul

  5. #5
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To center an element (replacement for the deprecated <table align="center"> or <center> or <div align="center">)...

    Put this in the <head> of your html document or your external CSS (in that case without the <style> tags of course).
    Code:
    <style type="text/css">
    body { text-align: center; /*IE 5.x, 6 workaround */ }
    
    #layout { width: 575px; /*or whatever you want, just set a width*/ 
    margin-left: auto;
    margin-right: auto;
    }
    p,th,td { text-align: left; /*to counter the workaround above and align the text to the left, otherwise all the text will be center-aligned */} 
    </style>
    Put the <div id="layout"> around whichever elements you want centered; that is, use it as a "wrapper"...

    For example:
    Code:
    <div id="layout">
    
    <h1>Please login below:</h1>
    
    <form action="login.php" id="login" method="post">
    
    <table cellpadding="0">
    <tr>
    <th scope="row"><label for="username">Username</label></th>
    <td><input type="text" id="username" name="username" size="15" maxlength="20" />
    </tr>
    <tr>
    <th scope="row"><label for="pwd">Password</label></th>
    <td><input type="password" id="pwd" name="pwd" size="15" maxlength="8" />
    </tr>
    
    </table>
    
    </form>
    
    </div>
    Make sense? Hope this helps...

  6. #6
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I absolute a form anywhere on the page? Basically, here is what I have so far..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>TEST!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html,body { background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    
    }
    
    table.outer {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border: 0px;
    }
    
    table.inner {
    width: 50%;
    height: 100%;
    vertical-align: middle;
    border: 0px;
    }
    
    img.image_left {
     position: absolute;
     left: 30%;
     top: 50%;
     margin-top: -200px; /* make this half your image height */
     margin-left: -200px; /* make this half your image width */
    }
    
    img.image_topright {
     position: absolute;
     left: 75%;
     top: 25%;
     margin-top: -25px; /* make this half your image height */
     margin-left: -54px; /* make this half your image width */
    }
    
    img.image_bottomright {
     position: absolute;
     left: 75%;
     top: 75%;
     margin-top: -25px; /* make this half your image height */
     margin-left: -54px; /* make this half your image width */
    }
    
    img.image_enter {
     position: absolute;
     left: 75%;
     top: 35%;
     margin-top: -15px; /* make this half your image height */
     margin-left: -86px; /* make this half your image width */
    }
    
    input.login {
    border: 2px;
    background-color: #e2f6ba;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    }
    
    p,th,td { text-align: left; /*to counter the workaround above and align the text to the left, otherwise all the text will be center-aligned */} 
    
    </style>
    </head>
    <body>
    
    <div><img class="image_left" src="start2.gif" width="400" height="400" border="0" /></div>
    <div><img class="image_topright" src="loohire_small.gif" width="104" height="50" border="0" /></div>
    <div><img class="image_bottomright" src="fencehire_small.gif" width="104" height="50" border="0" /></div>
    <div><img class="image_enter" src="please-enter.gif" width="172" height="30" alt="Please enter your username and password below." border="0"></div>
    
    <table class="outer">
    <tr>
    <td valign="center" align="center" style="vertical-align:middle">
    
        <table border="2" class="inner">
                <tr>
                    <td valign="center">
    
    		<table border="0" cellspacing="5" cellpadding="0">
    		<tr>
    		<td valign="center" align="right">
    		<form method="POST" action="login.els">
    		Username:</td>
    		<td valign="center">
    		<input class="login" type="text" name="LOGIN_NAME" AUTOCOMPLETE="off" size="20" maxlength="30" class="login" />
    		</td>
    		</tr>
    		<tr>
    		<td valign="center" align="right">
    		Password:</td>
    		<td valign="center">
    		<input class="login" type="password" name="LOGIN_PASSWORD" AUTOCOMPLETE="off" size="20" maxlength="30" class="login" />
    		</td>
    		</tr>
    		<tr>
    		<td colspan="2" align="center" valign="center">
    
    		<br/><p align="center">
    		<input class="login" type="submit" value="Login" size="35" class="login" />
    		<input class="login" type="reset" value="Clear" size="35" class="login" />
    		</p>
    		</form>
    		</td>
    		</tr>
    		</table>
                    </td>
                </tr>
            </tbody>
        </table>
    
    </td>
    </tr>
    </table>
    
    </body>
    </html>
    The images align fine in IE5, IE6 - but the FORM will not align to the right in either browser.

  7. #7
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might have better luck with your CSS and layout if you simplified your page structure (read: lose the nested tables ). Putting your login form in a simple (i.e. one) table or even just a <div> and then creating a 20% top margin and aligning the div or table in the center of the page might give you the result you're looking for.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •