css positioning in IE5 and IE6, pls help!

**rawkinrich1979** · Sep 17, 2003 04:03

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

**dethfire** · Sep 17, 2003 08:02

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

**rawkinrich1979** · Sep 17, 2003 08:13

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)

**Paul O'B** · Sep 17, 2003 10:44

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

**agentolivia** · Sep 17, 2003 15:24

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...

**rawkinrich1979** · Sep 18, 2003 01:07

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.

**agentolivia** · Sep 19, 2003 10:31

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.

User Tag List

Thread: css positioning in IE5 and IE6, pls help!

Thread Tools

Display

Hybrid View

css positioning in IE5 and IE6, pls help!

Bookmarks

Bookmarks

Posting Permissions