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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div and Table question

    Yes I know i shouldn't be using tables, but I still haven't migrated my site completely.

    Stupid question im sure

    I have two divs
    Code:
    #pagecell1{
    position:absolute;
    top: 150px;
    left: 10px;
    right: 2%;
    width:800px;
    background-color: #ffffdd;
    height: 800px;
    }
    #content{
    padding: 0px 10px 0px 0px;
    margin:0px 0px 0px 178px;
    /*border-left: 1px solid #ccd2d2;*/
    position:absolute;
    left:0px;
    top:0px;
    /*background-color: #CC99FF;*/
    background-color: #ffffdd;
    width:611px;
    height: 100%;
    
    }
    
    <div id="pagecell1">
    
    <div id="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    
    ....lots of content
    
    </table>
    </div>
    </div>
    Currently the table is overflowing the content div. I know how to fix it by taking the height value away from the pagecell1 div. But when i do that if on another page i don't have that table in the content then my pagecell1 is very small. I think I can use minheight but that wont work for all browsers. anyone have any better suggestions.

    Sorry if this has been asked a lot of times. Just trying to get this fixed rather quickly.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    min-height will work for most browsers and with the help of a bug can be simulated in IE6 as well
    Code:
    <style type="text/css">
    #pagecell1 {
    min-height:300px;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagecell1 {
    height:300px;
    }
    </style>
    <![endif]-->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed

    Yea that works, thanks

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually i thought this was fixed but when i looked at it in IE6 it pushes everything in that content div down to the bottom.

    In the content div i had to change that to position relative. so i think that may be the reason. Any ideas how i can make it work in both ie6 and 7

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It shouldn't push anything down. Try adding the min-height to the #content div instead. I have to ask though why are you even using absolute positioning?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.ivybasket.com/images/Hats...m/KidsHats.htm this is the page. I moved that min-height and its still doing the same thing in ie6. works great in ie7 and mozilla

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Guess I should have told you. You can't just copy and paste what I gave you. This is wrong
    Code:
    #pagecell1{
    	position:absolute;
    	top: 150px;
    	left: 10px;
    	right: 2%;
    	width:800px;
    	background-color: #ffffdd;
    	
    	<!--[if lte IE 6]>
    	height:300px;
    	<![endif]-->
    }
    Try this instead
    Code:
    #pagecell1{
    	position:absolute;
    	top: 150px;
    	left: 10px;
    	right: 2%;
    	width:800px;
    	background-color: #ffffdd;
    min-height:300px;
    }
    /*hide from IE Mac\*/
    * html #pagecell1 {
    height:300px;
    }
    /*end hide*/
    I originally used conditional comments because you didn't post enough code to begin with so I didn't know if the * html hack would suffice. Now that I see your code, I notice you are using a doctype so the * html hack will work since its only given to IE6 and below.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have uploaded your changes but it is still doing the same things

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not my code causing the issue. Its something else in your code. Get rid of the margin and height on #content. You also need to float it to the left.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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