|
Firefox - Footer Gap problems!!
Hi,
Well heres one you never hear about (not!!)
Im getting a large gap between footer and the bottom of screen in Firefox, IE working ok (for a change!!)
tried the usual...display block, 0 padding/margins etc..got me a little stumped!!
heres the xhtml and css ...
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silverspoon Films - Corporate Video for Promotion and Advertising</title>
<meta name="description" content="Corporate video for promotion and advertising, recruitment and training, education and information, conference and event." />
<meta name="keywords" content="corporate video, corporate video production, promotion and advertising, film production company, film production companies, video production, corporate video production, video production company, video production companies" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="Author" content="silverspoon films" />
<meta name="language" content="English" />
<meta name="Distribution" content="Global" />
<meta name="copyright" content="2008 silverspoon films" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/css/style-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/style-print.css" type="text/css" media="print" />
<link rel="stylesheet" href="assets/css/style-mobile.css" type="text/css" media="handheld" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/IE7-SPECIFIC.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="assets/css/IE6-SPECIFIC.css" />
<![endif]-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="Scripts/showHideDiv.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="assets/images/silverspoon-logo.png" title="Silverspoon Films - Call Free on 0800 520 0946" class="silverspoonLogo" alt="Silverspoon Films - Call Free on 0800 520 0946" />
<ul id="nav">
<li id="navHome"><a href="index.php" class="active" accesskey="H" tabindex="1" title="Silverspoon Films homepage [Access Key H]">Home</a></li>
<li id="navPortfolio"><a href="portfolio.php" accesskey="P" tabindex="2" title="Our work [Access Key P]">Portfolio</a></li>
<li id="navFaq"><a href="faq.php" accesskey="Q" tabindex="3" title="Your questions answered [Access Key Q]">Faq</a></li>
<li id="navContact"><a href="contact-us.php" accesskey="C" tabindex="4" title="Contact us [Access Key C]">Contact Us</a></li>
</ul>
<a href="client-login.php" accesskey="L" tabindex="5"><img src="assets/images/tickets.png" title="Login to client area [Access Key L]" class="tickets" alt="Client Login Area" /></a>
</div><!--end of header div-->
<div id="mainContainer">
<div id="leftContent">
<h1><img src="assets/images/index-heading.gif" alt="Welcome to Silverspoon Films" /></h1>
<p><strong>Corporate video for promotion and advertising, recruitment and training, education and information, conference and event.</strong></p>
<p>There is no better way of communicating a message than through the medium of video, and these days customers expect to see video on your website, or as part of an effective presentation.</p>
<p><strong>Silverspoon Films</strong> produce unique videos tailored for businesses and organizations that understand the power and value of the visual medium. Click on our showreel button then visit our <a href="portfolio.php" title="View our work">portfolio</a> page for some finished examples.</p>
<p><strong>Silverspoon Films</strong> is dedicated to providing you with a personal and professional service to help you achieve your business objectives. From simple single-operator to multi-camera shoots, we have the experience and creativity to produce the video you require whilst working within your budget.</p>
<a href="#" tabindex="10" onclick="toglayer('leftContent2');return false;"><img src="assets/images/readmore-icon.gif" title="Click here to read more" class="contentLinks" alt="read more button" /></a>
</div><!--end of leftContent div-->
<div id="leftContent2">
<img src="assets/images/index-heading.gif" alt="Welcome to Silverspoon Films" />
<p>We offer a script to screen service, with as much or as little involvement from you as you wish and we offer previews of material at key stages of production in our personalised client area. It's here that you and your team will see different versions of your video as it progresses from a rough cut, to a finished masterpiece! Take a trip to our client login area to see how we look after our clients throughout the whole creative process.</p>
<p>Our previous clients include the Welsh Assembly Government, Clayton Engineering Limited, The Low Carbon Partnership and the Institute of Welsh Affairs; you can read some testimonials below. The business-needs for our video commissions have been varied and include: promotional videos, recruitment drives, educational and informative films. Whatever your business video requirements are, you can call us <strong>FREE on 0800 520 0946</strong> for a chat to find out how we can help you achieve your goals.</p>
<a href="#" tabindex="11" onclick="toglayer('leftContent');return false;"><img src="assets/images/previous-icon.gif" title="Click here to go back" class="contentLinks" alt="previous page button" /></a>
<a href="#" tabindex="12" onclick="toglayer('leftContent3');return false;"><img src="assets/images/readmore-icon.gif" title="Click here to read more" class="contentLinks" alt="read more button" /></a>
</div><!--end of leftContent2 div-->
<div id="leftContent3">
<img src="assets/images/index-heading.gif" alt="Welcome to Silverspoon Films" />
<p>We work in English and Welsh, and have a network of translators and voice over artists, helping us produce videos in any other language. All video material is shot to broadcast standards and third party copyrighted material supplied by us (music for instance), is fully licensed for your needs.</p>
<p><strong>Silverspoon Films</strong> operates a Health and Safety policy (available on request), we have full PLI insurance, Richard is CRB checked to work with children and vulnerable adults, we have first-aid certificates and immunization to work in most parts of the World.... <strong>The Bahamas would be nice!</strong></p>
<a href="#" tabindex="13" onclick="toglayer('leftContent2');return false;"><img src="assets/images/previous-icon.gif" title="Click here to go back" class="contentLinks"alt="previous page button" /></a>
</div><!--end of leftContent3 div-->
<div id="rightContent">
<a href="showreel.php"><img src="assets/images/projector.jpg" alt="Click here to View our Latest Showreel" width="296" height="302" class="projector" /></a></div>
<!--end of rightContent div-->
</div><!--end of mainContainer div-->
<div id="footer">
<div id="lampPost">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','160','height','310','src','assets/flash/lamp','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','assets/flash/lamp' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="160" height="310">
<param name="movie" value="assets/flash/lamp.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="assets/flash/lamp.swf" width="160" height="310" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</div><!--end of lampPost div-->
<ul id="billboardHomeNav">
<li><a href="meet-the-team.php" accesskey="T" tabindex="6" title="Meet the Silverspoon team [Access Key T]">MEET THE TEAM</a></li>
<li><a href="latest-news.php" accesskey="N" tabindex="7" title="View the latest news [Access Key N]">LATEST NEWS</a></li>
<li><a href="our-facilities.php" accesskey="F" tabindex="8" title="Take a look at our facilities [Access Key F]">OUR FACILITIES</a></li>
<li><a href="links.php" accesskey="K" tabindex="9" title="Associated links [Access Key K]">LINKS</a></li>
</ul>
</div><!--end of footer div-->
</div><!--end of wrapper div-->
</body>
</html>
- Code: Select all
/* ----- Layout / Structure (screen) ----- */
* {
margin : 0;
padding : 0;
}
body {
background: #ccc url(../images/dusk-background.jpg) no-repeat;
height: 100%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#wrapper {
width : 1000px;
text-align: left;
margin: 17px auto 0 auto;
}
#header {
background-image: url(../images/header.png);
height: 123px;
}
#header img {
display: block;
}
#mainContainer {
float: left;
width: 1000px;
height: 355px;
background: url(../images/content.png) no-repeat;
}
#leftContent {
float: left;
width: 400px;
height: 340px;
padding: 0 20px 0 85px;
}
#leftContent2 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#leftContent3 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#leftContent4 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#leftContent5 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#leftContent6 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#leftContent7 {
display: none;
float: left;
width: 400px;
height: 340px;
padding: 0px 20px 0 85px;
}
#rightContent {
float: right;
width: 400px;
height: 340px;
padding: 10px 60px 0 30px;
}
#rightContent2 {
display: none;
float: right;
width: 400px;
height: 340px;
padding: 100px 65px 0 30px;
}
#rightContent3 {
display: none;
float: right;
width: 400px;
height: 340px;
padding: 100px 65px 0 30px;
}
#lampPost {
float: left;
width: 160px;
height: 310px;
padding-top: 52px;
}
#footer {
clear: both;
height: 362px;
background: url(../images/footer.png);
}
#footer #right {
color: #fff;
float: right;
padding: 340px 0 0 0;
}
#footerAlternate {
clear: both;
height: 362px;
background: url(../images/footer-alternate.png);
}
.silverspoonLogo {
float: left;
margin: 2px 0 0 0;
border: none;
}
.tickets {
float: right;
margin: -92px 12px 0 0;
border: none;
}
.projector {
border: none;
}
.polaroid {
float: right;
width: 281px;
height: 303px;
padding-right: 90px;
}
.contentLinks {
text-decoration: none;
margin-left: 0;
padding: 0 11px 0 11px;
border: none;
}
#flashplayer {
padding-top: 35px;
padding-right: 20px;
}
/* ----- Navigation ----- */
#nav {
float: right;
margin-right: 200px;
margin-top: 27px;
padding: 0;
height: 58px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 58px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:58px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -58px;
}
#nav a.active {
background-position: 0 -116px;
}
#navHome a {
width: 117px;
background: url(../images/home.gif) top left no-repeat;
}
#navPortfolio a {
width: 144px;
background: url(../images/portfolio.gif) top left no-repeat;
}
#navFaq a {
width: 111px;
background: url(../images/faq.gif) top left no-repeat;
}
#navContact a {
width: 132px;
background: url(../images/contact.gif) top left no-repeat;
}
/* ----- Billboard Navigation ----- */
#billboardHomeNav {
float: left;
width: 530px;
margin-left: 85px;
margin-top: 82px;
display: inline;
overflow: hidden;
}
#billboardPortfolioNav {
float: left;
width: 450px;
margin-left: 120px;
margin-top: 63px;
font-size: .9em;
display: inline;
overflow: hidden;
}
#billboardHomeNav ul, #billboardPortfolioNav ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
#billboardHomeNav li, #billboardPortfolioNav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#billboardHomeNav a {
float: left;
padding: 5px 10px 5px 10px;
font-weight: bolder;
text-decoration: none;
color: #58522d;
}
#billboardPortfolioNav a {
float: left;
padding: 5px 10px 5px 10px;
font-weight: bolder;
text-decoration: none;
color: #58522d;
}
#billboardHomeNav a:hover, #billboardPortfolioNav a:hover {
color: #58522d;
background-color: #e5dca1;
}
#billboardHomeNav a.active, #billboardPortfolioNav a.active {
color: #58522d;
background-color: #aa9f58;
}
#billboardFaq {
float: left;
width: 530px;
font-size: .7em;
margin-left: 120px;
margin-top: 18px;
overflow: hidden;
}
#billboardFaq ul {
margin: 0;
padding: 0;
list-style: none;
}
#billboardFaq li {
margin: 0;
padding: 0 0 8px 0;
list-style: none;
}
#billboardFaq a {
padding: 5px 10px 5px 10px;
font-weight: bolder;
text-decoration: none;
color: #58522d;
}
#latestNews li {
padding: 5px 10px 5px 10px;
list-style: none;
}
/* ----- Form ----- */
fieldset {
margin: 5px 30px 0 0;
padding-top: 20px;
}
legend {
margin-left: 10px;
color: #003;
font-size: .6em;
font-weight: bold;
}
fieldset ol {
padding: 5px 5px 0 5px;
list-style: none;
}
fieldset li {
padding-bottom: 5px;
}
fieldset.submit {
border-style: none;
float: none;
width: auto;
border: 0 none #fff;
padding: 0 0 20px 147px;
}
fieldset.login {
border-style: none;
float: none;
width: auto;
border: 0 none #fff;
padding: 0 0 20px 228px;
}
label {
display: block;
float: left;
width: 100px;
font-size: .6em;
margin-right: 15px;
text-align: right;
}
input {
border: 1px solid #036;
}
textarea {
font: small Arial, Geneva, Verdana, sans-serif;
border: 1px solid #036;
margin-top: 3px;
margin-left: 10px;
}
.submit input {
margin-left: 114px;
}
/* ----- Typography ----- */
h1 {
padding: 0 0 0 0;
}
h2 {
font-size: .8em;
color: #58522d;
padding: 5px 0 0 10px;
}
h3 {
font-size: .7em;
font-weight: bold;
color: #58522d;
padding: 0 0 10px 10px;
}
a {
color: #58522d;
}
p {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #333;
font-size: .7em;
padding: 5px 15px 5px 10px;
}
#teamListing li {
list-style: none;
font-size: .7em;
padding: 0 0 5px 10px;
}
p.fbLogo {
padding: 2px 0 0 7px;
}
p.pixelLogo {
padding: 50px 20px 5px 10px;
}
p.a2bLogo {
padding: 5px 20px 0 10px;
}
p.lifestoryLogo {
padding: 7px 10px 5px 10px;
}
#telNo {
float: left;
margin-left: 195px;
margin-top: 81px;
font-size: 1.5em;
color: #58522d;
font-weight: bold;
}
|
Firefox - Footer Gap problems!!
Jul 16th, 2008, 10:16
Similar Threads
