Need some help with CSS code

**galina** · 06-26-2010, 08:12 PM

I have this at the bottom of a page as the "footer"...

But for some reason the black background doesn't extent to the bottom of the page and leaves a empty space.

How would I get it to extend height wise all the way to the bottom without having any space in between the end of the page?

css in head:
==============

#footer {
float: left;
height: 30px;
width:100%;
background-color: #000000;
font-family:"Times New Roman",Georgia,Serif; color: #ffffff; font-size: 14px; padding-top:0px; padding-right:0px;

.bottomnav {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding-left:390px;

}

.bottomnav div {
float: left;
padding: 15px;

code on the page:
==============

<div id="footer">
<div class="bottomnav">
<div><a href="#" class="link2">Home</a></div> <div><a href="#" class="link2">About</a></div> <div><a href="#" class="link2">Contact</a></div> <div><a href="#" class="link2">Pricing</a></div> <div><a href="#" class="link2">Shop</a></div> </a></div>
</div>

--- and here is where theres a empty space ---

</BODY>
</HTML>

**azoomer** · 06-26-2010, 08:22 PM

If you post the entire code of the page it may be easier to help. That way i could try it in my browser.

right now it looks like the last </a> does not have an opening tag. But that may not be the main problem

**galina** · 06-26-2010, 08:37 PM

sure try this

=========

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<title>R</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">



<style type="text/css">


/* BASE LINKS */
a {outline: none;}
a:link, a:active, a:visited {text-decoration: underline; color: #FFFFFF; }
a:hover {text-decoration: none;}

.class2 A {outline: none;}
.class2 A:link, a:active, a:visited {text-decoration: underline; color: #FFFFFF; }
.class2 A:hover {text-decoration: none;}

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
background-color:#ffffff;
}

.pagebg {

         background-image:url('bgrs.jpg');

}
body,td,th {

}
.text {color: #000000; font-size: 14px; padding-left:0px; padding-right:0px; font-family:"Times New Roman",Georgia,Serif; line-height:15px;}

.testtext {color: #E8EAEC; font-size: 12px; padding-left:4px; padding-right:4px; line-height:110%; }

.title {color: #8DA2D0; font-size: 14px; padding-left:0px; padding-right:0px; }

.box {color: #000000; font-size: 12px; padding-left:0px; padding-right:0px;}



#footer {
float: left; /* Just to contain the floated image. You can replace with 
your preferred float containment method if you like. */
height: 30px;
width:100%;
background-color: #000000;
font-family:"Times New Roman",Georgia,Serif; color: #ffffff; font-size: 14px; padding-top:0px; padding-right:0px;


 }
         
.bottomnav {
font-family: Verdana; 
	font-size: 12px;
	font-weight: bold; 
	color: #FFFFFF;
	text-decoration: none;
 padding-left:390px;

}
	
.bottomnav div {
float: left;
text-align:center;
padding: 15px;

}


.development {
         background-image:url('images/contact_14.jpg');
   
   }
         
.convert {
         background-image:url('images/contact_17.jpg');         

}

.newsbg {
         background-color:#090E13;
      }

.contbg {
         background-color:#090E13; 
}


p
{

margin-top:5px;
margin-bottom:0px;


}

.container{
padding-left:250px;
padding-top:10px;
}

label{
float: left;
width: 120px;
font-weight: bold;
}

textarea{
width: 180px;
height: 22px;
background-color:#000000;
background-image:url('textbg.jpg');
margin-bottom: 5px;
color:#ffffff;
font-family:"Times New Roman",Georgia,Serif;
font-size:14px;
}

textarea{
width: 632px;
height: 174px;
background-image:url('textbg.jpg');
font-family:"Times New Roman",Georgia,Serif;
font-size:14px;

}

.inputbg{
width: 180px;
height: 29px;
background-image:url('textbg.jpg');
font-family:"Times New Roman",Georgia,Serif;
color:#ffffff;
font-size:14px;

}


.boxes{
width: 1em;
}


clear{
clear: right;
}


float{
float: right;
}


</style>


</HEAD>






<BODY>

<table width="1117" align=center cellpadding="0" cellspacing="0" class="pagebg">
  <tr>
    <td valign="top"><table width="1117" cellpadding="0" cellspacing="0">
      <tr>
		<TD>
			<IMG SRC="images/contact_01.jpg" WIDTH=538 HEIGHT=140 ALT=""></TD>
		<TD COLSPAN=8>
			<IMG SRC="images/contact_02.jpg" WIDTH=579 HEIGHT=140 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=9>
			<IMG SRC="images/contact_03.jpg" WIDTH=1117 HEIGHT=37 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2 ROWSPAN=2>
			<IMG SRC="images/contact_04.jpg" WIDTH=565 HEIGHT=245 ALT=""></TD>
		<TD COLSPAN=2>
			<IMG SRC="images/contact_05.jpg" WIDTH=124 HEIGHT=51 ALT=""></TD>
		<TD>
			<IMG SRC="images/contact_06.jpg" WIDTH=100 HEIGHT=51 ALT=""></TD>
		<TD>
			<IMG SRC="images/contact_07.jpg" WIDTH=104 HEIGHT=51 ALT=""></TD>
		<TD>
			<IMG SRC="images/contact_08.jpg" WIDTH=107 HEIGHT=51 ALT=""></TD>
		<TD>
			<IMG SRC="images/contact_09.jpg" WIDTH=83 HEIGHT=51 ALT=""></TD>
		<TD ROWSPAN=6>
			<IMG SRC="images/contact_10.jpg" WIDTH=34 HEIGHT=549 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=6>
			<IMG SRC="images/contact_11.jpg" WIDTH=518 HEIGHT=194 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3 ROWSPAN=3>
			<IMG SRC="images/contact_12.jpg" WIDTH=603 HEIGHT=182 ALT=""></TD>
		<TD COLSPAN=5>
			<IMG SRC="images/contact_13.jpg" WIDTH=480 HEIGHT=68 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=5 class="development" WIDTH=480 HEIGHT=64 valign=top>
			
			<table width="480" cellpadding=0 cellspacing=0>
			<tr>
			<td class="text">
bla bla bla bla
			
			</tr>
			</table>
			</td>
			
			
			
	</TR>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="images/contact_15.jpg" WIDTH=480 HEIGHT=50 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/contact_16.jpg" WIDTH=603 HEIGHT=122 ALT=""></TD>
			
		<TD COLSPAN=5 class="convert" WIDTH=480 HEIGHT=122 valign=top>
			<table width="480" cellpadding=0 cellspacing=0>
			<tr>
			<td class="text">
bla bla bla bla
			</tr>
			</table>
			</td>
			
			
	</TR>
	<TR>
		<TD COLSPAN=9>
			<IMG SRC="images/contact_18.jpg" WIDTH=1117 HEIGHT=88 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=9>
			<IMG SRC="images/contact_19.jpg" WIDTH=1117 HEIGHT=58 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=538 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=86 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=100 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=104 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=107 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=83 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
	</TR>
</TABLE>


<div class="container">
<form action="webformmailer.php" method="post">           
                    
        
                  
<span class="text">Your E-mail:<br>
<input type="text" name="email" class="inputbg">

<br>

<span class="text">Your Name:</span><br>
<input type="text" name="name" class="inputbg">

<br>

<span class="text">Company:</span><br>
<input type="text" name="company" class="inputbg">

<br>

<span class="text">Your Phone:</span><br>
<input type="text" name="phone" class="inputbg">

<br>

<span class="text">Your ICQ#:</span><br>
<input type="text" name="name" class="inputbg">

<br><br>

<span class="text">Your message:</span><br>						
<textarea class="textarea" name="info" id="info"></textarea>

<br>

<center><input type="image" src="button.jpg" alt="Send Now!"></center>
</form>
</div>


<div id="footer">
<div class="bottomnav">
<div><a href="index.html" class="link2">Home</a></div> <div><a href="join.php" class="link2">About</a></div> <div><a href="#" class="link2">Contact</a></div> <div><a href="#" class="link2">Pricing</a></div> <div><a href="#" class="link2">Shop</a></div>

</BODY>
</HTML>

**azoomer** · 06-26-2010, 09:00 PM

Ok I see your page now. There's a black background on the body going all the way to the bottom in my browsers ( FF3.6 , IE8). A couple of </div> 's are missing at the bottom.
Not sure i understand how you need it to look. ?? Did you try to increase the height of the footer ?

**galina** · 06-26-2010, 09:09 PM

No its not a black background. It's one strip of black horizontally across the bottom. Make the page background white and you'll see it...

I need the black strip to go to the bottom of the page without any space between it and the bottom like there is now.

**azoomer** · 06-26-2010, 09:27 PM

How does it look for you if you delete the footer height: 30px

**azoomer** · 06-26-2010, 09:41 PM

try to add
form{ margin:0; padding:0}
and change the footer css to

Code:

#footer {
float: left; 
width:100%;
background-color: #000000;
font-family:"Times New Roman",Georgia,Serif; 
color: #ffffff; 
font-size: 14px; 
padding-top:0px;
padding-right:0px;
}

and tell me how that looks

**galina** · 06-27-2010, 09:37 AM

Doesn't do anything. The space is still there.

**azoomer** · 06-27-2010, 11:13 AM

Hi Galina, I can't seem to get further with it. All those tables freak me out. You might want to try the validator and see if it gives you a clue. Also you could post a link to the site in case someone else want's to give it a go.

**galina** · 06-27-2010, 02:05 PM

I fixed it by putting the form inside of a table..

Thread: Need some help with CSS code

Thread Tools

Search Thread

Need some help with CSS code

Bookmarks

Bookmarks

Posting Permissions