CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Getting extra space, not sure why.... Please help!!!

https://forum.cmsmadesimple.org/viewtopic.php?t=34200

Page 1 of 1

Getting extra space, not sure why.... Please help!!!

Posted: Thu May 28, 2009 3:32 am
by nauticalwebd
Developing a website right now and there is an extra space coming in at the bottom of the site.  This only happens when using firefox / safari etc.  ie 8 is no problem.  Not sure why, could someone please help me out? 

Thanks, below is my css code and link to the page.

http://67.19.87.68/~locustst/index.php

CSS Code:

Code: Select all

body {
	margin: 0px;
	padding: 0px;
	background-image: url(images/Locust-Street-Design-bg.gif);
	background-repeat: repeat-x;
	background-position: top;
                background-color: #8bd3dc;
}

a {
                color: #1ba5b6;
                text-decoration: none;
}

a:hover {
               color: #1ba5b6;
               text-decoration: underline;
}

.container {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	background-image:url(images/lcstde-bdbg.jpg);
	background-repeat:repeat-y;
}
.top {
	height: 101px;
	width: 980px;
	background-image: url(images/lcstde-top.jpg);
}
.bttn-cont {
	height: 121px;
	width: 980px;
}
.content-container {
        clear: both;
	width: 866px;
	margin-right: auto;
	margin-left: auto;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
	background-image:url(images/lcstde-bdbg.jpg);
	background-repeat:repeat-y;
}

.left-content {
	clear: both;
	width: 385px;
                float: left;

}

.content {
	clear: both;
	width: 866px;
                margin-left: auto;
                margin-right: auto;
}

.right-content {
	width: 440px;
        float: right;
        padding-right: 30px;

}


#left-content  {
               padding-left: 15px;
               padding-right: 15px;
               width: 385px;
}

#content  {
               padding-left: 15px;
               width: 836px;
               clear: both;
               margin-left: auto;
               margin-right: auto;
}

#right-content  {

               padding-left: 15px;
               padding-right: 15px;
               width: 440px;
               clear: both;
}

.below-footer {
	width: 866px;
	margin-right: auto;
	margin-left: auto;
                padding-top: 5px;
                color: #055660;
                padding-left: 25px;
                padding-bottom: 25px;

}

.below-footer a {
                color: #055660;
                text-decoration: none;
}

.below-footer a:hover {
               color: #055660;
               text-decoration: underline;
}

/********************
MENU
*********************/

/* hack for Internet Explorer */
* html div#menu_horiz {
   /* hide ie/mac \*/
   height: 1%;
   /* end hide */
}

* html div#sub_menu_horiz {
   /* hide ie/mac \*/
   height: 1%;
   /* end hide */
}

/* 
background-color for the entire menu row, 
covering 100% of the width and text center-aligned 
*/
div#menu_horiz {
   background-color: #ffffff;  /* background color for the entire menu row */
   width: 980px;
   margin-left:0px;
   text-align: center;
   float: left;
   font-weight: bold;
}

div#sub_menu_horiz {
   background-image:url(images/lcstde-bdbg.jpg);
   width: 866px;
   margin-left:0px;
   text-align: center;
   float: left;
   font-weight: bold;
   padding-bottom: 25px;
}

div#sub_menu_horiz ul {
   margin: 0;
   padding: 0;
   font-weight: bold;
}


/* menu list items */
div#sub_menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   padding-left: 20px;

}


/* 
the menu ul box has top and left border, 
right border is provided by the li elements 
*/
div#menu_horiz ul {
   margin: 0;
   padding: 0;
   height: 121px;
   font-weight: bold;
}


/* menu list items */
div#menu_horiz li {
   background-color: #ffffff;
   width: 75px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;

}

.footer {
        clear: both;
	height: 85px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/lcstde-ftr.jpg);
	background-repeat: no-repeat;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
}


/* menu list items */
div#menu_horiz li.left-spacer {
   background-color: #ffffff;
   width: 273px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-lftsp.jpg)

}

/* menu list items */
div#menu_horiz li.right-spacer {
   background-color: #ffffff;
   width: 86px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-rtsp.jpg)

}

/* menu list items */
div#menu_horiz a.home {
   background-color: #ffffff;
   width: 69px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-hme.jpg)

}

div#menu_horiz a:hover.home {
   background-image: url(images/lcstde-hme-mo.jpg)

}

div#menu_horiz li.home {
   background-color: #ffffff;
   width: 69px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-hme.jpg)

}

/* menu list items */
div#menu_horiz li.blog {
   background-color: #ffffff;
   width: 92px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-blog.jpg)

}

div#menu_horiz a.blog {
   background-color: #ffffff;
   width: 92px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-blog.jpg)

}

div#menu_horiz a:hover.blog {
   background-image: url(images/lcstde-blog-mo.jpg)

}

/* menu list items */
div#menu_horiz li.services {
   background-color: #ffffff;
   width: 111px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-svcs.jpg)

}

div#menu_horiz a.services {
   background-color: #ffffff;
   width: 111px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-svcs.jpg)

}

div#menu_horiz a:hover.services {
   background-image: url(images/lcstde-svcs-mo.jpg)

}

/* menu list items */
div#menu_horiz li.portfolio {
   background-color: #ffffff;
   width: 128px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-ptfolo.jpg)

}

div#menu_horiz a.portfolio {
   background-color: #ffffff;
   width: 128px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-ptfolo.jpg)

}

div#menu_horiz a:hover.portfolio {
   background-image: url(images/lcstde-ptfolo-mo.jpg)

}



/* menu list items */
div#menu_horiz li.contacts {
   background-color: #ffffff;
   width: 108px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-cntcts.jpg)

}

div#menu_horiz a.contacts {
   background-color: #ffffff;
   width: 108px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-cntcts.jpg)

}

div#menu_horiz a:hover.contacts {
   background-image: url(images/lcstde-cntcts-mo.jpg)

}

div#menu_horiz li.clients {
   background-color: #ffffff;
   width: 113px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-clnts.jpg)

}

div#menu_horiz a.clients {
   background-color: #ffffff;
   width: 113px;
   height: 121px;
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   margin: 0; /* margin outside each list item box */
   font-weight: bold;
   background-image: url(images/lcstde-clnts.jpg)

}

div#menu_horiz a:hover.clients {
   background-image: url(images/lcstde-clnts-mo.jpg)

}

/* accessibility */

/* 
menu links accesskeys 
*/
span.accesskey {
   text-decoration:none;
}

/* 
accessibility divs are hidden by default 
text, screenreaders and such will show these 
*/
.accessibility, hr {
   position: absolute;
   top: -999em;
   left: -999em;
}

/* 
definition tags are also hidden 
these are also used for menu links    
*/
dfn {
   position: absolute;
   left: -1000px;
   top: -1000px;
   width: 0;
   height: 0;
   overflow: hidden;
   display: inline;
}
/* end accessibility */


/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
  position: absolute;
  left: -5000px;
  width: 4000px;
}

/* make some room for the image */
a.external {
/* css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
  padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
  color: #18507C;
/* background image for the link to show wiki style arrow */
  background: url(images/cms/external.gif) no-repeat 100% 0;
}
a.external:visited {
  color: #18507C; /* a different color can be used for visited external links */

/* 
Set the last 0 to -100px to use that part of the external.gif image for different color for active links 
external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.
*/
  background: url(images/cms/external.gif) no-repeat 100% 0; 
}

a.external:hover {
  color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
  background: url(images/cms/external.gif) no-repeat 100% 0; 
  background-color: #C3D4DF;
}
/* end wiki style external links */


/* clearing */
/* 
clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item.
We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience.
Do not edit if you dont know what you are doing
*/
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */

.hiddenPic {display:none;}

.rssImage {
     width: 117px;
     height: 50px;
     border: 0px;
     padding-left: 50px;
}

.clear {
clear: both;
line-height: 0;
font-size: 0;
background-image:url(images/lcstde-bdbg.jpg);
background-repeat:repeat-y;
}

Re: Getting extra space, not sure why.... Please help!!!

Posted: Thu May 28, 2009 2:23 pm
by Nullig
Not sure what you mean. Are you talking about the footer div? If you don't want the footer, just remove it from the template.

Nullig

Re: Getting extra space, not sure why.... Please help!!!

Posted: Fri May 29, 2009 1:24 am
by nauticalwebd
It's the blue space between the footer and the content section.  Those two parts should be together as one.

Re: Getting extra space, not sure why.... Please help!!!

Posted: Fri May 29, 2009 4:26 am
by Jeff
The in the footer div are having a default margin/padding on them.

You can either take them out and only have a blank space (firebug says that work in firefox) or add to your css to remove an margin/padding for in the footer div.

Re: Getting extra space, not sure why.... Please help!!! [SOLVED]

Posted: Fri May 29, 2009 4:44 am
by nauticalwebd
Wow, such a simple fix.  Thank you!!!!  ;D
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited