Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS backgrounds and xhtml

Posted on 2007-12-07
6
1,242 Views
Last Modified: 2013-11-19
Trying to get the page content area's background to extend down the page in white with a left menu column in a different colour. The code below seems to work in IE and Mozilla (although slightly differently). But the layout is lost when I add the document type of:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I've given the "page-body" div a red border to show the difference in behavour; the page-body loses it's height so the white background (using the faux background image) is lost below the content of the "pageContent" div.

Is there a solution?

Also the original centers in IE but this test version doesn't.

<html>
<head>

<style type="text/css">

BODY {
  background: #2F392F;
  background-image : url(images/bg1.gif);
  background-repeat: repeat-x;
  color: #333333;
  margin: 0px;
  font-family: Verdana, Arial, sans-serif;
}

#outer {
  width: 100%;
  height: 100%;
}

#page-wrapper {
  width: 755px;
  margin: 10px auto 20px auto;
}

#pageHeader {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

div.menu-row {
  background: #99CC01;
  width: 755px;
  margin: 0 auto 0 auto;
  padding: 0px;
}

#outer2 {
  width: 100%;
}

div.page-body {
  width: 755px;
  top:0;
  margin: 0 auto 0 auto;
  background-color: #ffffff;
  height: 80%;
  min-height: 80%;
  background-image : url(images/bg_white.gif);
  background-repeat: repeat-y;
  border-color: #ff0000;
  border-style: solid;
}

#pageColumnLeft {
  float: left;
  width: 170px;
  background: #F8FFE3;
}

#pageContent {
  float: left;
  background-color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 11px;
  line-height: 1.5;
  text-align : left;
  width: 544px;
}

div.footer {
  text-align: center;
  font-size: 10px;
  color: #ffffff;
  width: 100%;
  float: left;
  padding: 10px 0px 0px 0px;
}
</style>
</head>
<body>
  <div id="outer">
    <div id="page-wrapper">
      <div id="pageHeader">
          <div class="menu-row"> Menu</div>
        </div>
        <div id="outer2">
          <div class="page-body">
          <div id="pageColumnLeft">
            pageColumnLeft<br /><br /><br /><br /><br /><br /><br /><br /><br />
          </div>
          <div id="pageContent">
            pageContent<br />height of white content area needs to extend with height of left column as seen in IE, but it's shorter in Mozilla until height: 80%; and min-height: 80%; is added to page-body style.
          </div>
          </div>
        </div>
      <div class="footer">
        footer
      </div>
    </div>
  </div>
</body>  
0
Comment
Question by:ncw
  • 3
  • 3
6 Comments
 
LVL 28

Expert Comment

by:TName
ID: 20426831
Just set the height of html, body, outer, page-wrapper and outer2 to 100%:
html, body {height:100%;}
 
body {
  background: #2F392F;
  background-image : url(http://www.google.de/intl/de_de/images/logo.gif);
  background-repeat: repeat-x;
  color: #333333;
  margin: 0px;
  font-family: Verdana, Arial, sans-serif;
}
 
#outer {
  width: 100%;
  height: 100%;  
}
 
#page-wrapper {
  width: 755px;
  margin: 10px auto 20px auto;
  height:100%;
}
 
#pageHeader {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
 
div.menu-row {
  background: #99CC01;
  width: 755px;
  margin: 0 auto 0 auto;
  padding: 0px;
}
 
#outer2 {
  width: 100%;
  height:100%;
}

Open in new window

0
 
LVL 28

Expert Comment

by:TName
ID: 20426846
In standards cpmpliance mode (valid coctype), 100% (or 80%) height menas 100% (or 80%) of the parent's height (not the viewport's height) - so ALL ancestors of an element, starting with "html", have to have the height set (usually 100%)...
0
 
LVL 1

Author Comment

by:ncw
ID: 20427009
That's very helpful, thanks for the explanation. I had tried height: 100%; in all but the outer2 style, that made the difference for when the left column is longer than the page content. However it doesn't look so good when you have a largish screen as the blank white area can be extensive when it expands to the full 100% height (which I assume is calculated on screen height not browser height).

The main problem remaining is that if the page content is very long and goes beyond the height of the 100% div height then the page content div extends below the left column div height which leaves a green area to the left. Seems all a bit flaky compared to trusty tables!
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 1

Author Comment

by:ncw
ID: 20427464
This site seems to manage varying page lengths with a menu column: http://www.skyinteractive.com/sky/what+is+dtv/default.htm
0
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20433686
Not really, what they are using is a variety of the widely used "faux column" solution - the nav column to the right doesn't really expand down to the bottom of the container, but you are given that impression because the large container (with e.g. a white background color) has a background image that looks like part of the nav column ( http://www.skyinteractive.com/images/bg_content_foot.gif )

Just google for "faux columns" and you'll find many good tutorials, like e.g.
   http://www.alistapart.com/articles/fauxcolumns/
0
 
LVL 1

Author Comment

by:ncw
ID: 21123789
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question