Log in

View Full Version : CSS issue with webpage - random spacing at the bottom of the page....


cimm.mann
07-23-2009, 09:29 AM
Hi,

I am getting random spacing at the bottom of my webpage which is very annoying... I cant seem to find where it is coming from!

Please help me

THE CSS IS POSTED BELOW

From Cimm

HTML

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Effective email marketing programs are easy with Campaignmaster" />
<meta name="keywords" content="email marketing, email marketing software, email marketing services, email marketing solutions, exacttarget, e-mail marketing, e-mail marketing software, online email marketing software, on-demand email marketing software, one-to-one marketing, business-to-business email marketing, email list management, email marketing strategy, permission-based email marketing, transactional email, triggered email marketing" />

<title>Campaignmaster</title>

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>


<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #224DB5;width:1010px; border:solid 0px #003871;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color: #FFFFFF;
background-color: #224DB5;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #003871; border-left:solid 1px #003871;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #224DB5;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #224DB5; width:1px}
.pd_menu_01 ul li:hover a {background-color:#657CD1; text-decoration:none; color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:260px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #003871; border-bottom: solid 1px #003871; background-color:#224DB5; color:#ffffff;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#657CD1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#657CD1; text-decoration:none;color:#FFFFFF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#224DB5; color:#ffffff;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #003871; border-bottom: solid 1px #003871; background-color:#224DB5; color:#ffffff;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#657CD1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection">
<div class="logo"><img src="logo.gif" /></div>
<div class="login"><img src="login.gif" /></div>
<div class="phonenumber">
<h5>Call Us +44 020 8423 9922</h5></div>

</div>

<div id="topsection2"><div class="innertube">

<div class="pd_menu_01 ">
<ul><li><a href="#">home</a>
</li></ul>

<ul><li><a href="#">about us</a>
<ul>
<li><a href="#" class="lastone">Careers</a></li>
</ul>
</li></ul>

<ul><li><a href="#">features</a>
<ul>
<li><a href="#" >reporting and history</a></li>
<li><a href="#" >spam analysis</a></li>
<li><a href="#" >viral marketing</a></li>
<li><a href="#" >subdomains</a></li>
<li><a href="#" >dynamic content</a></li>
<li><a href="#" >more +</a></li>
</ul>
</li></ul>

<ul><li><a href="#">email marketing</a>
</li></ul>

<ul><li><a href="#">agency services</a>
<ul>
<li><a href="#" >email marketing</a></li>
<li><a href="#" >micro sites</a></li>
<li><a href="#" >template design and campaign creation</a></li>
<li><a href="#" >surveys, invitations and competitions</a></li>
<li><a href="#" >more +</a></li>
</ul>
</li></ul>

<ul><li><a href="#">contact us</a>
</div></div></div>

<div id="topsection3"><div class="innertube"><img src="bannerflash.jpg" /></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube2">

<h1>Effective email marketing programs are easy with Campaignmaster.</h1>
<h2>Our focus is demystifying the technology and providing world-class solutions and services that extend your capabilities, ensuring your email marketing activities result in genuine competitive advantage.

Email marketing offers an exceptional mechanism to create and build client relationships and to understand your audience more intimately. Campaignmaster brings this power within reach of everyone.</h2>

</div></div></div>

<div id="rightcolumn">
<div class="demo"><img src="demo-logo.gif" /></div>
<div class="agency"><img src="services-logo.gif" /></div>
<div class="info"><img src="info-logo.gif" /></div>
<div class="newsletter"><img src="newsletter-logo.gif" /></div>
<div class="separator"><img src="spacer.gif" /></div>
<div class="more1"><img src="more-b.gif" /></div>
<div class="more2"><img src="more-b.gif" /></div>
<div class="more3"><img src="more-b.gif" /></div>
<div class="more4"><img src="more-b.gif" /></div>
<div class="grid1"><h3>Demonstration</h3>
<div class="grid1text"><h4>To request an on online demonstration from one of our consultants on Campaignmaster</h4></div>


<div class="grid2"><h3>Information</h3>
<div class="grid2text"><h4>For more information on any of our products, services or if you would like to talk to a representative</h4></div>


<div class="grid3"><h3>Agency Services</h3>
<div class="grid3text"><h4>We offer agency services which include everything from email marketing to micro web sites</h4></div>


<div class="grid4"><h3>Newsletter</h3>
<div class="grid4text"><h4>To receive our regular newsletteron email marketing and Campaignmaster</h4></div>
</div>

<div id="footer"><img src="bannerflash.jpg" /></div>


</div></body></html>
cimm.mann
07-23-2009, 09:29 AM
CSS

body{
margin:0;
padding:0;
line-height: 1.2em;
background-image:url('bg-1.jpg')}
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1010px;
margin-top: 16px; /*Center container on page*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #FFFFFF;
margin-top: 25px;
height: 94px; /*Height of top section*/
}

#topsection2{
background: #ffffff;
height: 40px; /*Height of top section*/
}

#topsection3{
background: #ffffff;
height: 160px; /*Height of top section*/
}

#contentwrapper{
float: left;
width: 507px;
height: 10px;
margin-top: 5px;
}

#contentcolumn{
width: 307px;
height: 10px;
margin-right: 200px; /*Set right margin to RightColumnWidth*/
margin-top: -23px;
padding-left: -10px;
}

#rightcolumn{
float: left;
width: 703px; /*Width of right column*/
height: 250px; /*Height of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FFFFFF;
}

#footer{
float: left;
margin-left: -817px;
margin-top: -130px;
width: 1010px;
height: 20px;
background: #224DB5;
color: #FFF;
text-align: center;
}

#footer a{
color: #FFFFFF;
}

.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
background: white;
}

.innertube2{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 18px;
padding-left: 4px;
padding-top: -20px;
background: white;
width: 307px;
height: 400px;
}

.innertube3{
margin: -10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 18px;
margin-right: 18px;
background: white;
width: 310px;
height: 247px;
}

.phonenumber{
margin: 716px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 10px;
margin-right: 18px;
width: 310px;
height: 20px;
}

.grid1{
margin: 180px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -222px;
margin-right: 18px;
width: 200px;
height: 247px;
}

.grid1text{
margin: 80px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -14px;
margin-right: 18px;
margin-left: 0px;
width: 500px;
height: 247px;
}

.grid2{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -230px;
margin-right: 18px;
width: 200px;
height: 247px;
}

.grid2text{
margin: 80px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -15px;
margin-right: 18px;
margin-left: 0px;
width: 300px;
height: 400px;
}

.grid3{
margin: 330px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -625px;
margin-right: 18px;
width: 200px;
height: 247px;
}

.grid3text{
margin: 80px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -15px;
margin-right: 18px;
margin-left: 0px;
width: 300px;
height: 400px;
}

.grid4{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -383px;
margin-right: 18px;
width: 200px;
height: 247px;
}

.grid4text{
margin: 80px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: -15px;
margin-right: 18px;
margin-left: 0px;
width: 300px;
height: 400px;
}

.more1 {
margin-left: 270px;
margin-top: -150px;
}

.more2 {
margin-left: 270px;
margin-top: 100px;
}

.more3 {
margin-left: 600px;
margin-top: -145px;
}

.more4 {
margin-left: 600px;
margin-top: 100px;
}

.bluetxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #050A65;
text-decoration: underline;
line-height: 20px;
background-color: #6C8EBD;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #2751B6;
text-decoration: none;

}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
text-decoration: none;

}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #2751B6;
text-decoration: none;

}

h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9.5px;
font-weight: normal;
color: #000000;
text-decoration: none;
line-height: 12px;
width: 150px;

}

h5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: #7C9CE7;
text-decoration: none;

}

h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #7C9CE7;
text-decoration: none;

}

.logo {
padding: -5px;

}

.login {
padding: -5px;
margin-left: 860px;
margin-top: -94px;
}

.demo {
padding: -5px;
margin-left: 40px;
margin-top: 2px;
}

.agency {
padding: -5px;
margin-left: 365px;
margin-top: -103px;
}

.info {
padding: -5px;
margin-left: 40px;
margin-top: 2px;
height: 115px;
}

.newsletter {
padding: -5px;
margin-left: 365px;
margin-top: -112px;
}

.separator {
padding: -5px;
margin-left: 15px;
margin-top: -232px;
}