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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    div content breaking out of body

    My div content is breaking out of my body in firefox and both the body and html in most other browsers.

    Why? - my trouble page is http://hrnewseastanglia.com/why-us/

    In my css, it's meant to be in a content div that's inside a wrapper div that is above another div called footerWrapper. Hope that makes sense.

    css:
    Code:
    /*My two columns that are breaking out*/
    	.wideLeft-L{width:540px; float:left; margin-right:50px;}
    
    #includedColumn
    {
    	float:right;
    	width:150px;
    	font-size:10px;
    }
    
    /* The div that my columns sit inside */
    
    #content
    {
    position:relative;
    z-index:50;
    top:-50px\9;
    *top:0;
    _top:-50px;
    margin-left:70px;
    text-align:left;
    }
    
    
    /* My wrappers */
    
    #wrapper
    {
    	position:relative;
    	width: 800px;
    	margin: 0 auto;
    	padding: 0;
    	text-align:left;
    	z-index:50;
    	padding-bottom:70px;\
    }
    
    #footerWrapper
    {
    	position:relative;
    	width: 800px;
    	height:130px;
    	margin: 0 auto;
    	padding: 0;
    	z-index:50;
    }

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    correction:
    I looked at firebug and it doesn't break out of the body.

    The problem is that the body's background image stops at the bottom of the window...

    Here is my code for the html and body:
    Code:
    html, body {
    	width: 100%;
    	margin: 0;
    	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #999;
    	text-align:center;
    }
    html {background: #000 url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/bgGolfedge.jpg') repeat-x bottom;}
    #body1 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg') no-repeat center bottom;}
    #body2 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG2.jpg') no-repeat center bottom;}

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Problems with body

    I too am having trouble with my content extending outside of the desired height. I've been working on a website for a client for a couple of weeks and I've recently had to do a rush job and on a new interface (don't ask). Anyways I used a bit of jquery and I have several different css scripts embedded in the website. It shows up fine on computers, but for some reason my background-image for my website runs waaaay beneath the footer on smart phones. The site name is http://sette-demos.thesette.com/. Can someone please help me out?

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    wcompton83: Mate I'd start a new thread if I were you, otherwise it might get a bit confusing. Our issues both involve background images but am guessing they require totally different solutions. Maybe look into css smart phone hacks.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello dlthomas,
    You have a height set on #wrapper. I'm sure it's to make it look right when there is no content but, when there is a lot of content like your why-us page, it blows out the bottom.

    Remove the height here in your markup -
    Code:
    <div id="wrapper">
    	<div id="header">
    			
    			<a href="http://hrnewseastanglia.com" id="mainLogo"></a>
    			<a href="http://hrnewseastanglia.com"><h1>Executive<span class="greenPart">Golf ltd</span></h1></a>
    			
    			<div id="socialBookmarks">
    Then clear your floats by adding overflow: auto; to #wrapper in your style.css.

    A page like this, with a lot of content, does not lend itself well to your bottom place background image because the background doesn't show up until the content is scrolled.
    Not sure what to do about that...
    less content or position: fixed on the background image?


    Let me know if I'm completely off base...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi again Excavator

    I had a bit of jquery to set the wrapper to a height if the body height was less than the user's window.

    I've taken that js out and put overflow:auto; to wrapper but now the background images go right to the top of the page?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    The validator would have caught this for you... see highlighted in red below -
    Code:
    #wrapper
    {
    	position:relative;
    	width: 800px;
    	margin: 0 auto;
    	padding: 0;
    	text-align:left;
    	z-index:50;
    	padding-bottom:70px;\
    	overflow: auto;
    }

    //edit - I missed that bit of jQuery
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    dlthomas (12-12-2010)

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Damn Excavator - to say your pretty good at this is an understatement!

    I got rid of that silly js and took out the failed ie8 hack ('\' - don't think it even is, is it) and my *** is saved again! Thank you so much!

    I think my problem must be that I'm over-complicating things too much. JS, ridiculous amounts of conditional statements and millions of css parsers. I'm learning though - can't wait to get started on a new project to start afresh.


  •  

    Posting Permissions

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