SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer suddenly wrapping around content

    Hi guys

    A rookie website designer finding himself in a new dilemma here.

    Ever since adding an image-mapped menu to my homepage, the footer of my site has stretched above my content, like so ---> http://www.aspired-futures.com/can-y...fundraising-2/.

    Furthermore, my navigation wrapper has seemed to bloated in size. I have a feeling the two are related.

    I've tried back tracking, undoing all the changes I've made. I've tried replacing my edited html/php with the Theme's original, both to no avail.

    My code in full, according to html validator, looks like so:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Contact Us - Aspired Futures</title>
    <link rel="stylesheet" type="text/css" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/style.css" media="screen" />
    <!-- Check if alternitive color scheme is choosen -->
    <link rel="stylesheet" type="text/css" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/styles/default.css" media="screen" />
    <!-- Load Rich JS fonts -->
    <script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/typeface-0.15.js"></script>
    <script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/droid_serif_bold.typeface.js"></script>
    <link rel="alternate" type="application/rss+xml" title="Aspired Futures &raquo; Contact Us Comments Feed" href="http://www.aspired-futures.com/contact-us/feed/" />
    <link rel='stylesheet' id='contact-form-7-css' href='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2.1' type='text/css' media='all' />
    <link rel='stylesheet' id='NextGEN-css' href='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='shutter-css' href='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4' type='text/css' media='screen' />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.4.1'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js?ver=3.4.1'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.cookie.js?ver=3.4.1'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.9.js?ver=3.4.1'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/?ver=pprjq1'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/superfish.js?ver=3.4.1'></script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/slideshow.js?ver=3.4.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.aspired-futures.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.aspired-futures.com/wp-includes/wlwmanifest.xml" />
    <link rel='prev' title='Volunteers' href='http://www.aspired-futures.com/volunteers/' />
    <link rel='next' title='Our Volunteers' href='http://www.aspired-futures.com/volunteers/our-volunteers/' />
    <meta name="generator" content="WordPress 3.4.1" />
    <link rel='canonical' href='http://www.aspired-futures.com/contact-us/' />
    <!-- <meta name="NextGEN" version="1.9.7" /> -->
    <!--[if IE 6]>
    <script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/pngfix.js"></script>
    <script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/menu.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie6.css" />
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie7.css" />
    <![endif]-->
    <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie8.css" />
    <![endif]-->
    <!-- Start slideshow -->
    </head>
    <body >
    <div id="wrapper">
    <div id="head_content">
    <div id="head_wrap">
    <!-- Header Menu -->
    <div class="typeface-js" id="top-nav">
    <a class="home" href="http://www.aspired-futures.com" ></a>
    <ul class="nav">
    <li class="page_item page-item-2"><a href="http://www.aspired-futures.com/about/"><span class="menu">About</span></a>
    <ul class='children'>
    <li class="page_item page-item-39"><a href="http://www.aspired-futures.com/about/who-we-are/"><span class="menu">Who we are</span></a></li>
    <li class="page_item page-item-44"><a href="http://www.aspired-futures.com/about/what-we-do/"><span class="menu">What we do</span></a></li>
    <li class="page_item page-item-54"><a href="http://www.aspired-futures.com/about/the-house/"><span class="menu">The House</span></a></li>
    <li class="page_item page-item-198"><a href="http://www.aspired-futures.com/about/bespoke-holiday-provisions/"><span class="menu">Bespoke Holiday Provisions</span></a></li>
    <li class="page_item page-item-41"><a href="http://www.aspired-futures.com/about/how-to-access-our-services/"><span class="menu">How to access our services</span></a></li>
    </ul>
    </li>
    <li class="page_item page-item-13"><a href="http://www.aspired-futures.com/can-you-help/"><span class="menu">Can you help?</span></a>
    <ul class='children'>
    <li class="page_item page-item-58"><a href="http://www.aspired-futures.com/can-you-help/friends/"><span class="menu">Friends of Aspired Futures</span></a></li>
    <li class="page_item page-item-107"><a href="http://www.aspired-futures.com/can-you-help/fundraising-2/"><span class="menu">Fundraising</span></a></li>
    </ul>
    </li>
    <li class="page_item page-item-22"><a href="http://www.aspired-futures.com/volunteers/"><span class="menu">Volunteers</span></a>
    <ul class='children'>
    <li class="page_item page-item-35"><a href="http://www.aspired-futures.com/volunteers/our-volunteers/"><span class="menu">Our Volunteers</span></a></li>
    <li class="page_item page-item-37"><a href="http://www.aspired-futures.com/volunteers/can-you-help/"><span class="menu">Can you help?</span></a></li>
    <li class="page_item page-item-264"><a href="http://www.aspired-futures.com/volunteers/volunteer-application-form/"><span class="menu">Volunteer application form</span></a></li>
    </ul>
    </li>
    <li class="page_item page-item-25 current_page_item"><a href="http://www.aspired-futures.com/contact-us/"><span class="menu">Contact Us</span></a></li>
    </ul>
    <!-- /Menu -->
    </div>
    <!-- Logo -->
    <div id="logo">
    <a href="http://www.aspired-futures.com" title="Aspired Futures"><img src="http://www.aspired-futures.com/wp-content/uploads/2012/10/AspiredFlogo21.png" /></a>
    </div><!-- /#logo -->
    <div class="clear"></div>
    <!-- Check if is homepage, if is include slideshow -->
    </div></div>
    <div id="ribbon_content">
    <div id="ribbon_title">
    <h1 id="pagetitle" ><a id="pagetitle" href="http://www.aspired-futures.com/contact-us/" title="Contact Us">Contact Us</a></h1>
    </div></div>
    <div id="content" class="page col-full">
    <div id="main" class="col-left">
    <div class="post">
    <div class="entry">
    <h2>Fancy a chat?</strong></h2>
    <p>Don’t hesitate to get in touch with any queries or questions you might have. We’re more than happy to discuss how Aspired-Futures could benefit you.</p>
    <div class="wpcf7" id="wpcf7-f26-p25-o1"><form action="/contact-us/#wpcf7-f26-p25-o1" method="post" class="wpcf7-form">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="26" />
    <input type="hidden" name="_wpcf7_version" value="3.2.1" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f26-p25-o1" />
    <input type="hidden" name="_wpnonce" value="bbaf301f9d" />
    </div>
    <p>Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
    <p>Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </p>
    <p>Subject<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" /></span> </p>
    <p>Your Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10"></textarea></span> </p>
    <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
    <h2>Where we are</h2>
    <p>Kensington Foundation Lodge</p>
    <p>216 Whitegate Drive</p>
    <p>Blackpool</p>
    <p>FY3 9JL</p>
    </div><!-- /.entry -->
    </div><!-- /.post -->
    </div><!-- /#main -->
    <div id="sidebar" class="col-right">
    <div id="sidebar_content">
    <div id="text-2" class="widget widget_text"><h3>Noticeboard<span>&nbsp;</span></h3>	 <div class="textwidget"><p>Recent activity</p>
    </div>
    </div>
    </div>
    </div><!-- /#sidebar -->
    </div><!-- /#content -->
    <div id="footer">
    <div class="inner">
    <!-- Footer Menu-->
    <ul class="nuv">
    <li ><a href="http://www.aspired-futures.com">Home</a></li>
    <li class="page_item page-item-2"><a href="http://www.aspired-futures.com/about/">About</a></li>
    <li class="page_item page-item-13"><a href="http://www.aspired-futures.com/can-you-help/">Can you help?</a></li>
    <li class="page_item page-item-22"><a href="http://www.aspired-futures.com/volunteers/">Volunteers</a></li>
    <li class="page_item page-item-25 current_page_item"><a href="http://www.aspired-futures.com/contact-us/">Contact Us</a></li>
    </ul>
    <!-- Get Social Icons -->
    <div id="social_foot">
    <a target="_blank" href="#"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/fb_icon.png" /></a>
    <a target="_blank" href="#"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/tw_icon.png" /></a>
    <a href="/feed"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/rss_icon.png" /></a>
    </div>
    <div class="clear"></div>
    </div>
    <!-- Footer copywrite text -->
    <div id="copywrite"> <p>
    &copy; 2012&nbsp;Aspired Futures. All rights Reserved.</p><a target="_blank" class="logo_icon" href="http://www.wordpressnonprofit.com">Non-Profit Wordpress Themes</a>
    </div>
    <div class="fix"></div>
    </div><!-- /#footer -->
    </div><!-- /#wrapper -->
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.14'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var _wpcf7 = {"loaderUrl":"http:\/\/www.aspired-futures.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2.1'></script>
    <!-- /Get Analytics Code -->
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I've narrowed it down to the following image map CSS:
    Code:
    #imgmap {
    	position: relative;
    	_zoom: 1;
    }
    
    #imgmap li {
    	position: absolute;
    	display: block;
    	list-style: none;
    	outline:none;
    	overflow: hidden;
    }
    
    #imgmap li a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	_background: url(space.gif);
    	text-indent: -1000em;
    }
    
    #area1 {
    	left: 76px;
    	top: 43px;
    	width: 166px;
    	height: 117px;
    }
    
    #area2 {
    	left: 438px;
    	top: 18px;
    	width: 167px;
    	height: 111px;
    }
    
    #area3 {
    	left: 746px;
    	top: 86px;
    	width: 191px;
    	height: 133px;
    }
    
    #area4 {
    	left: 753px;
    	top: 236px;
    	width: 182px;
    	height: 144px;
    }
    
    #area5 {
    	left: 771px;
    	top: 522px;
    	width: 149px;
    	height: 107px;
    }
    
    #area6 {
    	left: 471px;
    	top: 489px;
    	width: 166px;
    	height: 91px;
    }
    
    #area7 {
    	left: 143px;
    	top: 538px;
    	width: 149px;
    	height: 99px;
    }
    
    #area8 {
    	left: 10px;
    	top: 383px;
    	width: 156px;
    	height: 61px;
    }
    Can anyone identify where the issue lies?

    Thanks
    Last edited by Paul O'B; Nov 20, 2012 at 13:04. Reason: code tags added

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The footer looks at the bottom of the page to me. Have you fixed it or am I looking in the wrong place?

  4. #4
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    I've actually removed that CSS for the time being, I'll add it back in and show you the result

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok, post when you've done it.

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You haven't cleared the floats so either add clear:both to #footer or use a clearing mechanism on #content.

    Code:
    #content:after {
    	content:".";
    	display:block;
    	clear:both;
    	height:0;
    	visibility:hidden
    }

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're a saint! That was exactly it!

    Massively appreciate your time man, how did you diagnose it, so I know for next time?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It's a common mistake - we see it hundreds of times here in the forums and one of the first things to look for.

    If the background of an element is stretching above where its supposed to be then the chances are you haven't contained (or cleared) your floats.


Bookmarks

Posting Permissions

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