Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Content Container Resizing Issue

    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

    Code:
    #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;
    }
    Code:
    #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:
    Code:
     <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.

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Welcome

    1: http://validator.w3.org/check?uri=ht...Inline&group=0 have a look here..


    2: How come you both have a class and an id applied to some divs?
    Code:
    <div class="container" id="container">
    You do only need ONE of them. An ID is it's an unic element, and a class if it's more than one (1) element.

    3: IE supports PNG transparency from IE7.

    4: To make the background-image follow the content, simply move this:

    Code:
    	background-image: url(images2/required/layout/contentbg.png);
    	background-repeat: repeat-y;
    	background-position: center top;
    from your contentbg div CSS to your contentcontainer div CSS.

    5: For your footer, I guess you could just use: position:absolute; bottom:0px;, however I don't know if that would be the correct thing to do.
    Last edited by CaptainB; 10-15-2007 at 12:10 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •