Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS backgrounds and xhtml

Posted on 2007-12-07
6
Medium Priority
?
1,258 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
[X]
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
  • 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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

618 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