467,920 Members | 1,112 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,920 developers. It's quick & easy.

Having problem with border around html page

I am having a problem with a border around me html page. The border does not flow thru the whole html page, it cuts off halfway.

--> See http://keithborom.com/marlon-sanders

CSS STYLESHEET

Expand|Select|Wrap|Line Numbers
  1.  /* CSS for Marlon Sanders site
  2.  */
  3.  
  4. html, body {
  5. height: 100%;
  6. }
  7.  
  8. #container {
  9. min-height: 100%;
  10. margin-bottom: -330px;
  11. position: relative;
  12. margin: auto;
  13. border: 2px solid black;
  14. width: 800px;
  15. }
  16.  
  17. #footer {
  18. height: 330px;
  19. position: relative;
  20. }
  21.  
  22. #container {
  23. height: 100%;
  24. }
  25.  
  26. body {
  27. font-family: Verdana, Helvetica, Arial, sans-serif;
  28. padding: 20px;
  29. font-size: small;
  30.  
  31. /* for navigation links
  32. */
  33.  
  34. #navigation {
  35. background-color: #CCCC66;
  36. width: 150px;
  37. height: auto;
  38. }
  39.  
  40. a {
  41. font-weight: bold;
  42. }
  43.  
  44. a:link {
  45. color: #0066FF;
  46. }
  47.  
  48. a:visited {
  49. color: #000000;
  50. }
  51.  
  52. a:hover {
  53. text-decoration: none;
  54. color: red;
  55. }
  56.  
  57. a:active {
  58. color: aqua;
  59. }
  60.  
  61. /* for positioning elements on page
  62. */
  63.  
  64. #navigation, #header, #bodycontent {
  65. position: absolute;
  66. }
  67.  
  68. #navigation, #bodycontent {
  69. top: 123px;
  70. }
  71.  
  72. #header {
  73. left: 180px;
  74. }
  75.  
  76. #bodycontent {
  77. left: 180px;
  78. }
  79.  
HTML CODE

Expand|Select|Wrap|Line Numbers
  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. <title>Marlon Sanders' Product Highlights</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  
  7. <style type="text/css">
  8. <!--
  9. @import url("style1.css");
  10. -->
  11. <!--[if lt IE 7]>
  12. <link rel="stylesheet" type="text/css" href="ie6.css" />
  13. <![endif]-->
  14.  
  15. </style>
  16. </head>
  17. <body>
  18. <div id="container">
  19.  
  20. <table width="99%" cellspacing="0" cellpadding="5">
  21.   <tr>
  22.     <td bgcolor="yellow" align="center">Keith&acute;s Marketing Tools
  23.     </td>
  24.   </tr>
  25. </table>
  26.  
  27. <div id="navigation">
  28. <ul>
  29. <li><a href="index.html">Home</a></li>
  30. <li><a href="about.html">About Me</a></li>
  31. <li><a href="contact.html">Contact</a></li>
  32. </ul>
  33. </div><!--end of site navigation-->
  34.  
  35.  
  36. <div id="header">
  37. <h1>Marlon Sanders</h1>
  38. </div><!--end of header div-->
  39.  
  40. <div id="bodycontent">
  41.  
  42. <p><img src="http://keithborom.com/marlon-sanders/images/marlon-sanders.jpg" width="90" height="118" align="left" alt="marlon sanders picture" /><strong>Marlon Sanders</strong> is a prolific internet marketer, with a dozen internet marketing products and services to his name. He uses his Master's degree in psychology to great effect by writing great ad copy.</p>
  43.  
  44. <p>Marlon&acute;s products and services include The Amazing Formula That Sells Products Like Crazy, Push Button Sales Letters, Associate Program Marketing Handbook, Gimme My Money Now, Amazing Ad Copy Secrets Revealed, Create Your Own Products In A Flash, How to Automate Your Web Business, The Web Site Power System, Web Business Operations Manual, Secrets of Speed Publicity, The Cash Like Clockwork System, Daily Stats Software, and The Ultimate Beginner&acute;s Guide.</p>
  45.     <br />
  46.           <p><strong>Screenshot Description</strong></p>
  47.                     <img src="http://keithborom.com/marlon-sanders/images/amazing-formula.gif" alt="amazing-formula picture" />
  48.                                                 <p><strong>The Amazing Formula That Sells Products Like Crazy</strong>, designed by Marlon Sanders, tells you how to market and sell product and services online</p>
  49.  
  50.           <table width="475" border="1" cellspacing="0" cellpadding="3">
  51.   <tr>
  52.     <th width="157" scope="col">Format</th>
  53.     <th width="157" scope="col">Free Trial</th>
  54.     <th width="157" scope="col">Cost</th>
  55.   </tr>
  56.   <tr>
  57.     <td>CD-Rom</td>
  58.     <td>Sorry</td>
  59.     <td>$79+S&amp;H</td>
  60.   </tr>
  61.   <tr>
  62.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=6">The Amazing Formula That SellsProducts Like Crazy</a></strong></td>
  63.   </tr>
  64. </table>
  65.  
  66.  
  67.  
  68.           <p><strong>Screenshot Description</strong></p>
  69.  
  70.           <p><img src="http://keithborom.com/marlon-sanders/images/gimme-my-money.gif" alt="gimme-my-money picture"/></p>
  71.           <p><strong>Gimme My Money Now!</strong>, designed by Marlon Sanders, teaches you how to really rake it in with crazy little two page web sites that you can create in a flash and host for pocket change!</p>
  72.  
  73.           <table width="475" border="1" cellspacing="0" cellpadding="3">
  74.   <tr>
  75.     <th width="157" scope="col">Format</th>
  76.     <th width="157" scope="col">Pages</th>
  77.     <th width="157" scope="col">Cost</th>
  78.   </tr>
  79.   <tr>
  80.     <td>CD-Rom + Printed Manual    </td>
  81.     <td>139</td>
  82.     <td>$299+S&amp;H</td>
  83.   </tr>
  84.   <tr>
  85.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=8">Gimme My Money Now</a></strong></td>
  86.   </tr>
  87. </table>
  88.  
  89. <p><strong>Product Description</strong></p>
  90.  
  91.          <p><img src="http://keithborom.com/marlon-sanders/images/push-button-letters.gif" alt="push button letters picture"/></p>
  92.          <p><strong>Push Button Letters Software</strong>, designed by Marlon Sanders, is a Sales Message Generation Software
  93. Finally, a product that compels you to be systematic and efficient.  The Sales Message Generation Software  forces one to be not only an organized writer, but also an orderly thinker, which  is a must in communicating copy effectively.</p>
  94.  
  95. <table width="475" border="1" cellspacing="0" cellpadding="3">
  96.   <tr>
  97.     <th width="157" scope="col">Format</th>
  98.     <th width="157" scope="col">Free Trial</th>
  99.     <th width="157" scope="col">Cost</th>
  100.   </tr>
  101.   <tr>
  102.     <td>Web-Based Application    </td>
  103.     <td>Sorry</td>
  104.     <td>$100+S&amp;H</td>
  105.   </tr>
  106.   <tr>
  107.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=7">Push Button Letters Software</a></strong></td>
  108.   </tr>
  109. </table>
  110.  
  111.  
  112.           <p><strong>Screenshot Description</strong></p>
  113.           <img src="http://keithborom.com/marlon-sanders/images/automation-secrets.gif" alt="automation secrets picture" width="140" height="140" />
  114.           <p><strong>Automated Secrets</strong>, designed by Marlon Sansers, 
  115.            is an end-to-end tutorial of active marketing techniques with an easy and painless walkthrough of the all the steps you need to know to automate your web business. </p>
  116.  
  117.            <table width="475" border="1" cellspacing="0" cellpadding="3">
  118.   <tr>
  119.     <th width="157" scope="col">Format</th>
  120.     <th width="157" scope="col">Free Trial</th>
  121.     <th width="157" scope="col">Cost</th>
  122.   </tr>
  123.   <tr>
  124.     <td>CD-Rom + Secrets</td>
  125.     <td>Sorry</td>
  126.     <td>$134.95+S&amp;H</td>
  127.   </tr>
  128.   <tr>
  129.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=12">Automated Secrets</a></strong></td>
  130.   </tr>
  131. </table>
  132.  
  133.           <p><strong>Screenshot Description</strong></p>
  134.           <img src="/marlon-sanders/adcopy1.gif" alt="adcopy1 secrets picture" width="80" height="80" />
  135.           <p><strong>Automated Secrets</strong>, designed by Marlon Sansers, 
  136.            is a slam dunk education in creating killer ad copy that reall works. It's a real eye opener for many people.</p>
  137.  
  138. <p>It walks you through a step-by-step formula. You will see now that many people have copied my formula in their products. That's the truth. </p>
  139.  
  140.            <table width="475" border="1" cellspacing="0" cellpadding="3">
  141.   <tr>
  142.     <th width="157" scope="col">Format</th>
  143.     <th width="157" scope="col">Free Trial</th>
  144.     <th width="157" scope="col">Cost</th>
  145.   </tr>
  146.   <tr>
  147.     <td>CD-Rom</td>
  148.     <td>Sorry</td>
  149.     <td>$203.95+S&amp;H</td>
  150.   </tr>
  151.   <tr>
  152.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=24">Amazing Ad Copy Secrets</a></strong></td>
  153.   </tr>
  154. </table>
  155. <div class="clearfooter"></div>
  156. <!--end of container div-->
  157.  
  158. <div class="footer">
  159. <p>Copyright (c) 2008 Borom, Inc. All Rights Reserved</p></td>
  160. </div><!--end of footer div-->
  161.  
  162.  
  163. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  164. </script>
  165. <script type="text/javascript">
  166. _uacct = "UA-3931747-5";
  167. urchinTracker();
  168. </script>
  169. </div>
  170. </body>
  171. </html>
  172.  
Any help is appreciated. I've been trying several things but no success yet.

Thanks
Apr 2 '08 #1
  • viewed: 2148
Share:
5 Replies
eWish
Expert 512MB
I would suggest you validate your code both CSS and HTML. Then go from there.

--Kevin
Apr 2 '08 #2
I would suggest you validate your code both CSS and HTML. Then go from there.

--Kevin
I had my site validated css and html. found error in index.html so here is the rework

Expand|Select|Wrap|Line Numbers
  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. <title>Marlon Sanders' Product Highlights</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  
  7. <style type="text/css">
  8. <!--
  9. @import url("style1.css");
  10. -->
  11. <!--[if lt IE 7]>
  12. <link rel="stylesheet" type="text/css" href="ie6.css" />
  13. <![endif]-->
  14.  
  15. </style>
  16. </head>
  17. <body>
  18. <div id="container">
  19.  
  20. <table width="99%" cellspacing="0" cellpadding="5">
  21.   <tr>
  22.     <td bgcolor="yellow" align="center">Keith&acute;s Marketing Tools
  23.     </td>
  24.   </tr>
  25. </table>
  26.  
  27. <div id="navigation">
  28. <ul>
  29. <li><a href="index.html">Home</a></li>
  30. <li><a href="about.html">About Me</a></li>
  31. <li><a href="contact.html">Contact</a></li>
  32. </ul>
  33. </div><!--end of site navigation-->
  34.  
  35.  
  36. <div id="header">
  37. <h1>Marlon Sanders</h1>
  38. </div><!--end of header div-->
  39.  
  40. <div id="bodycontent">
  41.  
  42. <p><img src="http://keithborom.com/marlon-sanders/images/marlon-sanders.jpg" width="90" height="118" align="left" alt="marlon sanders picture" /><strong>Marlon Sanders</strong> is a prolific internet marketer, with a dozen internet marketing products and services to his name. He uses his Master's degree in psychology to great effect by writing great ad copy.</p>
  43.  
  44. <p>Marlon&acute;s products and services include The Amazing Formula That Sells Products Like Crazy, Push Button Sales Letters, Associate Program Marketing Handbook, Gimme My Money Now, Amazing Ad Copy Secrets Revealed, Create Your Own Products In A Flash, How to Automate Your Web Business, The Web Site Power System, Web Business Operations Manual, Secrets of Speed Publicity, The Cash Like Clockwork System, Daily Stats Software, and The Ultimate Beginner&acute;s Guide.</p>
  45.     <br />
  46.           <p><strong>Screenshot Description</strong></p>
  47.                     <img src="http://keithborom.com/marlon-sanders/images/amazing-formula.gif" alt="amazing-formula picture" />
  48.                                                 <p><strong>The Amazing Formula That Sells Products Like Crazy</strong>, designed by Marlon Sanders, tells you how to market and sell product and services online</p>
  49.  
  50.           <table width="475" border="1" cellspacing="0" cellpadding="3">
  51.   <tr>
  52.     <th width="157" scope="col">Format</th>
  53.     <th width="157" scope="col">Free Trial</th>
  54.     <th width="157" scope="col">Cost</th>
  55.   </tr>
  56.   <tr>
  57.     <td>CD-Rom</td>
  58.     <td>Sorry</td>
  59.     <td>$79+S&amp;H</td>
  60.   </tr>
  61.   <tr>
  62.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=6">The Amazing Formula That SellsProducts Like Crazy</a></strong></td>
  63.   </tr>
  64. </table>
  65.  
  66.  
  67.  
  68.           <p><strong>Screenshot Description</strong></p>
  69.  
  70.           <p><img src="http://keithborom.com/marlon-sanders/images/gimme-my-money.gif" alt="gimme-my-money picture"/></p>
  71.           <p><strong>Gimme My Money Now!</strong>, designed by Marlon Sanders, teaches you how to really rake it in with crazy little two page web sites that you can create in a flash and host for pocket change!</p>
  72.  
  73.           <table width="475" border="1" cellspacing="0" cellpadding="3">
  74.   <tr>
  75.     <th width="157" scope="col">Format</th>
  76.     <th width="157" scope="col">Pages</th>
  77.     <th width="157" scope="col">Cost</th>
  78.   </tr>
  79.   <tr>
  80.     <td>CD-Rom + Printed Manual    </td>
  81.     <td>139</td>
  82.     <td>$299+S&amp;H</td>
  83.   </tr>
  84.   <tr>
  85.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=8">Gimme My Money Now</a></strong></td>
  86.   </tr>
  87. </table>
  88.  
  89. <p><strong>Product Description</strong></p>
  90.  
  91.          <p><img src="http://keithborom.com/marlon-sanders/images/push-button-letters.gif" alt="push button letters picture"/></p>
  92.          <p><strong>Push Button Letters Software</strong>, designed by Marlon Sanders, is a Sales Message Generation Software
  93. Finally, a product that compels you to be systematic and efficient.  The Sales Message Generation Software  forces one to be not only an organized writer, but also an orderly thinker, which  is a must in communicating copy effectively.</p>
  94.  
  95. <table width="475" border="1" cellspacing="0" cellpadding="3">
  96.   <tr>
  97.     <th width="157" scope="col">Format</th>
  98.     <th width="157" scope="col">Free Trial</th>
  99.     <th width="157" scope="col">Cost</th>
  100.   </tr>
  101.   <tr>
  102.     <td>Web-Based Application    </td>
  103.     <td>Sorry</td>
  104.     <td>$100+S&amp;H</td>
  105.   </tr>
  106.   <tr>
  107.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=7">Push Button Letters Software</a></strong></td>
  108.   </tr>
  109. </table>
  110.  
  111.  
  112.           <p><strong>Screenshot Description</strong></p>
  113.           <img src="http://keithborom.com/marlon-sanders/images/automation-secrets.gif" alt="automation secrets picture" width="140" height="140" />
  114.           <p><strong>Automated Secrets</strong>, designed by Marlon Sansers, 
  115.            is an end-to-end tutorial of active marketing techniques with an easy and painless walkthrough of the all the steps you need to know to automate your web business. </p>
  116.  
  117.            <table width="475" border="1" cellspacing="0" cellpadding="3">
  118.   <tr>
  119.     <th width="157" scope="col">Format</th>
  120.     <th width="157" scope="col">Free Trial</th>
  121.     <th width="157" scope="col">Cost</th>
  122.   </tr>
  123.   <tr>
  124.     <td>CD-Rom + Secrets</td>
  125.     <td>Sorry</td>
  126.     <td>$134.95+S&amp;H</td>
  127.   </tr>
  128.   <tr>
  129.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=12">Automated Secrets</a></strong></td>
  130.   </tr>
  131. </table>
  132.  
  133.           <p><strong>Screenshot Description</strong></p>
  134.           <img src="/marlon-sanders/adcopy1.gif" alt="adcopy1 secrets picture" width="80" height="80" />
  135.           <p><strong>Automated Secrets</strong>, designed by Marlon Sansers, 
  136.            is a slam dunk education in creating killer ad copy that reall works. It's a real eye opener for many people.</p>
  137.  
  138. <p>It walks you through a step-by-step formula. You will see now that many people have copied my formula in their products. That's the truth. </p>
  139.  
  140.            <table width="475" border="1" cellspacing="0" cellpadding="3">
  141.   <tr>
  142.     <th width="157" scope="col">Format</th>
  143.     <th width="157" scope="col">Free Trial</th>
  144.     <th width="157" scope="col">Cost</th>
  145.   </tr>
  146.   <tr>
  147.     <td>CD-Rom</td>
  148.     <td>Sorry</td>
  149.     <td>$203.95+S&amp;H</td>
  150.   </tr>
  151.   <tr>
  152.     <td colspan="3" align="right">Visit<strong><a href="http://keithborom.com/link.php?id=24">Amazing Ad Copy Secrets</a></strong></td>
  153.   </tr>
  154. </table>
  155.  
  156. <div class="footer">
  157. <p>Copyright (c) 2008 Borom, Inc. All Rights Reserved</p>
  158. </div><!--end of footer div-->
  159. </div><!--end of bodycontent div-->
  160. </div><!--end of container div-->
  161.  
  162.  
  163. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  164. </script>
  165. <script type="text/javascript">
  166. _uacct = "UA-3931747-5";
  167. urchinTracker();
  168. </script>
  169. </body>
  170. </html>
  171.  
I still have the border running thru the middle of my page instead of flowing all the way to the bottom of the page.

--> see http://keithborom.com/marlon-sanders
Apr 2 '08 #3
drhowarddrfine
Expert 4TB
Busy day for me today.

See if the elements this border is to contain are floated or absolutely positioned. Parent elements will not expand to contain these elements.
Apr 2 '08 #4
My container, which I believe is parent to my navigation, header, and bodycontent, shows relative positioning.

My navigation, header, and bodycontent were positioned on my page using absolute position and then moving elements around.

Tried a few things still without success.

Thanks
Apr 3 '08 #5
drhowarddrfine
Expert 4TB
Absolutely positioned elements are removed from the normal flow of a page but positioned relative to its relatively positioned element. However, to the parent element, the child does not exist.
Apr 3 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by John Draper | last post: by
23 posts views Thread by Bob Bedford | last post: by
3 posts views Thread by Robert Dell | last post: by
1 post views Thread by Keith Smith | last post: by
2 posts views Thread by Goober | last post: by
2 posts views Thread by tradmusic.com | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.