I am building a Drupal e-commerce site on which the product pages will have

Question

0

Asked: June 9, 20262026-06-09T22:42:23+00:00 2026-06-09T22:42:23+00:00

I am building a Drupal e-commerce site on which the product pages will have

0

I am building a Drupal e-commerce site on which the product pages will have different information available under different tabs under the product image. I have run into a problem with how IE7 handles this. When the page is rendered, the footer is in one place, but when a different tab is clicked, a portion of the footer remains where it was, even though the remainder of the page changes in length. This poses a problem on tabs when the content is longer than the initial tab. Been beating my head against this one for a day and a half now, so I thought I would get some fresh perspective on it. Here is a link to a page I have recreated the issue on.

http://dev.jsfix.gotpantheon.com/node/1/

Clicking on the specifications tab in IE7 or any compatibility tester should give you the problem I mentioned. Also, Sorry the site is stupid-ugly. Just recreated something as quickly as possible to get issue reproduced. Though you can check out all the code in the source, I’m glad to post any code requested. Thanks for your input.

Update

The site largely lacks set height and width as this is my first attempt at responsive design. Here some code as requested.

CSS

/*#menu-bar
{
     background-color: #61471f;
   background-image: url(images/fallback-gradient.png);
    background-image:-moz-linear-gradient(top, #d7bf90, #61471f);
    background-image:-webkit-gradient(linear,0 0,0 100%, from(#d7bf90), to(#61471f));
    background-image:-webkit-linear-gradient(top, #d7bf90, #61471f);
    background-image:     -ms-linear-gradient(top, #d7bf90, #61471f);
    background-image:      -o-linear-gradient(top, #d7bf90, #61471f);
    color: #fff;
}*/

html {
      font-size: .80em;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #000;
    height: 100%;
}
body {
background: url('/sites/default/files/images/wood-background.png') repeat center top;
height: 100%;
  color: #000;
}

header p
{
margin: 0;
}

div#page-wrapper
{
height: 100%; 
}

div#page
{
max-width:960px;
background-color:#000;
margin: 0 auto;
height: 100%; 
}

div#columns
{
padding-right: 20px;
}
div.flex-container
{
    border-bottom: 4px solid #ffc82f;
}

div.field.field-name-body.field-type-text-with-summary.field-label-hidden.view-mode-teaser
{
    display: none;
}
div.messages
{
    margin-top: 0;
}

div.addedtocart{
  border: 1px solid #A31514;
  color: #ffffff;
  background-color: #A31514;
  padding: 2px 10px;
  max-width: 170px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}

article#article-45
{
display:none;
}

article#article-10
{
margin-bottom:0;
}

div#content
{
margin:0 0 10px 10px;
}

div#footer-content
{
margin-right:7px;
}

div#block-nodesinblock-0
{
margin-bottom:0;
}

#block-system-main.content-display-grid article.article
{
min-height: 250px;
}

.hl-l .region-header 
{
margin: 0;
margin-bottom: -5px;
}

#branding
{
margin: 0;
display: none;
}

#header-wrapper 
{
    border-bottom:none;
    /*background-image:url('/sites/default/files/images/Daisy_web_page_header.gif');
    background: url('/sites/default/files/images/Daisy_web_page_header.gif');
    background-repeat: no-repeat;
    background-position: center top;*/
    filter: none;
  -ms-filter: none;
  /*margin-bottom: -3px; Maybe fix black line above menu*/
  /*height: 223px; Commented out for responsive */
    background-color:#FFC82F;
}

#header-wrapper .container
{
z-index: 900;
}


#header-wrapper header
{
/*height: 185px;*/
position: relative;
margin: 0;
}

#nav-wrapper
{   /*position: absolute;*/
    top: 0;
    /*width: 100%;*/
    box-shadow: none;
    display: block;
}

select#mobilemenu
{
display: none;
}

#menu-bar
{
    background: url('/sites/default/files/images/Yellow_bar.gif') repeat-x center top;
}

.sf-menu li ul li, .sf-menu li ul a
{
background-color:#FFC82F;
margin-top:-5px;
}

a.sf-depth-2
{
margin-right:0 !important; 
}

a.sf-depth-3
{
margin-right:0 !important; 
}

.sf-menu li:hover ul, .sf-menu.sfHover ul
{
margin:0;
}

.sf-menu ul
{
width: 14em !important;
}

.nav{
font-size:1.25em;
}

.nav li a{
color: #000;
}

.nav ul li
{
line-height:2.4em
}
.nav ul li a
{
line-height: 2.4em;
text-transform: none;
margin-right: 15px;
 }

.nav ul li a:hover
{
 background: #DDE;
 }

 .menuparent
 {
line-height: 2.4em;
text-transform: none;
margin-right: 15px;
font-weight: 700;
padding: 0 10px;
 }

 .menuparent:hover
 {
  background: #DDE;
 }

#content-wrapper
{
    border-top: none;
    border-bottom: none;
    padding: 0;
}
#secondary-content-wrapper .texture-overlay
{
    padding-top: 4em; /* Was Zero and Static, but changed back for responsive*/
    border-bottom: none;
}

#secondary-content-wrapper .region-secondary-content, #tertiary-content-wrapper .region-tertiary-content
{
    margin:0;
}

#content-wrapper.no-secondary
{
    /*padding: 0;*/
    background: #fff;
}

article header 
{
    margin: 0;
}
.content-display-grid article.article h1 
{
min-height: 38px;
}

#footer-wrapper
{
border: none;
}

#page-footer
{
    color: #fff;
    text-align: right;
    font-size: 8.5pt;
    background-color:#000;
}
#page-footer a, #page-footer a:visited, #page-footer a:link, #page-footer a:hover, #page-footer a:active
{
    text-decoration: none;
    color: #fff;
}
#page-footer a:hover
{
    text-decoration: underline;
}

footer.clearfix
{
background-color: #000;
}

input[type="submit"]
{
    background-color: #a31514;
    background-image: none;
    color: #fff;
    border: none;
    margin-right:3px;
    filter: none;
    -ms-filter: none;
}

input#edit-checkout, input#edit-continue 
{
    margin-right:3px;
}



input[type="radio"][name^="commerce"]
{
    display:none;
}

input#edit-quantity
{
    border: 1px solid #d5d5d5;
    background-color: #fff;
        filter: none;
    -ms-filter: none;
}

input#edit-account-login-mail
{
width:227px;
}

form.commerce-add-to-cart input, .add-to-cart #edit-actions input
{
    filter: none;
    -ms-filter: none;
}

div.block-inner.clearfix
{
    margin: 0;
}

/*Nationals Menu*/

ul li.expanded
{
list-style-image: none;
list-style-type: none;
}

ul li.leaf
{
list-style-image: none;
list-style-type: none;
}

/**
*Tabber CSS
*/

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #000; }
ul.tabbernav li a:visited { color: #000; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #FFC82F;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}


/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:none;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

/*Migrated from Old Daisy Site*/

.retailer
{
    display: block;
    padding: 10px 10px 20px 10px;
    border-top: 1px solid #000;
    /*height: 75px;*/
}
.retailer img
{
    clear: both;
}
.retailer p
{
    font-size: 10px;
    margin-left: 125px;
}
.retailer a
{
    font-size: 13px;
}
.retailer b
{
    font-size: 12px;
}

h4
{
font-size: 18px;
}

tbody
{
border: none;
}

HTML

<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if (lte IE 6)&(!IEMobile)]><html class="ie6 ie6-7 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie7 ie6-7 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 8)&(!IEMobile)]><html class="ie8 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta about="/node/1" property="sioc:num_replies" content="0" datatype="xsd:integer" />
<meta content="Test Page" about="/node/1" property="dc:title" />
<link rel="canonical" href="/node/1" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="shortlink" href="/node/1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Test Page | JSFix</title>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css__9zsakYbWSOTLroLLtWO9P7zLJXhXtSJo2OgXN4wIrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_Vn_p7xhZmS8yWWx26P0Cc7Tm0GG2K1gLWEoVrhw5xxg.css" media="all" />
<style>body.snf-gwf-open-sans #site-name{font-family :'Open Sans'}
body.ssf-gwf-open-sans #site-slogan{font-family:'Open Sans'}
body.ptf-gwf-open-sans #page-title{font-family:'Open Sans'}
body.ntf-gwf-open-sans .article-title{font-family:'Open Sans'}
body.ctf-gwf-open-sans .comment-title{font-family:'Open Sans'}
body.btf-gwf-open-sans .block-title{font-family:'Open Sans'}
.flexible-slideshow,.flexible-slideshow .article-inner,.flexible-slideshow .article-content,.flexslider{max-width:940px;}
</style>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_-ahHBm_xiz8FfJcOkgLwWABHL05_CSqrP_Fvca-NQYI.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_kOgNrNOOFZK7-60fYtH9T0gsBZmmSm633A_N1s0urS8.css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" media="all" />

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/at-commerce/css/ie-6.css?m8v34m" media="all" />
<![endif]-->

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-8.css?m8v34m" media="all" />
<![endif]-->

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-lte-7.css?m8v34m" media="all" />
<![endif]-->

<!--[if lte IE 9]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-lte-9.css?m8v34m" media="all" />
<![endif]-->
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_3jHghlMLrjr9xXAC0JufqSSch3oAbkZstSqYdc4uuck.js"></script>
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_0h7CTuYRo_Ghzoteora_GwNIEjQUJsrG35yK6tpOL4k.js"></script>
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_bw8RYuKrTKJAeDPfrHmpjEzmr12cPs86OqIm37U0muU.js"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"daisy","theme_token":"_CBTf2UvK6px6JFgsj3Z4JxmSWKH4SfOsxj1kmfDdAQ","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/vertical-tabs.js":1,"sites\/all\/themes\/at-commerce\/js\/jquery.flexslider-min.js":1,"sites\/all\/themes\/at-commerce\/js\/slider.options.js":1,"sites\/all\/themes\/at-commerce\/js\/draw.js":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/js\/respond.js":1,"sites\/all\/themes\/daisy\/js\/jquery.mobilemenu.min.js":1,"sites\/all\/themes\/daisy\/js\/AC_RunActiveContent.js":1,"sites\/all\/themes\/daisy\/js\/flowplayer-3.2.11.min.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.base.css":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.layout.css":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.messages.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.base.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.modules.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.settings.css":1,"sites\/all\/themes\/daisy\/color\/colors.css":1,"sites\/all\/themes\/daisy\/css\/daisy.css":1,"sites\/all\/themes\/daisy\/css\/lightwindow.css":1,"public:\/\/at_css\/daisy.responsive.layout.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.slideshow.css":1,"http:\/\/fonts.googleapis.com\/css?family=Open+Sans":1,"sites\/all\/themes\/at-commerce\/css\/ie-6.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-lte-7.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-8.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-lte-9.css":1,"sites\/all\/themes\/daisy\/css\/ie-8.css":1,"sites\/all\/themes\/daisy\/css\/ie-lte-7.css":1,"sites\/all\/themes\/daisy\/css\/ie-lte-9.css":1}}});</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script type="text/javascript" src="/sites/all/libraries/tabber/tabber-minimized.js">
</script>
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
</head>

<body class="html not-front not-logged-in one-sidebar sidebar-first page-node page-node- page-node-1 page-type-page section-node site-name-hidden color-scheme-default daisy gecko win fs-medium bb-n hl-l mb-dd mma-l ia-c snc-n snw-n  sns-n ssc-n ssw-n  sss-n ptc-n ptw-n pta-l pts-n ntc-n ntw-n nta-l nts-n ctc-n ctw-n cta-l cts-n btc-uc btw-n bta-l bts-n itrc-0 isrc-6 bf-l snf-gwf-open-sans ssf-gwf-open-sans mmf-sss ptf-gwf-open-sans ntf-gwf-open-sans ctf-gwf-open-sans btf-gwf-open-sans hide-ss-nav">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
    <div id="page-wrapper"><div id="page">


  <div id="header-wrapper">

    <div class="container clearfix">
      <header class="clearfix">

        <div id="branding" class="clearfix no-logo site-name-hidden no-slogan">

                      <hgroup class="element-invisible">
                              <h1 id="site-name" class="element-invisible"><a href="/" title="Home page">JSFix</a></h1>
                                        </hgroup>
                  </div>



      </header>
    </div>
  </div>


  <div id="content-wrapper" class="no-secondary"><div class="container">




    <div id="columns"><div class="columns-inner clearfix">
      <div id="content-column"><div class="content-inner">



                <section id="main-content">



          <div id="content">  <div class="region region-content">
    <div id="block-system-main" class="block block-system block-odd block-count-1 block-region-content">
  <div class="block-inner clearfix">
                <div class="block-content content no-title">
      <article id="article-1" class="article article-type-page odd article-full clearfix" about="/node/1" typeof="foaf:Document" role="article">
  <div class="article-inner clearfix">


              <header class="clearfix">


                  <h1 property="dc:title" datatype="" class="article-title">
                          Test Page                      </h1>


      </header>

    <div class="article-content clearfix">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden view-mode-full"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="tabber">
<div class="tabbertab">
<h3>Overview</h3>
<p><br /></p>
<p>Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
</div>
<div class="tabbertab">
<h3>Specifications</h3>
<p>
Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
<p>Biltong kielbasa spare ribs pork fatback. Short loin shankle bresaola short ribs chuck. Spare ribs pig prosciutto tongue capicola, ribeye shoulder turducken sausage hamburger t-bone bresaola meatloaf brisket. Filet mignon shank rump tri-tip swine, shankle bresaola. Beef chuck swine ham hock flank corned beef pork chop spare ribs capicola turducken shankle bresaola t-bone tenderloin pig. Ground round strip steak flank, chuck shoulder rump beef drumstick tri-tip venison pork belly meatball beef ribs pork loin.</p>
<p>Ham hock sausage short loin ball tip beef ribs ham spare ribs, andouille hamburger beef shoulder. Flank jowl bacon boudin kielbasa, chicken rump pork ribeye turkey andouille pork belly. Prosciutto biltong beef ribs, t-bone short ribs pancetta salami rump spare ribs ham hock kielbasa meatloaf. Shoulder tongue tri-tip capicola shank, chicken cow ham hock hamburger ribeye meatloaf. Beef ribs hamburger turkey t-bone leberkas pork loin. Shoulder capicola brisket, ground round andouille pastrami kielbasa ham hock t-bone hamburger boudin pork loin pork belly.</p>
<p>Meatloaf salami fatback pork chop shankle. Sausage meatball ground round rump prosciutto. Jerky pork belly bresaola tenderloin tail spare ribs pig, chicken ribeye pork chop pork turducken pastrami pancetta. Pancetta chuck prosciutto venison bacon fatback. Jowl turducken leberkas ham turkey. Pork belly fatback ball tip tenderloin andouille ham hock swine jowl rump pork chop tongue pancetta frankfurter ground round.</p>
<p>Hamburger pork belly sirloin fatback beef shank chicken leberkas pig sausage. Jowl ground round bacon tail sausage sirloin. Brisket ham hock drumstick ground round tenderloin chuck pork chop, pancetta swine shankle ball tip. Turkey swine pig beef ribs. Pork belly jerky pork flank, frankfurter ground round pork loin chicken.
</p></div>
<div class="tabbertab">
<h3>Downloads</h3>
<p>Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
<p>Biltong kielbasa spare ribs pork fatback. Short loin shankle bresaola short ribs chuck. Spare ribs pig prosciutto tongue capicola, ribeye shoulder turducken sausage hamburger t-bone bresaola meatloaf brisket. Filet mignon shank rump tri-tip swine, shankle bresaola. Beef chuck swine ham hock flank corned beef pork chop spare ribs capicola turducken shankle bresaola t-bone tenderloin pig. Ground round strip steak flank, chuck shoulder rump beef drumstick tri-tip venison pork belly meatball beef ribs pork loin.</p>
<p>Ham hock sausage short loin ball tip beef ribs ham spare ribs, andouille hamburger beef shoulder. Flank jowl bacon boudin kielbasa, chicken rump pork ribeye turkey andouille pork belly. Prosciutto biltong beef ribs, t-bone short ribs pancetta salami rump spare ribs ham hock kielbasa meatloaf. Shoulder tongue tri-tip capicola shank, chicken cow ham hock hamburger ribeye meatloaf. Beef ribs hamburger turkey t-bone leberkas pork loin. Shoulder capicola brisket, ground round andouille pastrami kielbasa ham hock t-bone hamburger boudin pork loin pork belly.</p>
</div>
</div>
</div></div></div>    </div>




  </div>
</article>
    </div>
  </div>
</div>
  </div>
</div>

        </section>


      </div></div>

        <div class="region region-sidebar-first sidebar">
    <section id="block-user-login" class="block block-user block-odd block-count-2 block-region-sidebar-first">
  <div class="block-inner clearfix">
              <h2 class="block-title">User login</h2>
            <div class="block-content content">
      <form action="/node/1?destination=node/1" method="post" id="user-login-form" accept-charset="UTF-8"><div><div class="form-item form-type-textfield form-item-name">
  <label for="edit-name">Username <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" id="edit-name" name="name" value="" size="15" maxlength="60" class="form-text required" />
</div>
<div class="form-item form-type-password form-item-pass">
  <label for="edit-pass">Password <span class="form-required" title="This field is required.">*</span></label>
 <input type="password" id="edit-pass" name="pass" size="15" maxlength="60" class="form-text required" />
</div>
<div class="item-list"><ul><li class="even first"><a href="/user/register" title="Create a new user account.">Create new account</a></li><li class="odd last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li></ul></div><input type="hidden" name="form_build_id" value="form-2JWfMgxjlSDsKHLtwuQhcdA4TzwjjNyIydl0i8x1oTM" />
<input type="hidden" name="form_id" value="user_login_block" />
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Log in" class="form-submit" /></div></div></form>    </div>
  </div>
</section>
  </div>

    </div></div>


  </div></div>


  <div id="page-footer">

          <div id="footer-wrapper"><div class="container clearfix">
        <footer class="clearfix">
            <div class="region region-footer">
    <div id="block-system-powered-by" class="block block-system block-odd block-count-3 block-region-footer">
  <div class="block-inner clearfix">
                <div class="block-content content no-title">
      <span>Powered by <a href="http://drupal.org">Drupal</a></span>    </div>
  </div>
</div>
  </div>
        </footer>
     </div></div>
      </div>

</div></div>
  </body>
</html>

Update 2

Forgot to mention that any window resizing, be it height or width, automatically fixes the issue momentarily.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-09T22:42:24+00:00

Looks like a few things are going on here.. First off somewhere in css you have a ‘scroll’ or ‘auto’ property set that’s allowing page height to change. Second, the vid with the footer doesn’t have a set width and height set from what it looks like.. Instead it’s just filling in whatever space the center div with text isn’t filling.. So likely that doesn’t have a defined height either. I’d suggest also making sure the bottom footer is set to ‘bottom:0px’
-Provide some css and html code for us to help more?

Add this code to footer.clearfix:

    margin-bottom: 0px;
    height: 30px;

And inside of the content-wrapper stick:

    height: 100%;
    overflow: auto;

It’s going to add a scroll bar, but it will make your problem really evident if you do. The issue is you’re DUPLICATING code. Hardcore. That footer is either recreating itself each time you click a tab somewhere, instead of sitting at the bottom hardcoded a single time or else you have a footer inside of ‘footer’ and inside of ‘page’. Thinking it’s the 2nd one… And the one in ‘page’ is causing issues. If you intend to duplicate it and just want the page size standarad, then just add the content-wrapper changes. If the footer is suppose to be a standard size, add the footer.clearfix changes to get an idea of your issue.

Recommending you install Firebug for your browser if you haven’t already.. It will allow you to ‘inspect’ elements and change css to figure out what’s going on faster.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am building a Drupal e-commerce site on which the product pages will have

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply