Problems with IE7 and sticky footer

Discussion in 'CSS' started by nirali35, Jun 6, 2009.

0
  1. #1
    Hey guys,

    I am currently working on a website which requires to have 100% div height for the content area and a footer which should always remain in the bottom of the page.

    I have managed to make it work in FF and IE8. But the footer doesn't gets pushed in IE7.

    It would be really appreciating if you can point me into the right direction! :)

    For your reference, here is both HTML and CSS

    
<!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>My Website</title>
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/style-ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="styles/style-ie7.css" />
<![endif]-->
</head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
  <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxM2Rkkv3gneatRTlsOf1FLPwy004XiFA=" />
  </div>
  <div>
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAK0mLaHAgLsjrSEAgKVjIu5AwLzhKTWCvyGh9OABZI/c8xQSF4nOUMqd0Fe" />
  </div>
  <div id="header">
    <div id="header-content">
      <div id="head">
        <div id="head-content">
          <div id="logo">
            <h1 class="hidden">My Website</h1>
          </div>
          <div id="slogan">
            <h2>My Slogan</h2>
          </div>
          <div id="gs">
            <div>
              <input type="hidden" name="ctl00$GSOption" id="ctl00_GSOption" />
              <div class="gs-options">
                <input type="radio" class="styled" value="web" 
                    checked="checked" name="GSOption" />
                <label>Web</label>
              </div>
              <div class="gs-options">
                <input type="radio" class="styled" value="site" 
                    name="GSOption" />
                <label>Site</label>
              </div>
            </div>
            <div id="gs-field">
              <input name="ctl00$GSKeywoard" type="text" id="ctl00_GSKeywoard" class="gs-input" />
              <input type="submit" name="ctl00$GSSearch" value="Go" id="ctl00_GSSearch" class="gs-button" />
            </div>
            <div>
              <div id="gs-footer"><span id="gs-poweredby">Powered by</span><span id="gs-cc">Google</span></div>
            </div>
          </div>
        </div>
      </div>
      <div id="navigation"></div>
    </div>
  </div>
  <div id="content-wrap">
    <div id="content">
      <h1>Welcome</h1>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>
  </div>
  <div id="footer"></div>
</form>
</body>
</html>
    HTML:
    reset.css
    
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body 
{
	background-image:url('images/background.png');
	font-family:Calibri, Arial;
	font-size:14px;
	height:100%;
	line-height: 1;
}
html{
	height:100%;
}
form
{
	height:100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 1;
}

ins 
{
	background-color:Yellow;
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
    Code (markup):
    style.css
    
.gs-button
{
	cursor:pointer;
	background:transparent;
	background-image:url('images/gs-button-bg.png');
	background-repeat:no-repeat;
	border:none;
	color:#333;
	font-size:12px;
	font-weight:bold;
	height:24px;
	left:-3px;
	letter-spacing:1px;
	position:relative;
	top:6px;
	width:30px;
}

.gs-input
{
	background:transparent;
	background-image:url('images/gs-input-bg.png');
	background-repeat:no-repeat;
	border:none;
	height:24px;
	padding:4px;
	position:relative;
	top:4px;
	width:141px;
}

.gs-options
{
	float:right;
	margin-left:5px;
	position:relative;
	top:15px;
	width:auto;
}

.gs-options label
{
	position:relative;
	top:-5px;
}

.hidden
{
	display:none;
}

.styled{}

#content
{
	background-image:url('images/content-bg.png');
	background-repeat:repeat-y;
	display:table-cell;
	min-height:100%;
	padding:10px 15px 15px 15px;
	width:965px;
}

#content-wrap
{
	background-image:url('images/content-bg-top.png');
	background-repeat:no-repeat;
	display:table;
	height:63.79%;
	margin:15px auto 0 auto;
	padding-top:5px;
	width:995px;
}

#footer
{
	background-color:#333;
	height:45px;
}

#head
{
	height:115px;
}

#head-content
{
	position:relative;
	top:18px;
}

#head-content div
{
	line-height:85px;
}

#header
{
	height:150px;
}

#header-content
{
	height:100%;
	margin:0 auto;
	width:995px;
}

#gs
{
	color:#ccc;
	height:85px;
	float:right;
	font-size:13px;
	width:245px;
}

#gs-cc
{
	font-family:Times New Roman;
}

#gs div{
	line-height:31.5px;
	min-height:31.5px;
	text-align:right;
}

#gs-field
{
	line-height:24px;
	min-height:24px;
}

#gs-footer
{
	position:relative;
	top:-5px;
}

#gs-poweredby
{
	color:#999;
	font-family:Arial;
	font-size:10px;
}

#gs span
{
	padding-right:4px;
}

#logo
{
	background-image:url('images/logo.png');
	background-repeat:no-repeat;
	height:85px;
	float:left;
	width:245px;
}

#navigation
{
	background-image:url('images/navigation-bg.png');
	height:35px;
}

#slogan
{
	height:85px;
	float:left;
	width:505px;
}

#slogan h2
{
	color:#ccc;
	font-size:28px;
	font-style:italic;
	font-weight:bold;
	margin-left:4px;
}
    Code (markup):
    style-ie.css
    
.gs-button{
	top:4px;
}

#content-wrap
{
	height:62.18%;
}
    Code (markup):
    style-ie7.css
    
.gs-button{
	top:-4px;
}

#content-wrap
{
	height:66.06%;
}
    Code (markup):
    Once again, I really thank you for trying to help me out. Really appreciate you guys :)
     
    nirali35, Jun 6, 2009 IP
  2. Big0ne

    Big0ne Well-Known Member

    Messages:
    2,614
    Likes Received:
    81
    Best Answers:
    0
    Trophy Points:
    165
    #2
    Big0ne, Jun 6, 2009 IP
  3. nirali35

    nirali35 Peon

    Messages:
    199
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes, I have tried that.

    But as suggested by cssstickyfooter.com, if I use the following CSS, my 100% height for content div breaks since in order to achieve that, "height" attribute of all parent elements must be set to some value than auto in CSS.

    Btw, I am not a CSS guru. So please correct me on this one if I am wrong!

    body > #wrap {height: auto; min-height: 100%;}
    Code (markup):
     
    nirali35, Jun 6, 2009 IP