Белое пространство под футером

unquaker · January 27, 2011

Делал верстку для сайта по способу http://www.cssstickyfooter.com/.

В Webkit, Opera и IE работает чудесно, а вот в ФФ внизу появляется белое пространство (как будто бы есть ограничение на высоту). Чем больше разрешение, тем больше и пространство.

Вот ссылка на скрин:

http://h1813090.stratoserver.net/files/sha...qkWUtoRxNog.jpg

Вот код в html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>       

	<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
	<title>Delhi Darbar - Indian restaraunt </title>

	<!-- put some link to the favicon here -->
	<link rel="shortcut icon" href="http://www.delhidarbar.fi/wp-content/uploads/2011/01/favicon.ico" > 
	<!--css installed -->
    <link rel="stylesheet" type="text/css" href="style.css">  
	<link rel="stylesheet" type="text/css" href="reset.css">  

  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->  
	</head>
<div id="bg">
<div id="wrap">
<div id="space">
</div>
<div id="header">

<img src="logo.png" class="logo" alt="delhidarbar logo">
<div class="flags">
<ul>
<li><a href="#"><img src="fi.gif" alt="fin"></a></li>
<li><a href="#"><img src="se.gif" alt="swe"></a></li>
<li><a href="#"><img src="eng.gif" alt="eng"></a></li>
</ul>
</div>
<div class="nav">
<ul>    
<li><a href="#">Ruokalista</a></li>
<li><a href="#">Lounas</a></li>
<li><a href="#">Menu kahdelle </a></li>
<li><a href="#">Lapsille</a></li>
<li><a href="#">Juomat</a></li>
<li><a href="#">Yhteystiedot</a></li>
</ul>
</div>

</div>
<div id="space">
</div>
	<div id="main">
	<div id="content">
	<div class="description">
	<h1>What stands behind the taste of India</h1>
	<p>Do you want to try real Indian food made with authentic 
recipes in a traditional style in a tandoor oven.</p>
<p>
Our chef has more than ten years of experience working in
India and in other great restaraunts around the world.</p>
<p>
We prepare dishes with Indian passion and respect to food.
Hope to see you in our restaraunt.</p>


	</div>
	<div class="photo">
	<img src="photo.jpg" alt="photo">
	</div>
	<div class="line">
	</div>
	<div class="customers">
	<h2>Our dear customers say</h2>
	<p><span class="hyphen">“</span>Ystavallinen palvelu, hyva tunnelma turun paras 
intialainen ravintola. Chicken tikka masala on 
ehodoton suosikki”.</p>
<p> <span class="hyphen">“</span>Chicken spinach curry oli lounasruokana aivan 
erinomainen”.</p>

	</div>
	<div class="contacts">
	<h2>Contacts</h2>
	<ul>
	<li class="phone">02-233 3988 </li>
	<li class="email"><a href="mailto:ravintola@delhidarbar.fi"> ravintola@delhidarbar.fi</a></li>
    <li class="address"> Hameenkatu 8, Turku</li>
	</ul>
	<div class="hours"> 
	Open hours: <br /> 
Ma-To  10.30-22.00 <br />
         Pe  10.30-23.00<br />
         La  12.00-23.00<br />
         Su  12.00-22.00

	</div>
	</div>

	</div>

</div>

<div id="footer">
<div class="contacts">
Contacts
<ul>
	<li>02-233 3988 </li>
	<li><a href="mailto:ravintola@delhidarbar.fi"> ravintola@delhidarbar.fi</a></li>
    <li> Hameenkatu 8, Turku</li>
	</ul>
</div>
<div class="hours">
Open hours: <br />
Ma-To  10.30-22.00 <br />
         Pe  10.30-23.00<br />
         La  12.00-23.00<br />
         Su  12.00-22.00
</div>
<div class="credits">
<ul><li>Website is crafted with love by <a href="http://idefinland.com">IDÉ Finland</a>. </li>
<li>Photos by <a href="http://www.annatanninen.fi/">Studio Anna Tanninen</a>.</li></ul>
</div>


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

Вот код в css

/*  
Sticky Footer Solution
by Steve Hatcher 
[url="http://stever.ca"]http://stever.ca[/url]
[url="http://www.cssstickyfooter.com"]http://www.cssstickyfooter.com[/url]
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;
font-size: 1em;
font-family: Georgia;


}




#wrap {
min-height: 100%;
/* for aligning div to center */
margin: 0 auto;
width: 1000px; /*for making aligning work */

text-align:left; 
}


#wrap a {
color: #F8E6C2;
text-decoration: underline;
}

#wrap a:hover {
text-decoration: none;
}

#wrap li {
line-height: 18pt;
list-style-type: none;
}

#footer .contacts li {
line-height: 14pt;
}

#bg {
background-image: url('bg.png');
background-repeat:repeat;

text-align:center; 
}

/*GENERAL */



/* HEADER */

#header {
height: 100px;
/*works strange. should be 920px IMHO */
width: 950px !important;
width: 920px; 
background-color: #F8E6C2; /* see add image border  later */	
/*shadows for the header */

-moz-box-shadow: 0 2px 7px #333333;

-webkit-box-shadow: 0 2px 7px #333333;

box-shadow: 0 2px 7px #333333;
}



#header .nav {
padding-top: 1.5em;

}

#header .nav li {
padding-right: 0.7em;

}

#header .nav ul {
clear:right;
float:right;
}

#header .nav a {
text-decoration: underline;
color: #6C202D;
/* omit for IE 
border-style:solid;
border-bottom-color: #6C202D;

padding-bottom: 0.2em;
border-bottom-width: thin;
text-decoration: none; */

}

#header .nav a:hover {
border: none;
text-decoration: none;
}

#header .nav a:active {
border-bottom-width: thick;
}

#header img.logo {
margin-top: -0.5em;
float: left;
padding-left: 1em;
}



#header li {
display: inline;
list-style-type: none;
}

#header .flags {

float: right;
padding-top: 0.5em;

}

#header .flags li {
padding-right: 0.7em;
}



#space {
padding-bottom: 0.8em;
}


/* MAIN */

#main {overflow:auto;
	padding-bottom: 150px; /* must be same height as the footer */
	clear:both;

	}  

#content {
padding-top: 2em;
background-color: #6C202D;
color: white;
width: 920px;
padding-left: 2em;
padding-bottom: 2em;
/*shadows for the main content */

-moz-box-shadow: 0 2px 7px #333333;

-webkit-box-shadow: 0 2px 7px #333333;

box-shadow: 0 2px 7px #333333;
}


#content .description h1 {

font-size: 2em;
color: #F8E6C2;
padding-bottom: 0.3em;
font-family: Lucida Bright, Georgia, serif; 
font-weight: 100;

}

#content h2 {
color: #F8E6C2;
font-size: 1.5em;
font-weight: 100;
padding-bottom: 0.3em;
}


#content .description {
float: left;
width: 396px;
padding-right: 2em;

}

#content .description p {
padding-bottom: 1em;
}

#content .photo img {
border-style:solid;
border-width:3px;
border-color: #F8E6C2;

}

#content .photo  {
padding-bottom: 2em;


}

#content .line {
clear:both;
/*horizontal line */
border-top: solid 1px #996666; 
width: 95%;
padding-bottom: 1em;

}

#content .customers {
clear: left;
float: left;
width: 396px;
padding-right: 2em;
height: 210px;
}

#content .customers  p {
padding-bottom: 0.5em;

}

#content .contacts {
/*width: auto; */

}
#content .hours {
padding-top: 0.5em;


}


#content .contacts li {
list-style-position: inside;


}

/*possible solution for list problem is images with some small padding */


#content .contacts li.phone {
list-style-image:url('phone.png');
vertical-align: center;
}

#content .contacts li.email {
list-style-image:url('email.png');

vertical-align: center;
}

#content .contacts li.address {
list-style-image:url('address.png');
vertical-align: center;
}



.hyphen {
color: #F8E6C2;
font-size: 2em;
padding-right: 0.1em;
}

/* FOOTER */

#footer {position: relative;
	margin-top: -135px; /* negative value of footer height */
	height: 135px;
	clear:both;
	background-color: #6C202D;
	padding-left: 2em;

	padding-top: 1em;
color: white;
width: 920px;
-moz-box-shadow: 0 2px 7px #333333;

-webkit-box-shadow: 0 2px 7px #333333;

box-shadow: 0 2px 7px #333333;


	} 

#footer .contacts, #footer .hours {
float: left;
width: 30%;
height: 100px;}

#footer .credits {
padding-right: 2em;
}

#footer li {
list-style-type: none;

}




/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/

Подскажите, как от этого избавиться, пожалуйста.

Sign In

Белое пространство под футером

Question

unquaker

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information