Log in

View Full Version : 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


=========



<!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

#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..
ravi tom
06-28-2010, 12:54 PM
you have missed closing tags and all ..try this code ...for me its working fine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

<title>R</title>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<style type="text/css">
/*<![CDATA[*/


/* 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');
border:2px solid red;

}
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</td>
</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</td>
</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 /></span>

<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>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>