Div background won't show

**Taxgirl** · 07-12-2006, 05:56 AM

here's the link: http://www.conspiracybrand.com/main3.php

here's the code:

PHP Code:


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

"http://www.w3.org/TR/html4/loose.dtd">

<html><!-- InstanceBegin template="/Templates/main2.dwt.php" codeOutsideHTMLIsLocked="false" -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- InstanceBeginEditable name="doctitle" -->

<title>Conspiracy Brand, Inc</title>

<!-- InstanceEndEditable --><link href="cbinc.css" rel="stylesheet" type="text/css">

<style type="text/css">

<!--

body {

    background-color: #000000;

    margin-top: 0px;

    margin-bottom: 0px;

}

a:link {

    color: #999900;

}

a:visited {

    color: #FFFFFF;

}

a:hover {

    color: #440001;

}

a:active {

    color: #7F7F7F;

}

-->

</style>

<link href="cbinc.css" rel="stylesheet" type="text/css">

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

</head>



<body>

<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td align="center" valign="middle"><div class="container" id="container"><div class="leftnav" id="LeftNav"></div>

<div class="toplinks" id="TopLinks"><img src="layout/images/p__01.jpg" alt="Navigation" width="780" height="296" border="0" usemap="#Map">

  <map name="Map">

    <area shape="poly" coords="0,74,45,35,150,10,182,25,180,35,175,67,151,42,95,58,62,61,27,98" href="main.php" alt="Click here to return Home">

    <area shape="poly" coords="55,129,73,108,197,84,232,96,230,116,223,128,195,111,144,129,108,128,77,157" href="news.php" alt="Click here for the latest News.">

    <area shape="poly" coords="153,215,149,190,184,169,234,163,283,152,324,167,322,189,313,204,290,185,240,195,190,194,166,226" href="aboutus.php" alt="Click here to learn more About Us.">

    <area shape="poly" coords="201,64,203,37,232,24,295,15,351,11,380,28,381,40,371,63,338,40,290,53,246,45,218,71" href="store.php" alt="Click here to enter the Store.">

    <area shape="poly" coords="267,150,247,114,283,89,334,91,391,82,429,102,429,120,417,136,385,118,343,125,298,120" href="conspiracies.php" alt="Click here to read about conspiracies.">

  </map>

</div>

<div class="titlebanner" id="TitleBanner"><img src="layout/images/main-banner.jpg" width="606" height="99"></div>

<div class="content" id="Content">

  <div class="contenttextbox" id="contenttextbox"><!-- InstanceBeginEditable name="main" -->main<!-- InstanceEndEditable --></div>

</div>



<?php include("leftNav.php"); ?></div></td>

  </tr>

</table>

</body>

<!-- InstanceEnd --></html>

here's the html for the php include:

PHP Code:


<div class="leftnavcontent" id="leftNavcontent">

  <table  border="0" align="center" cellpadding="0" cellspacing="5">

    <tr>

      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td><img src="layout/side/featured.jpg" alt="Featured Item" width="165" height="23"></td>

        </tr>

        <tr>

          <td><img src="images/featured/freedom_haters.png" alt="Freedom Haters" width="165" height="175"></td>

        </tr>

      </table></td>

    </tr>

    <!--<tr>

      <td><hr class="hr"></td>

    </tr>-->

    <tr>

      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td><img src="layout/side/didyouhear.jpg" alt="Did you hear?" width="165" height="22"></td>

        </tr>

        <tr>

          <td class="sidedidyouhear">enter crazy conspiracy theory of the month or some random update or whatever  you want. </td>

        </tr>

      </table></td>

    </tr>

  </table>

</div>

here's the css:

Code:

.toplinks {
	position: absolute;
	visibility: visible;
	height: 296px;
	width: 780px;
	left: 0px;
	top: 0px;
}
.leftnav {
	background-color: #000000;
	background-image:    url('layout/images/p__02.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 174px;
	left: 0px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.content {
	background-color: #393220;
	background-image: url('layout/images/p__04.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 606px;
	left: 174px;
	top: 395px;
	clear: both; 
}
.titlebanner {
	position: absolute;
	visibility: visible;
	height: 99px;
	width: 606px;
	left: 174px;
	top: 296px;
}
.contenttextbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	left: 30px;
	top: 0px;
	width: 541px;
	position: absolute;
	height: 100%;
	text-indent: 10px;
}
.leftnavcontent {
	position: absolute;
	visibility: visible;
	height: 100%;
	width: 165px;
	left: 5px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	overflow: visible;
}
.hr {
	border: thin solid #440000;
}
.sidedidyouhear {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-variant: normal;
	text-transform: uppercase;
	font-style: normal;
}
.horizoncenter        
	{
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: visible;
	visibility: visible;
	display: block;
	}

.contentcenter    
	{
	background-color: transparent;
	margin-left: -390px;
	position: absolute;
	top: 0px;
	left: 50%;
	width: 780px;
	height: 100%;
	visibility: visible;	
	}
.container {
	position: relative;
	width: 780px;
	left: auto;
	top: 0px;
	right: auto;
	height:100%;
}

The background won't show up in the center or on the leftside navagation. I believe it's because of the nested divs but how do I work around this???

Please, please, please, please help!!

Thank you!

~beth.

**jscheuer1** · 07-12-2006, 06:52 AM

OK, here is your .leftnav css from your page's cbinc.css file:

Code:

.leftnav {
	background-color: #000000;
	background-image:    url('layout/images/p__02.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 174px;
	left: 0px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

position:absolute;z-index:0;height:100%; all conspire to make it invisible. With position absolute, 100% is relative to nothing so means height:0;. Also with that type of positioning, a z-index of 0 will have it underneath any other element that coincides with its position that comes later in the HTML code.

I cannot be sure what you are trying to have it look like but, change the declaration to:

Code:

.leftnav {
	background-color: #000000;
	background-image:    url('layout/images/p__02.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 611px;
	width: 174px;
	left: 0px;
	top: 296px;
	z-index: 1;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

and you will at least be able to see it.

**Taxgirl** · 07-12-2006, 07:03 AM

Hey, thanks for your reply!

It's supposed to look like this:

http://www.conspiracybrand.com/main.php

only centered.

For some reason when I centered the layout, the backgrounds wouldn't appear.

they use the same stylesheet... I don't understand.

(ps. this layout doesn't continue the backgrounds on internet explorer for some reason......... urgh)

**jscheuer1** · 07-12-2006, 05:00 PM

You can remove the <base href= . . . > tag once the page is in proper relation to its resources, and make the style external again if you like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/main2.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Conspiracy Brand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<base href="http://www.conspiracybrand.com/">
<!-- InstanceEndEditable -->
<style type="text/css">

body {
	background-color: #000000;
	margin:0;
	padding:0;
}
a:link {
	color: #999900;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #440001;
}
a:active {
	color: #7F7F7F;
}
.toplinks {
	position: absolute;
	visibility: visible;
	height: 296px;
	width: 780px;
	left: 0px;
	top: 0px;
}
.leftnav {
	background-color: #000000;
	background-image:    url('layout/images/p__02.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 611px;
	width: 174px;
	left: 0px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.content {
	background-color: #393220;
	background-image: url('layout/images/p__04.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 500px;
	width: 606px;
	left: 174px;
	top: 395px;
	clear: both; 
}
.titlebanner {
	position: absolute;
	visibility: visible;
	height: 99px;
	width: 606px;
	left: 174px;
	top: 296px;
}
.contenttextbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	left: 30px;
	top: 0px;
	width: 541px;
	position: absolute;
	height: 100%;
	text-indent: 10px;
}
.leftnavcontent {
	position: absolute;
	visibility: visible;
	height: 100%;
	width: 165px;
	left: 5px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	overflow: visible;
}
.hr {
	border: thin solid #440000;
}
.sidedidyouhear {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-variant: normal;
	text-transform: uppercase;
	font-style: normal;
}

.container {
	position: relative;
	top: 0px;
	height:870px;
	width: 780px; 
	margin: 0 auto; 
overflow:hidden;
}

* html #alpha img {
visibility:hidden;
}
* html #alpha {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='http://www.conspiracybrand.com/images/featured/freedom_haters.png', sizingMethod='crop');
}

</style>

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body><div class="container">
<table  border="0" cellpadding="0" cellspacing="0" class="maintable">

  <tr>
    <td align="center" valign="middle"><div class="leftnav"></div>
<div class="toplinks"><img src="layout/images/p__01.jpg" alt="Navigation" width="780" height="296" border="0" usemap="#Map">
  <map name="Map">
    <area shape="poly" coords="0,74,45,35,150,10,182,25,180,35,175,67,151,42,95,58,62,61,27,98" href="main.php" alt="Click here to return Home">
    <area shape="poly" coords="55,129,73,108,197,84,232,96,230,116,223,128,195,111,144,129,108,128,77,157" href="news.php" alt="Click here for the latest News.">
    <area shape="poly" coords="153,215,149,190,184,169,234,163,283,152,324,167,322,189,313,204,290,185,240,195,190,194,166,226" href="aboutus.php" alt="Click here to learn more About Us.">
    <area shape="poly" coords="201,64,203,37,232,24,295,15,351,11,380,28,381,40,371,63,338,40,290,53,246,45,218,71" href="store.php" alt="Click here to enter the Store.">
    <area shape="poly" coords="267,150,247,114,283,89,334,91,391,82,429,102,429,120,417,136,385,118,343,125,298,120" href="conspiracies.php" alt="Click here to read about conspiracies.">

  </map>
</div>
<div class="titlebanner"><img src="layout/images/main-banner.jpg" alt="Welcome to Conspiracy Brand" width="606" height="99"></div>
<div class="content">
  <div class="contenttextbox"><!-- InstanceBeginEditable name="main" -->main<!-- InstanceEndEditable --></div>
</div>

<div class="leftnavcontent">
  <table  border="0" align="center" cellpadding="0" cellspacing="5">
    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">

        <tr>
          <td><img src="layout/side/featured.jpg" alt="Featured Item" width="165" height="23"></td>
        </tr>
        <tr>
          <td id="alpha"><img src="images/featured/freedom_haters.png" alt="Freedom Haters" width="165" height="175"></td>
        </tr>
      </table></td>
    </tr>
    <!--<tr>
      <td><hr class="hr"></td>
    </tr>-->

    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="layout/side/didyouhear.jpg" alt="Did you hear?" width="165" height="22"></td>
        </tr>
        <tr>
          <td class="sidedidyouhear">enter crazy conspiracy theory of the month or some random update or whatever  you want. </td>
        </tr>

      </table></td>
    </tr>
  </table>
</div>
</td>
  </tr>
</table></div>
</body>
<!-- InstanceEnd --></html>

**Taxgirl** · 07-13-2006, 04:43 AM

i take that back too

i got it to overflow... but the background-color won't flow as well?

**jscheuer1** · 07-13-2006, 05:10 AM

Um, I dunno what it was that you said but, I'm sure I've been called worse.

Anyways, that looked like the right height to me working from your example but, it can be changed here:

Code:

.container {
	position: relative;
	top: 0px;
	height:870px;
	width: 780px; 
	margin: 0 auto; 
overflow:hidden;
}

And you could try removing the overflow:hidden; to see what that gets you. Also, if there were enough content on the page, to fill it out, the height property might not need to be set as content often drives or creates dimension but, not always. For this (content driven height) to work, overflow:hidden; probably would have to be removed. There is something else making the page pretty tall though. Either one or all of the height:100% settings that remain or the cumulative heights of some or all of the other elements. I just tried to give a cross browser example of a way to get the look of the left aligned page when centered. I still can't know for sure what additional content you have planned for the page or where it would go so, I didn't bother trying to figure out how that would work

**Taxgirl** · 07-13-2006, 05:14 AM

I'm sorry, I would like to make it so the content box will fill all of the contents... like... it will always have color running from the top to the bottom... more content, the color continues down the page, but still ends off the screen....

how it is now, it ends at the 870 px mark however when I put the height at 100% the background doesn't work at all.....

http://conspiracybrand.com/aboutus.php

**jscheuer1** · 07-13-2006, 06:43 AM

Setting height:100% is often meaningless to a browser because there are no practical limits to the height of a page. So, if there is a container, it will be 100% the height of the container, if there is no container, it will be unknown. Try this out (I had to take some of the text out to fit the message size limit):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/main2.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Conspiracy Brand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<base href="http://www.conspiracybrand.com/">
<!-- InstanceEndEditable -->
<style type="text/css">

body {
	background-color: #000000;
	margin:0;
	padding:0;
}
a:link {
	color: #999900;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #440001;
}
a:active {
	color: #7F7F7F;
}
.toplinks {
	position: absolute;
	visibility: visible;
	height: 296px;
	width: 780px;
	left: 0px;
	top: 0px;
}
.leftnav {
	background-color: #000000;
	background-image:    url('layout/images/p__02.jpg');
	background-repeat: no-repeat;
	position: absolute;
	height: 611px;
	width: 174px;
	left: 0px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.content {
	position: absolute;
	width: 606px;
	left: 174px;
	top: 395px;
	clear: both; 
}
.titlebanner {
	position: absolute;
	visibility: visible;
	height: 99px;
	width: 606px;
	left: 174px;
	top: 296px;
}
.contenttextbox {
	background-image: url('layout/images/p__04.jpg');
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	padding:0 30px;
	width: 541px;
	position: absolute;
	background-color: #393220;
	height: auto;
	text-indent: 10px;
}
.leftnavcontent {
	position: absolute;
	visibility: visible;
	width: 165px;
	left: 5px;
	top: 296px;
	z-index: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	overflow: visible;
}
.hr {
	border: thin solid #440000;
}
.sidedidyouhear {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-variant: normal;
	text-transform: uppercase;
	font-style: normal;
}

.container {
	position: relative;
	top: 0px;
	width: 780px; 
	margin: 0 auto; 
}

* html #alpha img {
visibility:hidden;
}
* html #alpha a {
position:relative;
width:100%;
height:100%;
z-index:2;
}
* html #alpha {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='http://www.conspiracybrand.com/images/featured/freedom_haters.png', sizingMethod='crop');
}

</style>

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body><div class="container" id="container"><div class="leftnav" id="LeftNav"></div>
<div class="toplinks" id="TopLinks"><img src="layout/images/p__01.jpg" alt="Navigation" width="780" height="296" border="0" usemap="#Map">
  <map name="Map">

    <area shape="poly" coords="0,74,45,35,150,10,182,25,180,35,175,67,151,42,95,58,62,61,27,98" href="main.php" alt="Click here to return Home">
    <area shape="poly" coords="55,129,73,108,197,84,232,96,230,116,223,128,195,111,144,129,108,128,77,157" href="news.php" alt="Click here for the latest News.">
    <area shape="poly" coords="153,215,149,190,184,169,234,163,283,152,324,167,322,189,313,204,290,185,240,195,190,194,166,226" href="aboutus.php" alt="Click here to learn more About Us.">
    <area shape="poly" coords="201,64,203,37,232,24,295,15,351,11,380,28,381,40,371,63,338,40,290,53,246,45,218,71" href="store.php" alt="Click here to enter the Store.">
    <area shape="poly" coords="267,150,247,114,283,89,334,91,391,82,429,102,429,120,417,136,385,118,343,125,298,120" href="conspiracies.php" alt="Click here to read about conspiracies.">
  </map>
</div>
<div class="titlebanner" id="TitleBanner"><!-- InstanceBeginEditable name="title" --><img src="layout/images/about.jpg" alt="Welcome to Conspiracy Brand" width="606" height="99"><!-- InstanceEndEditable --></div>
<div class="content" id="Content">
  <div class="contenttextbox" id="contenttextbox"><!-- InstanceBeginEditable name="main" -->

    <p>Thank you for visiting Conspiracy Brand. You probably wouldn't be here unless you had that deep down feeling that something was wrong. You may have had the feeling that the &quot;official&quot; story just didn't make sense to you. You are not alone. There are millions of people around the world at this very moment that feel the same way as you or me. </p>
    <p> Standing on the corners preaching to the masses about the injustices and cover-ups will only get you ridiculed and scoffed at. It often becomes a touchy situation when a couple of people, or even a group of people begin to discuss topics including politics, corporations, fascism, or war. Often times when the idea is presented that a conspiracy is afoot, hidden in plain site from all that don&rsquo;t believe it could be possible, sparks start to fly.</p>
    <p> At this point in history, we have access to more information than ever before, and at an even faster rate. The trick is, when reading through all of the information in books and on the web, to find out what &quot;feels&quot; right to you, and distinguish it from the speculation, lies, and disinformation. It may be time for you to stand up and let them know that you don't buy the lie. We hope that the information and links on this site lead you to finding some of the answers you are looking for. This site is for information pertaining to the version of truth we see laid out before us. If you don't agree, go watch TV.</p>
    <p>Conspiracy Brand</p>
    <p>&nbsp;</p>
    <p>Thank you for visiting Conspiracy Brand. You probably wouldn't be here unless you had that deep down feeling that something was wrong. You may have had the feeling that the &quot;official&quot; story just didn't make sense to you. You are not alone. There are millions of people around the world at this very moment that feel the same way as you or me. </p>

    <p> Standing on the corners preaching to the masses about the injustices and cover-ups will only get you ridiculed and scoffed at. It often becomes a touchy situation when a couple of people, or even a group of people begin to discuss topics including politics, corporations, fascism, or war. Often times when the idea is presented that a conspiracy is afoot, hidden in plain site from all that don&rsquo;t believe it could be possible, sparks start to fly.</p>
    <p> This usually comes down to a firm stance on one side, completely oblivious to the wealth of information to disprove the lie they have been lead to believe since early schooling. From their lips will be the phrases &ldquo;show me what proof you have&rdquo; and &ldquo;here comes another conspiracy theory&rdquo;, as if to say that nothing you state has any merit and is all completely fiction until proven fact by themselves. On the other side, the more open minded conscious individual that hears what the mainstream media is pushing on them, only to go in search of what they feel is the real truth. This person will enjoy the search, trying to put all of the puzzle pieces together and get to the bottom of it all. This is a fun, yet never-ending journey</p>
    <p> At this point in history, we have access to more information than ever before, and at an even faster rate. The trick is, when reading through all of the information in books and on the web, to find out what &quot;feels&quot; right to you, and distinguish it from the speculation, lies, and disinformation. It may be time for you to stand up and let them know that you don't buy the lie. We hope that the information and links on this site lead you to finding some of the answers you are looking for. This site is for information pertaining to the version of truth we see laid out before us. If you don't agree, go watch TV.</p>

    <p>Conspiracy Brand</p>
  <!-- InstanceEndEditable -->
    <div class="bottom" id="bottom">
      <div align="center"><br>
        <br>
        <img src="layout/images/bottom.jpg"><br>
        Home | News | Store | About Us | Conspiracies | Links | Myspace <br>
        <br>

        <br>
      </div>
    </div>
  </div>
</div>

<div class="leftnavcontent" id="leftNavcontent">
  <table  border="0" align="center" cellpadding="0" cellspacing="5">
    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">

        <tr>
          <td><img src="layout/side/featured.jpg" alt="Featured Item" width="165" height="23"></td>
        </tr>
        <tr>
          <td id="alpha"><img src="images/featured/freedom_haters.png" alt="Freedom Haters" width="165" height="175"></td>
        </tr>
      </table></td>
    </tr>
    <!--<tr>
      <td><hr class="hr"></td>
    </tr>-->

    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="layout/side/didyouhear.jpg" alt="Did you hear?" width="165" height="22"></td>
        </tr>
        <tr>
          <td class="sidedidyouhear">enter crazy conspiracy theory of the month or some random update or whatever  you want. </td>
        </tr>

      </table></td>
    </tr>
  </table>
</div>
</div>
</body>
<!-- InstanceEnd --></html>

**Taxgirl** · 07-13-2006, 07:14 AM

John,

I thank you, sir.

Very, very kindly.

Thank you.

Now the question is, is there a way to default it so that the color always fills the page?

Example of it not filling all the way: http://www.conspiracybrand.com/conspiracies.php

~beth.

**jscheuer1** · 07-13-2006, 08:06 AM

For that, you would want to set a minimum height. This is done using min-height: in most browsers but IE is different. The way IE does it requires that javascript be enabled but fortunately, most folks do. Make your contenttextbox declaration look like so:

Code:

.contenttextbox {
	background-image: url('layout/images/p__04.jpg');
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	padding:0 30px;
	width: 541px;
	position: absolute;
	background-color: #393220;
	min-height:520px;
	height: auto;
	text-indent: 10px;
}
* html .contenttextbox {
height:expression(Math.max(this.offsetHeight, 520)+'px');
}

Both 520's can be whatever you like but, 520 seemed about right.

Thread: Div background won't show

Thread Tools

Search Thread

Div background won't show

Bookmarks

Bookmarks

Posting Permissions