SitePoint.com

ClevaTreva · Dec 5, 2005, 01:00

Hi Folks

The code below seems to render OK (with one problem in Opera) in all but ancient PC browsers, and all Mac browsers except MAC IE (although OmniWeb 5 seems to render the fonts too large).

In Mac IE5.x, the header and footer sit at the left of the page, instead of in the middle with the rest of the content. Also, the background colors in the wrapper and outer do not show.

I've attached a gif of what it should look like. Any help appreciated!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<style type="text/css" media="all">
body{
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
  color:#000000;
}
html,body{
  margin:0px;
  padding:0px;
  border:0px;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body{
  background-color:#EEEEEE;
  min-width:782px;
  text-align:center;
}
div,p{margin:0px}
strong,b{
  font-weight:bold;
}
p{
  font-size:90%;
  line-height:1.1em;
}
.floatcontainer:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; }
.floatcontainer{display: inline-table;}  /* Mark Hadley's fix for IE Mac */  
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */ 
#fullheightcontainer{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  position:relative;
  width:782px;
  display:table;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
  margin-bottom:-52px;
}
#wrapper{
  display:table-cell;
  border-right:1px solid #000000;
  border-left:1px solid #000000;
  background-color:#FFCCCC;
}
#outer{
  z-index:1;
  position:relative;
  margin-left:150px;
  width:478px;
  border-right:1px solid #000000;
  border-left:1px solid #000000;
  background-color:#ADD8E6;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}

* html #outer{
  width:480px;
  w\idth:478px;
}
#float-wrap{
  width:478px;
  float:left;
  display:inline;
}
#left{
  width:150px; /* = Left Col Width */
  float:left;
  display:inline;
  position:relative;
  margin-left:-151px; /* = left col width + one internal border width */
  padding:72px 0px 52px 0px;
}
#container-left{
  width:150px;
}
#right{
  float:left;
  display:inline;
  width:150px; /* = Right Col Width */
  margin-right:-151px; /* = right col width + one internal border width */
  margin-left:1px; /* Internal divider width */
  position:relative;
  padding:72px 0px 52px 0px;
}
#container-right{
/* \*/
  width:150px;
/* Above hidden from IE-Mac */
}
#center{
  width:478px;
  float:right;
/* \*/
  height:100%;
/* Hidden from IE-mac */
  display:table;
  padding:72px 0px 52px 0px;
}
#footer{
  z-index:1;
  position:relative;
  clear: both;
  width:780px;
  height:52px;
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
}
#subfooter1{
  background-color:#FFFFCC;
  text-align:center;
  margin:0px 1px;
  height:50px;
}
#header{
  z-index:1;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:72px;
  overflow:hidden;
}
#header-inner{
  width:780px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  height:72px
}
.outer_horiz_border{
  background-color:#000000;
  height:1px;
  overflow:hidden;
  font-size:0px;
}
#subheader1{
  background-color:#FFFFCC;
  text-align:center;
  height:70px;
}
#container-center{
}
</style>
<!--[if IE]>
<style type="text/css">
#outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div id="wrapper">
    <div id="outer">
      <div id="float-wrap" class="floatcontainer">
        <div id="center">
          <div id="container-center">
            <p>
              This is the<br />Main Content<br />
            </p>
          </div>
        </div>
        <div id="left">
          <div id="container-left">
            <p>
              This is the Left Sidebar<br />
            </p>
          </div>
        </div>
      </div>
      <div id="right">
        <div id="container-right">
          <p>
            This is the Right Sidebar<br />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="outer_horiz_border"><!-- Just a colored div --></div>
  <div id="subfooter1">
    <p>
      This is Sub-Footer #1 (with Fixed Height)
    </p>
  </div>
  <div class="outer_horiz_border"><!-- Just a colored div --></div>
</div>
<div id="header">
  <div id="header-inner">
    <div class="outer_horiz_border"><!-- Just a colored div --></div>
    <div id="subheader1">
      <p>
        This is Sub-Header #1 (with Fixed Height)
      </p>
    </div>
    <div class="outer_horiz_border"><!-- Just a colored div --></div>
  </div>
</div>
</body>
</html>

Thanks

Trevor

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode