Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

aliging center not working in IE not in FF

Status
Not open for further replies.

benluke4

Technical User
Joined
Jan 27, 2005
Messages
127
Location
GB
Hi im trying to get my page aligned center.

heres the code it doesn't align properly in FireFox but does in IE cant work out what i need to do to solve the problem

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

#body {
    position: relative;
    height: 500px;
    width: 780px;
    border: 1px solid black;
    background-color: #333;

}
#nav {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 200px;
    width: 400px;
    border: 1px solid red;
    background-color: #c0c0c0;
}
</style>
</head>
<body>
 <div style="text-align: center;">
<div id="body"> 
  <div id="nav"> 
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Coaching Tools</a> 
      <ul>
        <li><a href="evaluation_session.php">Client Evaluation</a></li>
        <li><a href="step1.php">Step 1</a></li>
        <li><a href="step2.php">Step 2</a></li>
        <li><a href="step3.php">Step 3</a></li>
        <li><a href="step4.php">Step 4</a></li>
        <li><a href="step5.php">Step 5</a></li>
        <li><a href="step6.php">Step 6</a></li>
        <li><a href="step7.php">Step 7</a></li>
        <li><a href="step8.php">Step 8</a></li>
        <li><a href="step9.php">Step 9</a></li>
        <li><a href="step10.php">Step 10</a></li>
        <li><a href="step11.php">Step 11</a></li>
        <li><a href="step12.php">Step 12</a></li>
      </ul>
    </li>
    <li><a href="#">Message Board</a> </li>
    <li><a href="contact.php">Contact Support</a> </li>
    <li><a href="log_out.php">Log out</a> </li></ul>
    </div>
</div>
</div>
</body>
</html>

Thanks Ben
 

The only difference I can see between the FF and IE rendering is that of the grey box height, not anything to do with centering.

To make them look more consistent, remove the height property from the CSS for #nav.

Hope this helps,
Dan

 
sorry is should have made myself clearer.

Im try to get the divs to align in the center of the page.

I tried
<div style="text-align: center;">
but this only works in IE

Thanks
Ben
 
Remove the "text-align:center" from the very first DIV, and then add the following to the CSS for #body:

Code:
margin-left:auto;
margin-right:auto;

This will put both DIVs (light and dark gray) in the centre of the page.

Hope this helps,
Dan


 
Thanks thats great

 
You might keep the outer div with text-align: center; for IE versions before 6.0. Check my explanation in this thread.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top