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 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help w/ this css layout!

    Hello,
    I have a css layout that I'm very close to being happy about. I have it working perfectly in all platforms and browsers except IE (imagine that).

    Here's an example of what I'm trying to do:

    https://encounterprogram.com/lisa_site/css_test.html

    Everything looks great in all browsers except the bottom right and left flowery <div> layers.

    If you view the page in Firefox you can see how the page should look. In IE the two layers are pushed to the top instead of laying at the bottom of the footer.

    Here's the css code for just those layers:

    Code:
    #div5 
    {
        position:relative;
        width:116px;
    	height:177px;
        z-index: 1;
        margin-top: 220px;
    	background:url(BASE_IMAGES/left_footer_img.jpg);
        no-repeat;
    }
    
    #div6
    {
        position:relative;
    	width:116px;
    	height:177px;
        z-index: 2;
    	left: 642px;
        margin-top: -177px;
    	background:url(BASE_IMAGES/right_footer_img.jpg);
        no-repeat;
    }
    Thanks for any help anyone can provide.

    Clem C

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    does this help any??

    Code:
    #div5 
    {
    	width:116px;
    	height:177px;
        z-index: 1;
        margin-top: 220px;
    	background:url(BASE_IMAGES/left_footer_img.jpg);
        no-repeat;
    	float:left;
    	clear:left;
    }
    
    #div6
    {
        
    	width:116px;
    	height:177px;
        z-index: 2;
    	
       margin-top:220px;
    	background:url(BASE_IMAGES/right_footer_img.jpg);
        no-repeat;
    	float:right;
    	clear:right;
    }
    let me know, it seemed to help a lot!!

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that and it works perfectly on the left side but the right side completely disapears as you can see on this link:

    https://encounterprogram.com/lisa_site/css_test.html

    Definitely closer!

    Thanks for your time.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    im sorry, try taking off the clear:right; see if that works

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm - tried that and the div still doesn't appear.

    so dern close!

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this now

    Code:
    #div5 
    {
        
    	width:116px;
    	height:177px;
        z-index: 1;
        margin-top: 220px;
    	background:url(BASE_IMAGES/left_footer_img.jpg);
        no-repeat;
    	float:left;
    	clear:left;/**/
    }
    
    #div6
    {
        
    width:116px;
    height:177px;
     z-index: 2;
    left: 642px;
     margin-top: 177px;
    background:url(BASE_IMAGES/right_footer_img.jpg);
     no-repeat;
     float:right;
    border: 1px solid #ccc;*/
    	/*clear:right;*/
    }

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome!

    Here's the actual design I'm working on and that seems to work w/ every browser I have access to:

    https://encounterprogram.com/lisa_si...template2.html

    Do you know of any tricks to make those footer images float in their relative positions according to the amount of content in the page that would cause it to grow and shrink?

    Looks great - thanks!

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well, lets try this for an example..

    lets say(and this might be over kill but we will just use it anyway)that you have a main container, and then you have a 3 column set.

    Code:
    #mainContainer {
    width:700px;
    height:600px;/*or whatever you need*/
    background-color:#fff;
    margin:10px auto;
    border:1px solid #000;
    }
    
    #columnLeft {
    float:left;
    clear:left;
    height:600px;
    width:/*whatever*/
    background-image:url(filepath/image1.gif)bottom center;
    background-color:/*whatever*/
    }
    #columnRight{
    float:right;
    clear:right;
    height:600px;
    width:/*whatever*/
    background-image:url(filepath/image1.gif)bottom center;
    background-color:/*whatever*/
    }
    #middleContent{
    width:inherit;/*or just make a width, it doesnt matter*/
    height:600px;
    background-color:.........
    }
    then you would take that and place it in the html, you can also on the container, make the width inherit to make it expand i believe!!

    Code:
    <div id="mainContainer">
        <div id="columnLeft"></div>
            <div id="columnRight"></div>
               <div id="middleContent"></div>
    </div>
    thats just a basic example hoep it works, also check out this web site here

    good luck man!!!

  • #9
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm going to try that layout test when I get home tonight.

    I did speak out a little too soon. I checked out this page in IE6 and it kinda blows up:

    https://encounterprogram.com/lisa_si...template2.html

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    looks like possibly the middle content div is over flowing for some reason, try and mess with the height and see what happens

  • #11
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm going to try that layout test when I get home tonight.

    I did speak out a little too soon. I checked out this page in IE6 and it kinda blows up:

    https://encounterprogram.com/lisa_si...template2.html

  • #12
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's looking like the the footer div is getting pushed below the 2 footer image divs. I added borders around the divs for development purpose.

    Heres the footer div code:

    Code:
    #footer 
    { 
        width: 800px;
        clear: both;
        height:14px;
        border: 1px solid blue;
        background:url(BASE_IMAGES/footer.jpg) 
        repeat;
    }
    ONLY - in IE6 does the footer div not position itself behind the other image divs and gets pushed down below them.

    grrrrrrrr == IE6!!

  • #13
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, i will take a look at it and see why. I actually really despise IE6, i know its bad but i try not to even look or edit for IE6.

  • #14
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops - double post
    Last edited by clem_c_rock; 02-21-2008 at 08:05 PM.


  •  

    Posting Permissions

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