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 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Easy Accordion + Push Footer

    Hey Guys,
    I started a new thread since the other one seemed to be causing some problems.

    I've used a simple accordion scriopt. I want it to push the footer down as the div expands but I'm not sure how to accomplish this.

    The tutorial is from here:
    http://viralpatel.net/blogs/create-a...n-menu-jquery/

    My code:

    HTML
    Code:
    <html>
    <head>
    <link href="css/mainTest.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="img/favicon.ico">
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrapper {display:table;height:100%}
    	</style>
    <![endif]-->
    <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->
    
    
    
    
    
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="topBar">
        </div>
      <div id="mainTopHolder">
      
        	<div id="apLogo">     
          <img src="img/logo.png" width="202" height="136" alt="Andrew Pennell"> 
          </div>
          <div id="navBar">
    
    <ul id="menu">
    
        <li><a id="menu-home" href="#">Home</a></li>
    
        <li><a id="menu-about" href="#">About</a></li>
    
        <li><a id="menu-work" href="#">Work</a></li>
    
        <li><a id="menu-resume" href="#">Resume</a></li>
    
        <li><a id="menu-blog" href="#">Blog</a></li>
    
        <li><a id="menu-contact" href="#">Contact</a></li>
    
    </ul>
    
                
          </div>
          
         
        </div>
        
        <!--All divs closed save wrapper -->
        <div id="mainCenter">
    
         <div class="centerPic">
           <div id="pageHeader"><img src="img/aboutHeader.png" width="322" height="68"></div>
    <div id="aboutMain" class="rounded-corners">
    <ul id="accordion">
        <li><div>Sports</div>
            <ul>
                <li><a href="#">Golf</a></li>
                <li><a href="#">Cricket</a></li>
                <li><a href="#">Football</a></li>
            </ul>
        </li>
        <li><div>Technology</div>
            <ul>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li><div>Latest</div>
            <ul>
                <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
                            <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
                            <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
                            <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
                            <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
                            <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
            </ul>
        </li>
    </ul>
    </div>
    
    
    <div id="footer">
    	<div id="footerInfoBox"><a href="index.html">Home</a> / <a href="about/index.html">About</a> / <a href="work/index.html">Work</a> / <a href="resume/index.html">R&Eacute;sum&Eacute;</a> / <a href="contact/index.html">Contact</a> / <a href="sitemap.html">Site Map</a><br />
        <img src="img/aplogo2.png" width="298" height="169"></div>
    </div>
    </div>
    	
    
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src='../../js/libs/jquery-1.6.3.min.js'>\x3C/script>")</script>
    
    
    <script type="text/javascript">
    $("#accordion > li > div").click(function(){
     
        if(false == $(this).next().is(':visible')) {
            $('#accordion ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
     
    $('#accordion ul:eq(0)').show();
    </script>
    </body>
    </html>

    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }
    
    body {
    	background:url(../img/frenchstucco.png);
    	color:#424242;
    }
    .soonHold {
    	background: url(../img/comingsoon.png);
    	background-repeat:no-repeat;
    	width: 500px;
    	height: 500px;
    	margin-top: 5%;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    #wrapper {
    	font-size:13px;
    	text-align:center;
    	padding:0;
    	margin:0 auto;
    	border:0;
    	outline:0;
    	min-height:100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    }
    	.wrapper2 {
    	width: 100%;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -4em;
    
    }
    #topBar {
    	background-image:url(../img/topBlueBar.png);
    	height:10px;
    	width: 100%;
    	background-color:#333;
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    }
    #mainTopHolder {
    	margin:0 auto;
    	width: 980px;
    }
    #mainCenter {
    	margin: 0 auto;
    	width: 980px;
    	clear: both;
    }
    #apLogo {
    	margin-right:110px;
    	float:left;
    }
    #navBar {
    	width:980px;
    }
    #menu {
    	float:left;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 645px;
        height: 32px;
        overflow: hidden;
    	margin-top:60px;
    }
    #menu li {
    	float:left;
    }
    #menu a {
        display: block;
        background-image: url(../img/nav.png);
        padding-top: 64px; /* same as height of #example-nav */
        text-decoration: none; /* needed for IE8 beta, otherwise it still shows the underlines */
    }
    #menu-home {
        width: 90px;
    }
    #menu-home:hover {
        background-position: 0px -31px;
    }
    #menu-about {
        width: 105px;
        background-position: -95px 0;
    }
    #menu-about:hover {
        background-position: -95px -31px;
    }
    #menu-work {
        width: 100px;
        background-position: -205px 0;
    }
    #menu-work:hover {
        background-position: -205px -31px;
    }
    #menu-resume {
        width: 120px;
        background-position: -305px 0;
    }
    #menu-resume:hover {
        background-position: -305px -31px;
    }
    #menu-blog {
        width: 96px;
        background-position: -425px 0;
    }
    #menu-blog:hover {
        background-position: -425px -31px;
    }
    #menu-contact {
        width: 120px;
        background-position: -520px 0;
    }
    #menu-contact:hover {
        background-position: -520px -31px;
    }
    .centerPic {
    	bottom:50px;
    	position:relative;
    	display:block;
    	clear:both;
    }#connectBox {
    	width: 960px;
    	margin: 0 auto;
    	text-align: center;
    	margin-bottom: 20px;
    
    }
    
    #footer {
    	background-color:red;
    	height: 200px;
    	width: 100%;
    	z-index: 1;
    	border:none;
    	position: relative;
    	background-repeat: no-repeat;
    	position: relative;
    	clear:both;
    	margin-top:-200px;
    }
    #footer a {
    	color:#333;
    }
    #footer a:link {
    	color:#333;
    }
    #footer a:visited {
    	color:#333;
    }
    #footer a:hover {
    	color:#261B49;
    }
    #footer a:active {
    	color:#333;
    }
    
    
    
    
    #footerInfoBox {
    	height:60px;
    	text-align:center;
    	padding-top:20px;
    }
    #reachOut {
    	font-size:30px;
    	width:320px;
    	margin-bottom:50px;
    	margin-top:50px;
    	float:left
    }
    #centerEmail {
    font-family:Gotham;
    font-size:34px;
    margin-top:130px;
    margin-left:160px;
    float:left;
    }
    #centerEmail a{
    	text-decoration:none;
    	color:#333;
    }
    #centerEmail a:link {
    	color:#333;
    }
    #centerEmail a:visited {
    	color:#333;
    }
    #centerEmail a:hover {
    	color:#333;
    	text-decoration:underline;
    }
    #centerEmail a:active {
    	color:#333;
    }
    #pageHeader {
    margin-top:180px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }
    #aboutContent{
    border: 1px solid red;
    width:100%;
    height:100%;
    text-align:left;
    }
    #aboutMain {
    height:500px;
    width:80%;
    background-image:url(../bgs/plaid3.png);
    margin-top:80px;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    padding:12px;
    
    }
    .rounded-corners {
      -moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      border-radius: 10px; /* CSS3 */
    }
    .margin20clear {
    	margin-bottom:5px;
    	clear:both;
    	
    }
    .mainread {
    font-size:40px;
    }
    /*FONT FACES */
    
    @font-face {
        font-family: 'M5';
        src: url('ff/museosans-webfont.eot');
        src: url('ff/museosans-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/museosans-webfont.woff') format('woff'),
             url('ff/museosans-webfont.ttf') format('truetype'),
             url('ff/museosans-webfont.svg#MuseoSans500Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    
    
    @font-face {
        font-family: 'M7';
        src: url('ff/museosans_0-webfont.eot');
        src: url('ff/museosans_0-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/museosans_0-webfont.woff') format('woff'),
             url('ff/museosans_0-webfont.ttf') format('truetype'),
             url('ff/museosans_0-webfont.svg#MuseoSans700Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    @font-face {
        font-family: 'Gotham';
        src: url('ff/gothammedium-webfont.eot');
        src: url('ff/gothammedium-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/gothammedium-webfont.woff') format('woff'),
             url('ff/gothammedium-webfont.ttf') format('truetype'),
             url('ff/gothammedium-webfont.svg#GothamMediumRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    /* Javascript Styles */
    #accordion {
        list-style: none;
        padding: 0 0 0 0;
        width: 170px;
    }
    #accordion div {
        display: block;
        background-color: #FF9927;
        font-weight: bold;
        margin: 1px;
        cursor: pointer;
        padding: 5 5 5 7px;
        list-style: circle;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    #accordion ul {
        list-style: none;
        padding: 0 0 0 0;
    }
    #accordion ul{
        display: none;
    }
    #accordion ul li {
        font-weight: normal;
        cursor: auto;
        background-color: #fff;
        padding: 0 0 0 7px;
    }
    #accordion a {
        text-decoration: none;
    }
    #accordion a:hover {
        text-decoration: underline;
    }

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Another Option

    I also tried using this example:

    http://www.stemkoski.com/stupid-simp...ccordion-menu/

    The content does not push the footer div down but instead going behind it so it's something in the way I'm closing the divs, (I think)

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    For your #footer remove z-index:1 and position:relative (which occurs twice) from the css, although it's position:relative that is causing the problem.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Thank you for your response.
    I removed the position:relative and the zindex and it still doesn't push the footer down. Rather. It just goes on top of it.

    Thanks!

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Sorry, I got side-tracked. I think it's a z-index issue, but maybe someone else has a suggestion..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Here is the other example that still will not push the code in FF
    HTML
    Code:
    <html>
    <head>
    <title>Welcome to Andrew Pennell's Porfolio Site</title>
    <link href="css/mainTest.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="img/favicon.ico">
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrapper {display:table;height:100%}
    	</style>
    <![endif]-->
    <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->
    
    
    
    
    
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="topBar">
        </div>
      <div id="mainTopHolder">
      
        	<div id="apLogo">     
          <img src="img/logo.png" width="202" height="136" alt="Andrew Pennell"> 
          </div>
          <div id="navBar">
    
    <ul id="menu">
    
        <li><a id="menu-home" href="#">Home</a></li>
    
        <li><a id="menu-about" href="#">About</a></li>
    
        <li><a id="menu-work" href="#">Work</a></li>
    
        <li><a id="menu-resume" href="#">Resume</a></li>
    
        <li><a id="menu-blog" href="#">Blog</a></li>
    
        <li><a id="menu-contact" href="#">Contact</a></li>
    
    </ul>
    
                
          </div>
          
         
        </div>
        
        <!--All divs closed save wrapper -->
        <div id="mainCenter">
    
         <div class="centerPic">
           <div id="pageHeader"><img src="img/aboutHeader.png" width="322" height="68"></div>
    <div id="aboutMain" class="rounded-corners">
    
    		<div class="accordionButton">Button 1 Content</div>
    		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
    		<div class="accordionButton">Button 2 Content</div>
    		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
    		<div class="accordionButton">Button 3 Content</div>
    		<div class="accordionContent">Content 1<br />Short Example</div>
    		<div class="accordionButton">Button 4 Content</div>
    		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
    
    </div>
    
    
    <div id="footer">
    	<div id="footerInfoBox"><a href="index.html">Home</a> / <a href="about/index.html">About</a> / <a href="work/index.html">Work</a> / <a href="resume/index.html">R&Eacute;sum&Eacute;</a> / <a href="contact/index.html">Contact</a> / <a href="sitemap.html">Site Map</a><br />
        <img src="img/aplogo2.png" width="298" height="169"></div>
    </div><!--Footer Ends -->
    </div><!--Wrapper Ends -->
    	
    
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src='../../js/libs/jquery-1.6.3.min.js'>\x3C/script>")</script>
    
    
    <script type="text/javascript">
    $(document).ready(function() {
     
    	//ACCORDION BUTTON ACTION	
    	$('div.accordionButton').click(function() {
    		$('div.accordionContent').slideUp('normal');	
    		$(this).next().slideDown('normal');
    	});
     
    	//HIDE THE DIVS ON PAGE LOAD	
    	$("div.accordionContent").hide();
     
    });
    </script>
    </body>
    </html>

    and the CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height: 100%;
    }
    
    body {
    	background:url(../img/frenchstucco.png);
    	color:#424242;
    }
    .soonHold {
    	background: url(../img/comingsoon.png);
    	background-repeat:no-repeat;
    	width: 500px;
    	height: 500px;
    	margin-top: 5%;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    #wrapper {
    	font-size:13px;
    	text-align:center;
    	padding:0;
    	margin:0 auto;
    	border:0;
    	outline:0;
    	min-height:100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    }
    	.wrapper2 {
    	width: 100%;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -4em;
    
    }
    #topBar {
    	background-image:url(../img/topBlueBar.png);
    	height:10px;
    	width: 100%;
    	background-color:#333;
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    }
    #mainTopHolder {
    	margin:0 auto;
    	width: 980px;
    }
    #mainCenter {
    	margin: 0 auto;
    	width: 980px;
    	clear: both;
    }
    #apLogo {
    	margin-right:110px;
    	float:left;
    }
    #navBar {
    	width:980px;
    }
    #menu {
    	float:left;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 645px;
        height: 32px;
        overflow: hidden;
    	margin-top:60px;
    }
    #menu li {
    	float:left;
    }
    #menu a {
        display: block;
        background-image: url(../img/nav.png);
        padding-top: 64px; /* same as height of #example-nav */
        text-decoration: none; /* needed for IE8 beta, otherwise it still shows the underlines */
    }
    #menu-home {
        width: 90px;
    }
    #menu-home:hover {
        background-position: 0px -31px;
    }
    #menu-about {
        width: 105px;
        background-position: -95px 0;
    }
    #menu-about:hover {
        background-position: -95px -31px;
    }
    #menu-work {
        width: 100px;
        background-position: -205px 0;
    }
    #menu-work:hover {
        background-position: -205px -31px;
    }
    #menu-resume {
        width: 120px;
        background-position: -305px 0;
    }
    #menu-resume:hover {
        background-position: -305px -31px;
    }
    #menu-blog {
        width: 96px;
        background-position: -425px 0;
    }
    #menu-blog:hover {
        background-position: -425px -31px;
    }
    #menu-contact {
        width: 120px;
        background-position: -520px 0;
    }
    #menu-contact:hover {
        background-position: -520px -31px;
    }
    .centerPic {
    	bottom:50px;
    	position:relative;
    	display:block;
    	clear:both;
    }#connectBox {
    	width: 960px;
    	margin: 0 auto;
    	text-align: center;
    	margin-bottom: 20px;
    
    }
    
    #footer {
    	background-color:red;
    	height: 200px;
    	width: 100%;
    	border:none;
    	background-repeat: no-repeat;
    	clear:both;
    	margin-top:-200px;
    	overflow:visible;
    	
    }
    #footer a {
    	color:#333;
    }
    #footer a:link {
    	color:#333;
    }
    #footer a:visited {
    	color:#333;
    }
    #footer a:hover {
    	color:#261B49;
    }
    #footer a:active {
    	color:#333;
    }
    
    
    
    
    #footerInfoBox {
    	height:60px;
    	text-align:center;
    	padding-top:20px;
    }
    #reachOut {
    	font-size:30px;
    	width:320px;
    	margin-bottom:50px;
    	margin-top:50px;
    	float:left
    }
    #centerEmail {
    font-family:Gotham;
    font-size:34px;
    margin-top:130px;
    margin-left:160px;
    float:left;
    }
    #centerEmail a{
    	text-decoration:none;
    	color:#333;
    }
    #centerEmail a:link {
    	color:#333;
    }
    #centerEmail a:visited {
    	color:#333;
    }
    #centerEmail a:hover {
    	color:#333;
    	text-decoration:underline;
    }
    #centerEmail a:active {
    	color:#333;
    }
    #pageHeader {
    margin-top:180px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }
    #aboutContent{
    border: 1px solid red;
    width:100%;
    height:100%;
    text-align:left;
    }
    #aboutMain {
    height:500px;
    width:80%;
    background-image:url(../bgs/plaid3.png);
    margin-top:80px;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    padding:12px;
    
    }
    .rounded-corners {
      -moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      border-radius: 10px; /* CSS3 */
    }
    .margin20clear {
    	margin-bottom:5px;
    	clear:both;
    	
    }
    .mainread {
    font-size:40px;
    }
    /*FONT FACES */
    
    @font-face {
        font-family: 'M5';
        src: url('ff/museosans-webfont.eot');
        src: url('ff/museosans-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/museosans-webfont.woff') format('woff'),
             url('ff/museosans-webfont.ttf') format('truetype'),
             url('ff/museosans-webfont.svg#MuseoSans500Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    
    
    @font-face {
        font-family: 'M7';
        src: url('ff/museosans_0-webfont.eot');
        src: url('ff/museosans_0-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/museosans_0-webfont.woff') format('woff'),
             url('ff/museosans_0-webfont.ttf') format('truetype'),
             url('ff/museosans_0-webfont.svg#MuseoSans700Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    @font-face {
        font-family: 'Gotham';
        src: url('ff/gothammedium-webfont.eot');
        src: url('ff/gothammedium-webfont.eot?#iefix') format('embedded-opentype'),
             url('ff/gothammedium-webfont.woff') format('woff'),
             url('ff/gothammedium-webfont.ttf') format('truetype'),
             url('ff/gothammedium-webfont.svg#GothamMediumRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    /* Javascript Styles */
    #accordion {
        list-style: none;
        padding: 0 0 0 0;
        width: 170px;
    }
    #accordion div {
        display: block;
        background-color: #FF9927;
        font-weight: bold;
        margin: 1px;
        cursor: pointer;
        padding: 5 5 5 7px;
        list-style: circle;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    #accordion ul {
        list-style: none;
        padding: 0 0 0 0;
    }
    #accordion ul{
        display: none;
    }
    #accordion ul li {
        font-weight: normal;
        cursor: auto;
        background-color: #fff;
        padding: 0 0 0 7px;
    }
    #accordion a {
        text-decoration: none;
    }
    #accordion a:hover {
        text-decoration: underline;
    }
    
    
    
    /*Accordion 2 CSS */
    #wrapper {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	}
     
    .accordionButton {	
    	width: 800px;
    	float: left;
    	background: #003366;
    	border-bottom: 1px solid #FFFFFF;
    	cursor: pointer;
    	}
     
    .accordionContent {	
    	width: 800px;
    	float: left;
    	background: #95B1CE;
    	display: none;
    	}

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Still puzzled on this one, the footer (as in the darker blue with the image on the left) is pushed down as the accordion expands on your original page. It works fine for me in FF14, Chrome, IE9, IE7, Safari....

    Maybe I've misunderstood the problem....

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Hey thanks for replying. I think you helped me on my last problem too.

    I've included a picture of what i'm seeing in Chrome.

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Sorry, just reread the other thread, thought you had the problem with the original page, not the new page.....

    If I try the code in your most recent post, I don't see a problem in FF, but I do in Chrome, as your picture. The problem here I think is because of the combination of the height set on #aboutMain, and the negative top-margin on #footer, which is causing it to be higher than its normal position in the document.

    If I remove the negative top-margin the issue disappears in Chrome. Removing the height on #aboutMain causes the footer to butt right up to the accordion, and move down as it expands.


  •  

    Posting Permissions

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