By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,953 Members | 1,438 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,953 IT Pros & Developers. It's quick & easy.

Having problem with border around html page

P: 3
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
Share this Question
Share on Google+
5 Replies


eWish
Expert 100+
P: 971
I would suggest you validate your code both CSS and HTML. Then go from there.

--Kevin
Apr 2 '08 #2

P: 3
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 5K+
P: 7,435
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

P: 3
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 5K+
P: 7,435
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.