white space

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Dominic Brown 91 posts 111 karma points

Jul 28, 2011 @ 09:52

0

White Space

Questions about runway and modules

Hi,

Not even sure if its anything to do with Umbraco but i'm kinda not getting anywhere with this issue!!

I have a big white space in between my content and footer and i cannot seem to get rid of it. I've used firebug and inspected the elements but the space does not appear in any of them.

I just wonder if there is something i have done in Umbraco that is causing this issue? Any help would be great, thanks.

Here is my CSS:

@charset "utf-8";

/* Body / Background */
body {
  background-color: #FFF;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #000;
  font-family: Arial, Helvetica, 'Helvetica Neue', Verdana, sans-serif;
  padding: 0px;
  margin: 0px;
}

/* Font */
h1, h2, h3, h4{
  font-family: 'Droid Sans', arial, serif;
}

/* Primary COLOR */
.newsbox .feedList h4 a,
#sitedescription h1,
a
{
  color: #ec008c;
}
/* Primary BACKGROUND */
.primary-bgcolor,
a.ui-btn-big,
.newsbox .feedList h4 a:hover,
#slider #imageSliderNav a.activeSlide
{
  background-color: #B8E62E;
  position:relative;
  left:37px;
  bottom:3px;
}

/* Secondary COLOR */
/* Secondary BACKGROUND */
#header #mainmenu ul,
#header #mainmenu ul li
{
  background:inherit;
}

#mainWrapper {
  background:url(/images/bk_main_wrapper_home.png) 0 0 repeat-x;

}

#wrapper {
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width:960px;

}

a.ui-btn-big {
  background-image: url(/images/ui-btn-big-arrow.png);
  background-position: right center;
  background-repeat: no-repeat;
  color: white !important;
  display: inline-block;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  line-height: 14px;
  padding: 12px 50px 12px 19px;
  text-decoration: none;
}

a {
  outline: none;
}

#page {
  width:950px;
  margin:0px auto;
  text-align:left;
  padding:15px;
  padding-bottom: 0px;
  background:inherit;
}

/* Header */

#header {
  height:200px;
  background:inherit;

}
  #header a,#header a img{
  border: none;

  }

#header p {
  color:#FFF;
}

#headercontact{
  position:relative;
  right:10px;
  bottom:60px;
  text-align: right;
  }

#headerlogin{
  position:relative;
  right:20px;
  bottom:200px;
  text-align: right;
  }

#mainmenu{
  margin: 0px;
  padding: 0px;
  }

#mainmenu ul{
  width: 980px;
  float: left;
  padding: 0px;
  margin-left: -15px;
  position:relative;
  bottom:85px;
  }
#mainmenu ul li{
  list-style: none;
  background-position: right bottom;
  background-repeat: no-repeat;
  float: left;
  font-size: 14px;
  }
#mainmenu ul li a{
  padding: 15px 20px;
  display: block;
  color: #fff;
  text-decoration: none;
  margin-bottom: -13px;
  padding-bottom: 28px;
  }

#mainmenu ul li.current{
background-color: #a9a4a3;
  }

  #mainmenu ul li.home a{
  padding-left: 35px;
  }



  #mainmenu ul li:hover{
  color: #FFF;
  text-decoration: none;
  background-color: #a9a4a3;
  }


/* Image Slider */

#slider {
  overflow: hidden;
  width: 100%;
  height:326px;
  clear: both;
  position:relative;
  bottom:70px;
background:#000;
}
  #slider #imageSlider{
  padding: 0px;
  width: 100%;
  position:relative;
  bottom:76px;
  right:20px;

  }
  #slider .imageSlide{
  padding: 0px;
  width: 100%;
  }
  #slider .imageSliderInfo{
  width: 960px;
  height:35px;
  background-color:#12124E;
  position:relative;
  top:344px;
  left:20px;
  padding-left:10px;
  }
  #slider .imageSliderInfo h2{
  color: #FFF;
  font-size: 24px;
  padding-top:3px;
  }
  #slider .imageSliderInfo p{
  font-size: 18px;
  position:relative;
  bottom:49px;
  left:740px;


  }

  #slider .imageSliderImage{
  float: left;
  padding: 17px;
  padding-bottom: 27px;
  }
  #slider .imageSliderImage img{
  border: 0px #FFF solid;
  }
  #slider #imageSliderNav{
  float: left;
  overflow: auto;
  text-align: center;
  width: 540px;
  }
  #slider #imageSliderNav a{
  background-image: url(/images/imageSliderNav.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #12124E;
  text-indent: -9000px;
  display: inline-block;
  height: 20px;
  width: 20px;
  }
  #slider #imageSliderNav a.activeSlide{

  }

/* Content */

#content {
  padding: 0px;
  margin-top: 15px;
  min-height: 200px;

}

#content p {
  font-size:14px;
}

#content h3 {
  font-size:15px;
}

  #contenttop {
  width: 600px;
  height:180px;
  padding: 0px;
  position:relative;
  bottom:50px;
  }

#contenttopheader {
  position:relative;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:15px;
  background-color:#12124E;
  color:#FFF;
}

#contenttopleft {
  position:relative;
  bottom:15px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#FFF));
  background: -moz-linear-gradient(top,  #ccc,  #FFF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#FFFFFF');
}
#contenttopicon1 {
  position:relative;
  top:15px;
  padding-left:5px;
}

#contenttop1 {
  position:relative;
  left:70px;
  bottom:60px;
  width:200px;
  padding-left:10px;
}

#contenttopright {
  position:relative;
  left:300px;
  bottom:172px;
}

#contenttopicon2 {
  position:relative;
  top:22px;
}

#contenttop2 {
  position:relative;
  left:70px;
  bottom:50px;
  width:200px;
  padding-left:10px;

}

  #contentbottommain {
  width: 600px;
position:relative;
  bottom:50px;
  }

#contentbottomheader{
  position:relative;
  color:#12124E;
}

#contentbottom {
  position:relative;
}





/* Hotspots */

  #hotspots{
  width: 300px;
  position:relative;
  bottom:403px;
  float:right;
  }

#hotspots p {
  font-size:14px;
}

#hotspots h4 {
  font-size:15px;
}

#hotspottopheader {
  position:relative;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:10px;
  background-color:#12124E;
  color:#FFF;
}

#hotspottop {
  position:relative;
  bottom:15px;
  padding-left:10px;
  padding-top:2px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#FFF));
  background: -moz-linear-gradient(top,  #ccc,  #FFF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#FFFFFF');
}

#hotspotbottomheader {
  position:relative;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:15px;
  background-color:#12124E;
  color:#FFF;
}

#hotspotbottom {
  position:relative;
  bottom:15px;
  padding-top:5px;
  padding-left:25px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#FFF));
  background: -moz-linear-gradient(top,  #ccc,  #FFF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#FFFFFF');
}


/* Footer */

#footer {
  clear: both;
  height:auto;
  font-size: 12px;
  overflow: hidden;
  position:relative;
}

#footerwrap {
  clear: both;
  height:auto;
  font-size: 12px;
  background-color:#ccc;
  background-repeat:repeat-x;
  overflow: hidden;
  position:relative;
}

#footercontent {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  width: 960px;
  height:180px;
  background-color:#ccc;
}

  #footer a{
  font-size: 12px;
  text-decoration: none;
  color:#12124E;
  }
  #footer a:hover{
  color: #B8E62E;
  }
  #footer h4{
  font-size: 16px;
  margin-top: 0px;
  }
#footernav{
  width: auto;
  float: left;
  position:relative;
  bottom:12px;
  margin-right: 15px;
  height: 100px;
  width:110px;
  color:#12124E;

  }
#footernav h4{
  font-size: 16px;
  margin-top: 0px;
  }
#footernav ul{
  list-style: none;
  padding: 0px;
  margin: 0px;
  }
#footernav ul li{
  list-style: none;
  padding: 0px;
  margin-bottom: 3px;
  }

#footernav a {
  font-size: 14px;
}

#footercontact{
  position:relative;
  left:50px;
  bottom:10px;
  float:left;
  width: auto;
  margin-bottom: 15px;
  margin-right: 15px;
  height: 150px;
  color:#12124E;
  }

  #footercontact a{
  font-size: 12px;
  text-decoration: none;
  color:#B8E62E;
  }
#footershare{
  width: 160px;
  position:relative;
  left:70px;
  bottom:10px;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
  height: 150px;
  }

#footershare h4 {
  color:#12124E;
}
#footershare ul{
  list-style: none;
  padding: 0px;
  margin: 0px;
  }
#footershare ul li{
  list-style: none;
  padding: 0px;
  margin-bottom: 3px;
  }
#footershare a{

  }
#footershare a img{
  vertical-align: middle;
  filter:alpha(opacity=25);
  -moz-opacity:0.25;
  -khtml-opacity: 0.25;
  opacity: 0.25;
  margin-right: 10px;
  border: none;
  }
#footershare a:hover img{
  vertical-align: middle;
  filter:alpha(opacity=100);
  -moz-opacity:1;
  -khtml-opacity: 1;
  opacity: 1;
}

#footercopyright {
  position:relative;
  top:140px;
  left:180px;
  color:#12124E;
}

/*  COLOR!  */

.whitebox {
  background-color: #dee4e4;
  height: 150px;
}

and here is the ouput HTML:

<!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 id="ContentPlaceHolderDefault_head">

<body class="t" style="">

<div id="mainWrapper">

<div id="wrapper">

<div id="page">

<div id="header">

<div id="headerlogo">

<p>

<img width="398" height="82" alt="F&W Logo" src="/media/268/f_w_logo.png">

</p>

</div>

<div id="headercontact">

<p>

01422 400410

<br>

01422 400411

<br>

[email protected]

</p>

</div>

<div id="headerlogin">

<p>Log In</p>

</div>

<div id="mainmenu">

<ul id="topNavigation">

<li class="home current">

<a href="/">Home</a>

</li>

<li>

<a class="navigation" href="/company-news.aspx">

<span>Company News</span>

</a>

</li>

<li>

<a class="navigation" href="/company-blog.aspx">

<span>Company Blog</span>

</a>

</li>

<li>

<a class="navigation" href="/about.aspx">

<span>About</span>

</a>

</li>

<li>

<a class="navigation" href="/contact-us.aspx">

<span>Contact us</span>

</a>

</li>

</ul>

</div>

</div>

<div id="slider">

<div id="imageSlider" style="width: 950px; height: 404px;">

<div class="imageSlide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 0.976765; width: 950px; height: 404px;">

<div class="imageSliderInfo">

<h2>Audit & Compliance</h2>

<p>

<a class="ui-btn ui-btn-big" href="#">More Info...</a>

</p>

</div>

<div class="imageSliderImage">

<img width="960" height="300" src="/media/683/test_1.jpg">

</div>

</div>

<div class="imageSlide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 0.0235411; width: 950px; height: 404px;">

<div class="imageSliderInfo">

<h2>Advice & Consultancy</h2>

<p>

<a class="ui-btn ui-btn-big" href="#">More Info...</a>

</p>

</div>

<div class="imageSliderImage">

<img width="960" height="300" src="/media/680/test_2.jpg">

</div>

</div>

<div class="imageSlide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 950px; height: 404px;">

<div class="imageSliderInfo">

<h2>Secure By Design</h2>

<p>

<a class="ui-btn ui-btn-big" href="#">More Info...</a>

</p>

</div>

<div class="imageSliderImage">

<img width="960" height="300" src="/media/677/test_3.jpg">

</div>

</div>

</div>

<div id="imageSliderNav">

<a class="" href="#">1</a>

<a class="activeSlide" href="#">2</a>

<a class="" href="#">3</a>

</div>

</div>

<div id="content">

<div id="contenttop">

<div id="contenttopheader">

<h3>New in the Resource Centre</h3>

</div>

<div id="contenttopleft">

<div id="contenttopicon1">

<p>

<img width="64" height="64" alt="App Icon 1" src="/media/395/app_icon_1.png">

</p>

</div>

<div id="contenttop1">

<p>

<strong>Title</strong>

<br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

</p>

</div>

</div>

<div id="contenttopright">

<div id="contenttopicon2">

<p>

<img width="64" height="64" alt="App Icon 2" src="/media/400/app_icon_2.png">

</p>

</div>

<div id="contenttop2">

<p>

<strong>Title</strong>

<br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit

</p>

</div>

</div>

</div>

<div id="contentbottommain">

<div id="contentbottomheader">

<h3>Welcome</h3>

</div>

<div id="contentbottom">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

</div>

<div id="hotspots">

<div id="hotspottopheader">

<h3>Latest News</h3>

</div>

<div id="hotspottop">

<p>

<strong>Title</strong>

<br>

<strong>September 2010</strong>

<br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

</p>

<p>

<strong>Title</strong>

<br>

<strong>September 2010</strong>

<br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

</p>

</div>

<div id="hotspotbottomheader">

<h3>Current UK Threat Level</h3>

</div>

<div id="hotspotbottom">

<p style="text-align: left;">

<img width="250" height="21" alt="Serv Bar" src="/media/724/serv_bar.png">

<br>

What does this mean?

</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div id="footerwrap">

<div id="footercontent">

<div id="footernav">

<ul id="topNavigation">

<li class="home current">

<a href="/">Home</a>

</li>

<li>

<a class="navigation" href="/company-news.aspx">

<span>Company News</span>

</a>

</li>

<li>

<a class="navigation" href="/company-blog.aspx">

<span>Company Blog</span>

</a>

</li>

<li>

<a class="navigation" href="/about.aspx">

<span>About</span>

</a>

</li>

<li>

<a class="navigation" href="/contact-us.aspx">

<span>Contact us</span>

</a>

</li>

</ul>

</div>

<div id="footershare">

<ul>

<li>

<a href="/company-news.aspx">

<img width="28" height="22" src="/images/icons/social_twitter.png">

Twitter

</a>

</li>

<li>

<a href="/company-blog.aspx">

<img width="28" height="22" src="/images/icons/social_facebook.png">

Facebook

</a>

</li>

<li>

<a href="/about.aspx">

<img width="28" height="22" src="/images/icons/social_linkedin.png">

Linkedin

</a>

</li>

<li>

<a href="/contact-us.aspx">

<img width="28" height="22" src="/images/icons/social_su.png">

Stumpled upon

</a>

</li>

</ul>

</div>

<div id="footercontact">

<div id="footercontact">

<p>Contact information</p>

Franklyn & Webster Ltd

<br>

PO Box 656

<br>

Halifax

<br>

HX1 9HW

<p>

Telephone: +44 (0)1422 400 410

<br>

Fax: +44 (0)1422 400 411

<br>

Email:

<a href="mailto:[email protected]">[email protected]</a>

</p>

</div>

</div>

<div id="footercopyright">

<p>Copyright 2011 @ Franklyn & Webster Ltd. All Rights Reserved.</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Copy Link
Dominic Brown 91 posts 111 karma points

Jul 28, 2011 @ 14:13

0

Ignore this, i've fixed it now

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?