Current location: Hot Scripts Forums » General Web Coding » CSS » [SOLVED] Body Height 100% Leaves Big Gap


[SOLVED] Body Height 100% Leaves Big Gap

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 06-11-08, 07:58 AM
xpeditionairways xpeditionairways is offline
Newbie Coder
  
Join Date: Feb 2007
Location: Atlanta, Georgia
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
[SOLVED] Body Height 100% Leaves Big Gap
Hello,

I am trying to use css to set my body element on the page to 100% and what is occurring is that when I attempt to set height:100% on the stylesheet a large gap appears below the page extending the page down roughly 20 lines below my footer content.

I want to have div layer at the bottom of the content in which is relative to the gap, so say that my footer div would adjust from the bottom of the site content to the bottom of the browser window (to replicate the brown background).

If someone can search through the code below and try and locate why it is creating this large gap I would much appreciate it. To preview the issue please use the following link:

http://www2.accoladetutoring.com/

HTML:
HTML Code:
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accolade In-Home Tutoring</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">

function noError(){return true;}
window.onerror = noError;

</script>
<link href="styles/m_components.css" rel="stylesheet" type="text/css" />
<link href="styles/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var t;
function fixheight() {
 var maxH = 0;
 var ids = ["row1","row2","row3"];
 // find the highest column
 for (var i=0;i<ids.length;i++) {
  var d = document.getElementById(ids[i]);
  d.style.height = ""; // important, set it to empty (mozilla, ie)
  if (d.offsetHeight > maxH) maxH = d.offsetHeight;
 }
 // set them all to be that height
 for (var i=0;i<ids.length;i++) {
  var d=document.getElementById(ids[i]);
  d.style.height = maxH+"px";
 }
}
</script>
</head>
<body onload="fixheight()" onresize="clearTimeout(t);t=setTimeout('fixheight()',10);">

<body>
<div style="height:100%;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="887" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="887"><img src="images/logo.jpg" width="268" height="98" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="39" valign="top" class="nav-menu"><div id="nav-dropdown"><?php include "content/menu.html"; ?></div></td>
  </tr>
  <tr>
    <td height="207" valign="top" class="body-site-2"><div id="body-site"><table width="884" height="370" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="884" height="198"><img src="images/advert.jpg" width="861" height="198" class="advert" /></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td valign="top"><div id="home-body">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="271" valign="top"><table width="252" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="5"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="5" /></td>
                  <td width="247"><img src="http://www2.accoladetutoring.com/images/welcome-to-accolade.jpg" alt="Welcome to Accolade" width="170" height="48" /></td>
                </tr>
                <tr>
                  <td width="5"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="9" height="8" /></td>
                  <td width="247"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="11" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="main-font" style="padding-left:2px; padding-right:8px;">Accolade In-Home Tutoring is the premier agency in bringing together exceptional tutors and students in the Atlanta area. <br />
                    <img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="15" /><br />
                    <a class="main-font" href="http://www2.accoladetutoring.com/aboutus/services"><u>Our Services</u></a><br />
                    <a class="main-font" href="images/coverage.jpg" rel="lightbox"><u>Coverage Area</u></a><br /></td>
                </tr>
              </table></td>
              <td width="261" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="5"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="5" /></td>
                  <td width="604"><img src="http://www2.accoladetutoring.com/images/our-experience.jpg" alt="Our Expertise" width="111" height="51" /></td>
                </tr>
                <tr>
                  <td width="5"><img src="transparent.gif" width="5" height="6" /></td>
                  <td width="604"><img src="transparent.gif" width="5" height="6" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td height="25" class="main-font" style="padding-left:2px;">In-Home Subject Tutoring </td>
                </tr>
                <tr>
                  <td><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="8" /></td>
                  <td class="main-font" style="padding-left:2px;"><hr width="92%" align="left" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="main-font" height="25" style="padding-left:2px;">SAT / ACT Test Prep </td>
                </tr>
                <tr>
                  <td><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="8" /></td>
                  <td class="main-font" height="8" style="padding-left:2px;"><hr width="92%" align="left" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="main-font" height="25" style="padding-left:2px;">Study Skills &amp; Test Strategies </td>
                </tr>
                <tr>
                  <td><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="8" /></td>
                  <td class="main-font" height="8" style="padding-left:2px;"><hr width="92%" align="left" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="main-font" height="25" style="padding-left:2px;">Flexible Schedules</td>
                </tr>
              </table></td>
              <td width="126" valign="top"><img style="margin-left:10px;" src="http://www2.accoladetutoring.com/images/welcome-image.jpg" width="109" height="190" /></td>
              <td width="226" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="17"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="5" /></td>
                  <td width="265"><img src="http://www2.accoladetutoring.com/images/get-started.jpg" alt="Get Started" width="98" height="51" /></td>
                </tr>
                <tr>
                  <td width="17"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="8" /></td>
                  <td width="265"><img src="http://www2.accoladetutoring.com/images/transparent.gif" width="5" height="8" /></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="main-font" style="padding-left:4px;">Call today to learn how our experienced, degreed, and / or certified instructors help students raise their grades, improve test scores, and build  confidence.</td>
                </tr>
              </table></td>
              </tr>
          </table></div>
        </td>
      </tr>
      
    </table>
    </td>
  </tr>
  <tr>
    <td height="175" valign="top" bgcolor="#9f968c"><table width="884" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="280" height="175" valign="top"><img src="http://www2.accoladetutoring.com/images/f-1.jpg" alt="Our tutors come to YOU" width="280" height="175" /></td>
        <td width="331" valign="top"><img src="http://www2.accoladetutoring.com/images/f-2.jpg" alt="All Subjects - Math, Science, Language Arts, Foreign Language, SAT/ACT, &amp; more!" width="331" height="175" /></td>
        <td width="274" valign="top"><img src="http://www2.accoladetutoring.com/images/f-3.jpg" alt="ONE on ONE" width="274" height="175" /></td>
      </tr>
    </table></td>
  </tr>
</table>
<div style="background-color:#9f968c; height:100%; padding-bottom:15px;">
<table width="875" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><?php include "content/footer-home.html"; ?></td>
  </tr>
</table></div></div>
</body>
</html>
CSS:
Code:
html, body {
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-position: center 5px;
	margin:0%;
	padding:0%;
	border:0px;
	height:100%;
}

#body-site {
	background-image: url(../images/site-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
}

#home-body {
	background-image: url(../images/home-body-gradient.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	margin-left: 13px;
	margin-top: 12px;
	margin-right: 11px;
	margin-bottom: 19px;
}

.body-site-2 {

	background-image: url(../images/site-bg-2.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
.footer {
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.footer-2 {
	background-image: url(../images/footer-2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#footer-text {
	width: 870px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 14px;
}
.footer-copyright {

	font-family: arial;
	font-size: 12px;
	color: #333333;
	padding-top: 5px;
}
.footer-links {

	font-family: arial;
	font-size: 12px;
	color:#666666;
	padding-top: 5px;
}
a.footer-links:link {
	text-decoration:none;
}
a.footer-links:visited {
	text-decoration:none;
}
a.footer-links:hover {
	text-decoration: underline;
	color:#000000;
}

.footer-copyright-2 {

	font-family: arial;
	font-size: 12px;
	color: #fff7ee;
	padding-top: 5px;
}
.footer-links-2 {

	font-family: arial;
	font-size: 12px;
	color:#e6dace;
	padding-top: 5px;
}
a.footer-links-2:link {
	text-decoration:none;
}
a.footer-links-2:visited {
	text-decoration:none;
}
a.footer-links-2:hover {
	text-decoration: underline;
	color:#FFFFFF;
}
.guidelink {
	font-family: arial;
	font-size: 12px;
	color: #756A5E;
	padding-top: 10px;
}
a.guidelink:link {
	color: #9F0004;
	text-decoration:none;
}
a.guidelink:visited {
	text-decoration:none;
}
a.guidelink:hover {
	text-decoration: underline;
}
.footer-active {
	text-decoration:none;
}

.nav-menu {
	background-image: url(../images/menu-bg.jpg);
	background-repeat: repeat-x;
}
#nav-dropdown {
	width: 887px;
	margin-left: auto; 
	margin-right: auto;
}
.side-bar {
	background-image: url(../images/side-bar-top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 202px;
	height: 350px;
}
.side-link {
	font-family: arial;
	font-size: 12px;
	color: #454545;
	line-height: 30px;
}
a.side-link:link {
text-decoration:none;
}
a.side-link:active {
text-decoration:none;
}
a.side-link:visited {
text-decoration:none;
}
a.side-link:hover {
text-decoration:underline;
}
.advert {
	padding-top: 9px;
	padding-left: 13px;
}
.home-icons {
	padding-left: 7px;
	padding-top: 14px;
}
.main-font {
	font-family: arial;
	font-size: 12px;
	line-height: 20px;
	color: #333333;
}
a.main-font:link {
	text-decoration:none;
}
a.main-font:visited {
	text-decoration:none;
}
a.main-font:active {
	text-decoration:none;
}
a.main-font:hover {
	color: #950004;
	text-decoration:underline;
}
.advert-secondary {

	padding-top: 6px;
}
.main-font-head {
	font-family: arial;
	font-size: 12px;
	line-height: 20px;
	color: #000000;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}
a.main-font-head:link {
	text-decoration: none;	
}
a.main-font-head:visited {
	text-decoration: none;	
}
a.main-font-head:active {
	text-decoration: none;	
}
a.main-font-head:hover {
	text-decoration: underline;	
}
ul {
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 25px;
	font-family: arial;
	font-size: 12px;
	line-height: 20px;
	color: #333333;
	padding: 0;
}
#footer-table {
	height:100%;
	background-color:#9f968c;
	padding-bottom:15px;
}
The code needs cleaned up a little but I am not sure what is causing it to mess up so badly.
Reply With Quote
  #2 (permalink)  
Old 06-11-08, 09:32 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
What do you mean by this:

I want to have div layer at the bottom of the content in which is relative to the gap, so say that my footer div would adjust from the bottom of the site content to the bottom of the browser window (to replicate the brown background).
__________________
Jerry Broughton
Reply With Quote
  #3 (permalink)  
Old 06-11-08, 10:05 AM
xpeditionairways xpeditionairways is offline
Newbie Coder
  
Join Date: Feb 2007
Location: Atlanta, Georgia
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Eh.....

I have a "content area" which consists of a mess of tables and div layers in which contains all my content brought in from a PHP script (the content height is relative).

On the homepage, for example, on some larger screens, there is a white space at the footer of the homepage. What I want to do for pages in which the total height is less than the height of the monitor for the footer div layer to expand and take up the white space left from the shorter content area....most pages don't have the issue but the homepage, for example, is an exception....

If you could let me know what would resolve this issue I would much appreciate it. Thanks!
Reply With Quote
  #4 (permalink)  
Old 06-11-08, 07:13 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Try it like this and see if you still have the height issue.
The code is a bit shorter and easier to control.
I may have left out some of the styles, I'm not sure.
But I have included the ones to style this page.

CSS Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Accolade In-Home Tutoring</title>
  6. <style>
  7. html, body
  8. {
  9.  margin:0;
  10.  background: url(../images/background.jpg);
  11.  background-repeat: no-repeat;
  12.  background-position: center 5px;
  13.  }
  14. .main_font
  15. {
  16.  font-family: arial;
  17.  font-size: 12px;
  18.  line-height: 20px;
  19.  color: #333333;
  20.  }
  21. #body-site
  22. {
  23.  background: url(../images/site-bg.jpg);
  24.  background-repeat: no-repeat;
  25.  background-position: center top;
  26.  }
  27. #home-body
  28. {
  29.  background: url(../images/home-body-gradient.jpg);
  30.  background-repeat: repeat-x;
  31.  width:861px;
  32.  margin-top:10px;
  33.  }
  34. .td1_align
  35. {
  36.  text-align:left;
  37.  padding-left:20px;
  38.  width:30%;
  39.  }
  40. .td2_align
  41. {
  42.  text-align:left;
  43.  padding-left:20px;
  44.  }
  45. .footer-copyright {
  46.  
  47.     font-family: arial;
  48.     font-size: 12px;
  49.     color: #333333;
  50.     padding-top: 5px;
  51. }
  52. .footer-links {
  53.  
  54.     font-family: arial;
  55.     font-size: 12px;
  56.     color:#666666;
  57.     padding-top: 5px;
  58. }
  59. a.footer-links:link {
  60.     text-decoration:none;
  61. }
  62. a.footer-links:visited {
  63.     text-decoration:none;
  64. }
  65. a.footer-links:hover {
  66.     text-decoration: underline;
  67.     color:#000000;
  68. }
  69. .footer {
  70.     background: url(../images/footer.jpg);
  71.     background-repeat: no-repeat;
  72.     background-position: center top;
  73. }
  74. .footer-2 {
  75.     background: url(../images/footer-2.jpg);
  76.     background-repeat: no-repeat;
  77.     background-position: center top;
  78. }
  79. #footer-text {
  80.     width: 870px;
  81.     margin-left: auto;
  82.     margin-right: auto;
  83.     padding-top: 14px;
  84. }
  85. .footer-copyright-2 {
  86.  
  87.     font-family: arial;
  88.     font-size: 12px;
  89.     color: #fff7ee;
  90.     padding-top: 5px;
  91. }
  92. .footer-links-2 {
  93.  
  94.     font-family: arial;
  95.     font-size: 12px;
  96.     color:#e6dace;
  97.     padding-top: 5px;
  98. }
  99. a.footer-links-2:link {
  100.     text-decoration:none;
  101. }
  102. a.footer-links-2:visited {
  103.     text-decoration:none;
  104. }
  105. a.footer-links-2:hover {
  106.     text-decoration: underline;
  107.     color:#FFFFFF;
  108. }
  109. .guidelink {
  110.     font-family: arial;
  111.     font-size: 12px;
  112.     color: #756A5E;
  113.     padding-top: 10px;
  114. }
  115. a.guidelink:link {
  116.     color: #9F0004;
  117.     text-decoration:none;
  118. }
  119. a.guidelink:visited {
  120.     text-decoration:none;
  121. }
  122. a.guidelink:hover {
  123.     text-decoration: underline;
  124. }
  125. .footer-active {
  126.     text-decoration:none;
  127. }
  128. a.main-font:link {
  129.     text-decoration:none;
  130. }
  131. a.main-font:visited {
  132.     text-decoration:none;
  133. }
  134. a.main-font:active {
  135.     text-decoration:none;
  136. }
  137. a.main-font:hover {
  138.     color: #950004;
  139.     text-decoration:underline;
  140. }
  141. .nav_decor
  142. {
  143.  background:url(../images/menu-bg.jpg);
  144.  background-repeat: repeat-x;
  145.  border-top:1px solid #cccccc;
  146.  border-bottom:1px solid #cccccc;
  147. </style>
  148. <link href="styles/lightbox.css" rel="stylesheet" type="text/css" />
  149. <script type="text/javascript" src="js/prototype.js"></script>
  150. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  151. <script type="text/javascript" src="js/lightbox.js"></script>
  152. </head>
  153. <body>
  154. <table width="100%" cellpadding=0 cellspacing=0>
  155.  <tr>
  156.   <td align="center">
  157.    <div style="width:887px;text-align:left;"><img src="http://www2.accoladetutoring.com/images/logo.jpg" width="268" height="98" /></div>
  158.    <div class="nav_decor"><?php include "content/menu.html"; ?></div>
  159.    <div id="body-site">
  160.     <div style="width:887px;margin-top:10px;"><img src="http://www2.accoladetutoring.com/images/advert.jpg" width="861" height="198" /></div>
  161.     <div id="home-body">
  162.      <table width="100%" cellpadding=0 cellspacing=0>
  163.       <tr>
  164.        <td valign="top" class="td1_align main_font">
  165.         <div><img src="http://www2.accoladetutoring.com/images/welcome-to-accolade.jpg" alt="Welcome to Accolade" width="170" height="48" /></div>
  166.         <div style="margin-top:10px;">Accolade In-Home Tutoring is the premier agency in bringing together exceptional tutors and students in the Atlanta area.</div>
  167.         <div style="margin-top:15px;">
  168.          <a href="http://www2.accoladetutoring.com/aboutus/services"><u>Our Services</u></a><br />
  169.          <a href="images/coverage.jpg" rel="lightbox"><u>Coverage Area</u></a>
  170.         </div>
  171.        </td>
  172.        <td valign="top" class="td2_align main_font">
  173.         <div><img src="http://www2.accoladetutoring.com/images/our-experience.jpg" alt="Our Expertise" width="111" height="51" /></div>
  174.         <div style="margin-top:10px;">In-Home Subject Tutoring</div>
  175.         <div><hr /></div>
  176.         <div>SAT / ACT Test Prep</div>
  177.         <div><hr /></div>
  178.         <div>Study Skills &amp; Test Strategies</div>
  179.         <div><hr /></div>
  180.         <div>Flexible Schedules</div>
  181.        </td>
  182.        <td valign="top" class="td2_align">
  183.         <img style="margin-left:10px;" src="http://www2.accoladetutoring.com/images/welcome-image.jpg" width="109" height="190" />
  184.        </td>
  185.        <td valign="top" class="td2_align main_font">
  186.         <div><img src="http://www2.accoladetutoring.com/images/get-started.jpg" alt="Get Started" width="98" height="51" /></div>
  187.         <div>Call today to learn how our<br />experienced, degreed, and / or<br />certified instructors help students<br />raise their grades, improve test<br />scores, and build  confidence.</div>
  188.        </td>
  189.       </tr>
  190.       <tr>
  191.       </tr>
  192.       <tr>
  193.       </tr>
  194.       <tr>
  195.       </tr>
  196.      </table>
  197.     </div>
  198.    </div>
  199.   </td>
  200.  </tr>
  201. </table>
  202. <table cellspacing=0 cellpadding=0 style="background:#9f968c;width:100%;">
  203.  <tr>
  204.   <td align="center"><div style="width:887px;"><img src="http://www2.accoladetutoring.com/images/f-1.jpg" alt="Our tutors come to YOU" width="280" height="175" /><img src="http://www2.accoladetutoring.com/images/f-2.jpg" alt="All Subjects - Math, Science, Language Arts, Foreign Language, SAT/ACT, &amp; more!" width="331" height="175" /><img src="http://www2.accoladetutoring.com/images/f-3.jpg" alt="ONE on ONE" width="274" height="175" /></div></td>
  205.  </tr>
  206.  <!-- Insert additional content here! -->
  207.  <tr>
  208.   <td align="center"><div style="width:887px;color:#ffffff;font-size:24px;margin-top:20px;">Aditional content here!</div></td>
  209.  </tr>
  210.  <!-- - - - - - - - - - - - - - - - - -->
  211.  <tr>
  212.   <td align="left" style="padding-bottom:15px;"><?php include "content/footer-home.html"; ?></td>
  213.  </tr>
  214. </table>
  215. </body>
  216. </html>
__________________
Jerry Broughton
Last edited by job0107; 06-11-08 at 07:43 PM.
Reply With Quote
  #5 (permalink)  
Old 06-11-08, 08:06 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
I ran out of time to edit and there was still one small alignment issue. I fixed it.

CSS Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Accolade In-Home Tutoring</title>
  6. <style>
  7. body
  8. {
  9.  margin:0;
  10.  background: url(../images/background.jpg);
  11.  background-repeat: no-repeat;
  12.  background-position: center 5px;
  13.  }
  14. .main_font
  15. {
  16.  font-family: arial;
  17.  font-size: 12px;
  18.  line-height: 20px;
  19.  color: #333333;
  20.  }
  21. #body-site
  22. {
  23.  background: url(../images/site-bg.jpg);
  24.  background-repeat: no-repeat;
  25.  background-position: center top;
  26.  }
  27. #home-body
  28. {
  29.  background: url(../images/home-body-gradient.jpg);
  30.  background-repeat: repeat-x;
  31.  width:861px;
  32.  margin-top:10px;
  33.  }
  34. .td1_align
  35. {
  36.  text-align:left;
  37.  padding-left:20px;
  38.  width:30%;
  39.  }
  40. .td2_align
  41. {
  42.  text-align:left;
  43.  padding-left:20px;
  44.  }
  45. .footer-copyright {
  46.  
  47.     font-family: arial;
  48.     font-size: 12px;
  49.     color: #333333;
  50.     padding-top: 5px;
  51. }
  52. .footer-links {
  53.  
  54.     font-family: arial;
  55.     font-size: 12px;
  56.     color:#666666;
  57.     padding-top: 5px;
  58. }
  59. a.footer-links:link {
  60.     text-decoration:none;
  61. }
  62. a.footer-links:visited {
  63.     text-decoration:none;
  64. }
  65. a.footer-links:hover {
  66.     text-decoration: underline;
  67.     color:#000000;
  68. }
  69. .footer {
  70.     background: url(../images/footer.jpg);
  71.     background-repeat: no-repeat;
  72.     background-position: center top;
  73. }
  74. .footer-2 {
  75.     background: url(../images/footer-2.jpg);
  76.     background-repeat: no-repeat;
  77.     background-position: center top;
  78. }
  79. #footer-text {
  80.     width: 870px;
  81.     margin-left: auto;
  82.     margin-right: auto;
  83.     padding-top: 14px;
  84. }
  85. .footer-copyright-2 {
  86.  
  87.     font-family: arial;
  88.     font-size: 12px;
  89.     color: #fff7ee;
  90.     padding-top: 5px;
  91. }
  92. .footer-links-2 {
  93.  
  94.     font-family: arial;
  95.     font-size: 12px;
  96.     color:#e6dace;
  97.     padding-top: 5px;
  98. }
  99. a.footer-links-2:link {
  100.     text-decoration:none;
  101. }
  102. a.footer-links-2:visited {
  103.     text-decoration:none;
  104. }
  105. a.footer-links-2:hover {
  106.     text-decoration: underline;
  107.     color:#FFFFFF;
  108. }
  109. .guidelink {
  110.     font-family: arial;
  111.     font-size: 12px;
  112.     color: #756A5E;
  113.     padding-top: 10px;
  114. }
  115. a.guidelink:link {
  116.     color: #9F0004;
  117.     text-decoration:none;
  118. }
  119. a.guidelink:visited {
  120.     text-decoration:none;
  121. }
  122. a.guidelink:hover {
  123.     text-decoration: underline;
  124. }
  125. .footer-active {
  126.     text-decoration:none;
  127. }
  128. a.main-font:link {
  129.     text-decoration:none;
  130. }
  131. a.main-font:visited {
  132.     text-decoration:none;
  133. }
  134. a.main-font:active {
  135.     text-decoration:none;
  136. }
  137. a.main-font:hover {
  138.     color: #950004;
  139.     text-decoration:underline;
  140. }
  141. .nav_decor
  142. {
  143.  background:url(../images/menu-bg.jpg);
  144.  background-repeat: repeat-x;
  145.  border-top:1px solid #cccccc;
  146.  border-bottom:1px solid #cccccc;
  147. .pad_text
  148. {
  149.  margin-top:5px;
  150.  }
  151. </style>
  152. <link href="styles/lightbox.css" rel="stylesheet" type="text/css" />
  153. <script type="text/javascript" src="js/prototype.js"></script>
  154. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  155. <script type="text/javascript" src="js/lightbox.js"></script>
  156. </head>
  157. <body>
  158. <table width="100%" cellpadding=0 cellspacing=0>
  159.  <tr>
  160.   <td align="center">
  161.    <div style="width:887px;text-align:left;"><img src="http://www2.accoladetutoring.com/images/logo.jpg" width="268" height="98" /></div>
  162.    <div class="nav_decor"><?php echo file_get_contents( "http://www2.accoladetutoring.com/content/menu.html" ); ?></div>
  163.    <div id="body-site">
  164.     <div style="width:887px;margin-top:10px;"><img src="http://www2.accoladetutoring.com/images/advert.jpg" width="861" height="198" /></div>
  165.     <div id="home-body">
  166.      <table width="100%" cellpadding=0 cellspacing=0>
  167.       <tr>
  168.        <td valign="top" class="td1_align main_font">
  169.         <div><img src="http://www2.accoladetutoring.com/images/welcome-to-accolade.jpg" alt="Welcome to Accolade" width="170" height="48" /></div>
  170.         <div style="margin-top:10px;">Accolade In-Home Tutoring is the premier agency in bringing together exceptional tutors and students in the Atlanta area.</div>
  171.         <div style="margin-top:15px;">
  172.          <a href="http://www2.accoladetutoring.com/aboutus/services"><u>Our Services</u></a><br />
  173.          <a href="images/coverage.jpg" rel="lightbox"><u>Coverage Area</u></a>
  174.         </div>
  175.        </td>
  176.        <td valign="top" class="td2_align main_font">
  177.         <div><img src="http://www2.accoladetutoring.com/images/our-experience.jpg" alt="Our Expertise" width="111" height="51" /></div>
  178.         <div class="pad_text">In-Home Subject Tutoring</div>
  179.         <div><hr /></div>
  180.         <div>SAT / ACT Test Prep</div>
  181.         <div><hr /></div>
  182.         <div>Study Skills &amp; Test Strategies</div>
  183.         <div><hr /></div>
  184.         <div>Flexible Schedules</div>
  185.        </td>
  186.        <td valign="top" class="td2_align">
  187.         <img style="margin-left:10px;" src="http://www2.accoladetutoring.com/images/welcome-image.jpg" width="109" height="190" />
  188.        </td>
  189.        <td valign="top" class="td2_align main_font">
  190.         <div><img src="http://www2.accoladetutoring.com/images/get-started.jpg" alt="Get Started" width="98" height="51" /></div>
  191.         <div class="pad_text">Call today to learn how our<br />experienced, degreed, and / or<br />certified instructors help students<br />raise their grades, improve test<br />scores, and build  confidence.</div>
  192.        </td>
  193.       </tr>
  194.       <tr>
  195.       </tr>
  196.       <tr>
  197.       </tr>
  198.       <tr>
  199.       </tr>
  200.      </table>
  201.     </div>
  202.    </div>
  203.   </td>
  204.  </tr>
  205. </table>
  206. <table cellspacing=0 cellpadding=0 style="background:#9f968c;width:100%;">
  207.  <tr>
  208.   <td align="center"><div style="width:887px;"><img src="http://www2.accoladetutoring.com/images/f-1.jpg" alt="Our tutors come to YOU" width="280" height="175" /><img src="http://www2.accoladetutoring.com/images/f-2.jpg" alt="All Subjects - Math, Science, Language Arts, Foreign Language, SAT/ACT, &amp; more!" width="331" height="175" /><img src="http://www2.accoladetutoring.com/images/f-3.jpg" alt="ONE on ONE" width="274" height="175" /></div></td>
  209.  </tr>
  210.  <!-- Insert additional content here! -->
  211.  <tr>
  212.   <td align="center"><div style="width:887px;color:#ffffff;font-size:24px;margin-top:20px;">Aditional content here!</div></td>
  213.  </tr>
  214.  <!-- - - - - - - - - - - - - - - - - -->
  215.  <tr>
  216.   <td align="left" style="padding-bottom:15px;"><?php include "footer-home.html"; ?></td>
  217.  </tr>
  218. </table>
  219. </body>
  220. </html>
__________________
Jerry Broughton
Reply With Quote
  #6 (permalink)  
Old 06-11-08, 11:29 PM
xpeditionairways xpeditionairways is offline
Newbie Coder
  
Join Date: Feb 2007
Location: Atlanta, Georgia
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Hello Jerry,

Thank you SO MUCH for fixing that for me ... I am so relieved to have this client's site completed and made ready for the public. I appreciate your time and effort, and have preserved your code within the homepage version of the site. Have a good evening.

Hm....menu bar is a little off on IE so I will need to work on that but otherwise great work.
Last edited by xpeditionairways; 06-11-08 at 11:31 PM.
Reply With Quote
  #7 (permalink)  
Old 06-12-08, 05:41 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Cheers....
__________________
Jerry Broughton
Reply With Quote
Reply

Bookmarks

« [SOLVED] CSS Newb - Overlap issue IE6, 2 links issue | CSS design question »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Print CSS Webpage in IE6 TheScreenSaver24 HTML/XHTML/XML 1 07-06-07 11:24 AM
Scrollbar!!!!!! LiLSweetie HTML/XHTML/XML 8 07-22-04 05:01 PM


All times are GMT -5. The time now is 02:10 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.