Content Container Div Resize Issue w/ Background image

taxgirl · October 14, 2007

Hey guys

I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container.

Here is the page in question: http://srh.com/taxgirl/

There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages.

Here are the CSS links:

http://www.srh.com/taxgirl/srh2008.css

http://www.srh.com/taxgirl/css/mainsrh.css

http://www.srh.com/taxgirl/css/srh_index.css

#contentcontainer {
position: absolute;
z-index: 3;
width: 740px;
left: 11px;
top: 505px;
right: 11px;
height: auto;
margin-bottom: 70px;
overflow: visible;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}

#contentbg {
background-image: url(../images2/required/layout/contentbg.png);
background-repeat: repeat-y;
background-position: center top;
overflow: visible;
position: relative;
width: 760px;
top: 55px;
height: 900px;
left: 1px;
right: 0px;
bottom: 65px;
z-index: 2;
margin-bottom: 63;
}
#contentcontainterfooter {
height: 15px;
width: 760px;
position: relative;
left: 1px;
right: 0px;
z-index:3;
}

Here is the HTML:

 <div class="contentbg" id="contentbg">    <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div>
<div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div>

The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved.

If anyone could help I would be forever greatful

Please take a look and let me know if you have any advice.

Thanks you so--o much!

~beth.

ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for

To all that read: Have a fantastic day and thank you for your time.

SuperBlue · October 15, 2007

Im not going to look at your code, because im to tired right now.

But in general its easy to create what you want. Lets say you have a footer div inside a wrapper/basement div. The way to get it to align to the bottom, would be to make the wrapper/basement "position: relative;" and the footer "position: absolute;bottom:0".

Using the above technique you could even create some really advanced layouts, witch would otherwhise only be possible using tables. Ofcause IE6 will still need its own CSS rules to work, but other browsers should handle it fine using strict doctype.

An examble of a box with rounded cornors, where you could use background images.

<html>
<head>
<style type="text/css">  
.SarCenterContent {
position: relative;
width: 100%;
margin: 0 auto;
text-align: center;
}
.SarCenterContent:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
.sar_01 {
position: relative;
width: 100%;
height: 9px;
background-color: gray;
}
.sar_02 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: silver;
overflow: hidden;
}
.sar_03 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: gold;
overflow: hidden;
}
.sar_04 {
position: absolute;
left: -11px;
width: 11px;
height: 100%;
background-color: purple;
}
.sar_05 {
position: absolute;
right: -18px;
width: 18px;
height: 100%;
background-color: blue;
}
.sar_06 {
position: relative;
width: 100%;
height: 9px;
background-color: green;
}
.sar_07 {
position: absolute;
left: -11px;
width: 11px;
height: 9px;
background-color: yellow;
overflow: hidden;
}
.sar_08 {
position: absolute;
right: -11px;
width: 11px;
height: 9px;
background-color: brown;
overflow: hidden;
}
</style>
   <!--[if IE]>
    <style type="text/css">
.SarCenterContent {
height: 1px;
}
    </style>
   <![endif]-->
</head>
<body>
    <div class="sar_06">
     <div class="sar_07"></div>
     <div class="sar_08"></div>
    </div>
    <div class="SarCenterContent">
     <div class="sar_04"></div>
     <div class="sar_05"></div>
     <p>Content goes here</p>
     <p>Content goes here</p>
     <p>Content goes here</p>
     <p>Content goes here</p>
    </div>
     <div class="sar_01">
      <div class="sar_02"></div>
      <div class="sar_03"></div>
     </div>
</body>
</html>

Regarding a png fix for ie, i asume you are talking about a way to get Alpha Transparency to work?

Well the answer would be:

<img src="IeTransparencyFIX.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="">

dbrimlow · October 16, 2007

The key to making css behave is to make sure you are following the rules and have no errors or typos in your markup.

Your site has some major issues (one of which is "embed" is extremely hard to work around). It is not validating as proper html of any type (even though you are using a transitional doctype).

Here is a link to the w3c html validation tool for your site. It shows 18 errors that makes your site invalid:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fsrh.com%2Ftaxgirl%2F

No matter how much you tweak, and what advice we give you based on proper rules and technique, until you are error free there is no telling what can happen.

Fix the 18 errors first; then debug the css.

Sign In

Content Container Div Resize Issue w/ Background image

Recommended Posts

taxgirl

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information