Jump to content

page not showing in middle of IE browser


jasonc

Recommended Posts

Just starting out and have a problem with IE not showing the page in the center of the browser. works in FireFox.

 

What do I need to change to make it show in the middle?

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
<style type="text/css">
#header { height:118px; margin-bottom: 20px; background-image:url('images/back-navy.gif'); }
#content-center { width: 520px; padding: 0 10px; float: left; display: inline; background-color: #DCDDDB;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#sidebar-left { width: 120px; background-color: #DCDDDB; margin: 0 10px; float: left; display: inline; }
#wrapper { width: 820px; margin: 0 auto; background-color: #7E8079; background-image: url('images/background-image.gif'); }
#sidebar-right { width: 120px; background-color: #DCDDDB; margin: 0 10px; float: left; display: inline; }
#footer { height: 18px; margin-top: 20px; background-image: url('images/back-navy.gif'); font-family: Tahoma; font-size: 10pt; color: #FFFFFF; }
#footer-left { float: left; padding: 0 20px 0 15px; }
#footer-right { float: left; }
</style>
</head>

<body>

<div id="wrapper">
  <div id="header">
    <div style="float:left; width:195px;"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="195" height="118" border="0" alt=""></div>
    <div style="width:605px; float:left; font-family:Tahoma; font-size: 25pt; color: #FFFFFF; margin: 10px 0 0 20px;">header</div>

  </div>
  
  <div id="content">
    <div id="sidebar-left">
    <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
      <li> </li>
      <li> </li>
      <li> </li>
      <li> </li>
    </ul>

    </div>
    
    <div id="content-center">
    <h1 style="text-align:center;">Welcome</h1>
    <p>Our site is in developement and will be live shortly.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
    </div>
    
    <div id="sidebar-right">
    <ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">

      <li> </li>
      <li> </li>
      <li> </li>
      <li> </li>
    </ul>
    </div>
  </div>
  
  <br clear="all">
  <div id="footer">

  <div id="footer-left">left footer</div>
  <div id="footer-right">right footer</div>
  </div>
  
</div>

</body>
</html>

If you will notice you do not have:

 

<html>

 

Defined at the top of the page but this does not fix the problem. You have this as your document type:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

It needs to be replace with:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

 

This should fix your problem hope I could be some assistance.

Thanks,

Colton Wagner

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.