944,076 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Nov 4th, 2006
0

Content Breaking thru Borders

Expand Post »
Hi all,

I am having a problem with the contents of my page breaking thru the bottom border of my page. It looks fine in Explorer (that's a turn-about, eh?) but at 800 x 600 or lower, in Firefox it breaks.
Anything I am overlooking?
Thanks

The URL:
http://www.chocolatelover.net/
The HTML:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  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>Chocolate Lover</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta name="Keywords" content="chocolate,recipe,dessert,desserts,cookie,cookies,coco,cocoa,cake,brownie,pie,pies,sweet,valentine,boyfriend,girlfriend,love,gift,gifts,romance,romantic,chocolate addiction,buy chocolate,purchaes chocolate,chocolate sales,godiva,godiva chocolate" />
  7. <meta name="Description" content="chocolate recipes for cookies, cakes, brownies, pies, etc. Links to other chocolate-related sites. Chocolate sales." />
  8. <meta name="copyright" content="2000" />
  9. <meta name="author" content="Rick Shrum" />
  10. <meta name="revisit-after" content="1 week" />
  11. <meta name="Robot" content="ALL" />
  12. <meta name="rating" content="General" />
  13. <meta name="DC.Title" content="Chocolate Lover" />
  14. <meta name="DC.Creator" content="Rick Shrum" />
  15. <meta name="Description" content="chocolate recipes for cookies, cakes, brownies, pies, etc. Links to other chocolate-related sites. Chocolate sales." />
  16.  
  17. <link rel="stylesheet" href="style.css" type="text/css" />
  18. <!--[if lt IE 7]><script src="pngfix.js" type="text/javascript"></script><![endif]-->
  19. </head>
  20.  
  21.  
  22.  
  23.  
  24. <body>
  25. <div style="margin-bottom:3%;">
  26. <div align="center" style="margin-top:10px;">
  27. <script type="text/javascript" language="javascript" src="http://www.anrdoezrs.net/placeholder-578035?target=_blank&mouseover=N"></script>
  28. </div>
  29. <div align="center" style="margin:0 auto;">
  30.  
  31. <img src="choclvr.gif" style="width:443px;height:40px; padding-top:20px;" /> <br />
  32. <img src="swirl.gif" width="359" height="58" align="absbottom" />
  33. </div>
  34. <br />
  35. <div class="menu" style="float:left;width:15%; padding:0px 15px 0px 15px; border:0px; padding-bottom:5px;">
  36. <p>
  37. <a href="index.html">
  38. <img src="small-kiss.png" width="22" height="22" align="texttop" alt=":-*" border="0" /></a>
  39. <a href="index.html">Home</a>
  40. </p>
  41. <p>
  42. <a href="brownies.html">
  43. <img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" border="0" /></a>
  44. <a href="brownies.html">Brownies</a>
  45. </p>
  46.  
  47. <p>
  48. <a href="cakes.html">
  49. <img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" border="0" /></a>
  50.  
  51. <a href="cakes.html">Cakes</a>
  52. </p>
  53.  
  54. <p>
  55. <a href="candy.html"><img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" border="0" /></a>
  56.  
  57. <a href="candy.html">Candy</a>
  58. </p>
  59.  
  60. <p>
  61. <a href="cookies.html"><img src="small-kiss.png" width="22" height="23" alt=":-*" align="texttop" border="0" /></a>
  62.  
  63. <a href="cookies.html">Cookies</a>
  64. </p>
  65.  
  66. <p>
  67. <a href="pies.html">
  68. <img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" border="0" /></a>
  69. <a href="pies.html">Pies</a>
  70. </p>
  71.  
  72. <p>
  73. <a href="various.html"><img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" border="0" /></a>
  74. <a href="various.html">Various</a>
  75. </p>
  76.  
  77. <p>
  78. <img src="small-kiss.png" width="22" height="23" align="texttop" alt=":-*" />
  79. <a href="links.html">Links</a>
  80. </p>
  81. </div>
  82. <div style="float:left;margin:0 auto;width:70%;background-image:url(darkchoc.gif); border: 4px outset #3b2525;padding:15px;font-family:'comic sans ms';font-size:1em;color:#ffffff; line-height:150%;">
  83. <!--<table border="3" background="darkchoc.gif" bordercolorlight="#B75B00" bordercolordark="#996633" bgcolor="#663333" bordercolor="#5B2E00" cellpadding="2" cellspacing="2" align="center" hspace="0" style="width:75%;margin-right:15%;">-->
  84.  
  85. <p>
  86. <span style="font-size:2em;">C</span>hocolate...<br />
  87. No other food invokes such intense reactions as does this cocoa-derived
  88. fare.<br />
  89. This passion for the stuff extends way past the gastromomical aspects and
  90. ventures into the psychological realm. &quot;Sensuous&quot;, &quot;decadent&quot;,
  91. &amp; &quot;sinful&quot; are just a few of the adjectives used to describe
  92. chocolate. Are we eating a candy bar here or engaging in an illicit affair?
  93. <br />
  94. Although chocolate has not yet been targeted by D.A.R.E., people <i>do </i>seem
  95. to prone to developing a compulsion for it. While not dismissing the appeal
  96. of other flavors, there are no wide-spread accounts of vanilla addiction...no
  97. one leaves the snug confines of their home at midnight to satisfy a craving
  98. for butterscotch.<br />
  99. Nope, there is nothing quite like chocolate. I hope you also find that there
  100. is nothing quite like this website that is dedicated to this wonderous substance.
  101. Please come back here again and again because there will always be new things
  102. added. Recipes, links, information...you will find it all here in this,
  103. the Sweetest Place in Cyberspace!
  104. </p>
  105. </div>
  106. <div style="clear:both;margin:0 auto; text-align:center"><br />
  107. <br />
  108.  
  109. <img src="chocline.gif" width="33%" height="15" />
  110. <br />
  111. <img src="chocline.gif" width="16%" height="15" />
  112. </div>
  113. <p align="center"><img src="swirl.gif" width="359" height="58" /> </p>
  114. <p></p>
  115. <div style="width:5px;height:5px;margin:0 auto; text-align:center; overflow:hidden;">
  116. <a target="_top" href="http://extremetracking.com/open?login=rik408">
  117. <img src="http://t1.extreme-dm.com/i.gif" height="38"
  118. border="0" width="41" alt="" /></a><script language="JavaScript1.2" type="text/javascript"><!--
  119. EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
  120. EXb=EXs.colorDepth:EXb=EXs.pixelDepth;//-->
  121. </script><script language="JavaScript" type="text/javascript"><!--
  122. EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
  123. EXd.write("<img src=\"http://v0.extreme-dm.com",
  124. "/0.gif?tag=rik408&j=y&srw="+EXw+"&srb="+EXb+"&",
  125. "l="+escape(EXd.referrer)+"\" height=1 width=1>");//-->
  126. </script><noscript><img height="1" width="1" alt=""
  127. src="http://v0.extreme-dm.com/0.gif?tag=rik408&amp;j=n" /></noscript>
  128. </div>
  129. </div>
  130. </body>
  131. </html>

The CSS:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. html
  2. {
  3. height:100%;
  4. border-spacing:
  5. }
  6.  
  7. body
  8. {
  9. background-color:#ffffff;
  10. background-image:url(spreckles.gif);
  11. background-attachment:fixed;
  12. font-family:'comic sans ms',cursive;
  13. color:#6B4229;
  14. border: 3px ridge #8b4513;
  15. height:100%;
  16. }
  17.  
  18. .menu
  19. {
  20. font-family:'comic sans ms';
  21. font-size:12pt;
  22. color:#B6637B;
  23. font-weight:600;
  24. vertical-align:middle;
  25. }
  26.  
  27. .menu img
  28. {
  29. padding-right:5px;
  30. }
  31.  
  32. .menu a:link
  33. {
  34. text-decoration:none;
  35. color:#c26a6a;
  36. font-weight:600;
  37. }
  38.  
  39. .menu a:visited
  40. {
  41. text-decoration:none;
  42. color:#c28c6a;
  43. }
  44.  
  45. .menu a:hover
  46. {
  47. text-decoration:underline overline;
  48. color:#61a55a;
  49. }
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006
Nov 4th, 2006
0

Re: Content Breaking thru Borders

Thankf for pasting all your code. I'll look at it.
Reputation Points: 12
Solved Threads: 3
Unverified User
Godfear1 is offline Offline
46 posts
since Oct 2006
Nov 4th, 2006
0

Re: Content Breaking thru Borders

Hey, thanks much!
I'm pretty sure its something small I am just missing.
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006
Nov 4th, 2006
0

Re: Content Breaking thru Borders

But, where are you expecting the content to go? With small enough browser window, everything breaks. I've looked with both FF and IE and I'm not sure I see a problem.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Nov 4th, 2006
0

Re: Content Breaking thru Borders

Click to Expand / Collapse  Quote originally posted by tgreer ...
But, where are you expecting the content to go? With small enough browser window, everything breaks. I've looked with both FF and IE and I'm not sure I see a problem.
Hi Tgear,

Thanks for responding.
I would like for the integrity of the page to remain at down to 800 X 600.
Now, it is breaking at 1024 x 768.
What resolution were you viewing it at?

Rick
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006
Nov 4th, 2006
0

Re: Content Breaking thru Borders

I think I see what you mean... you've set a border on the body element, and your page contents are breaking through that bottom border. Unfortunately, it isn't clear how the "body" element should be treated in the current HTML specifications, so each browser does things differently. Instead of styling your body tag, put all of your page's contents in an DIV, and style the DIV. That should resolve the issue.

P.S. You've also get both your menu DIV and your main DIV floated left. That won't work. Remove the "float: left" from the DIV with all your text.
Last edited by tgreer; Nov 4th, 2006 at 10:46 pm.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Nov 4th, 2006
0

Re: Content Breaking thru Borders

Know what...that worked! :cheesy:
Now, even at down to 640 x 480 the content does not break thru the bottom border.
Seems to me tho that the body (and especially the html where I also tried defining the border) tags should represent the absolute outer limit for content. I downloaded Firefox 2.0 in the hopes that the problem would be corrected, but alas, it still remained.
No matter tho, since you came up with the solution.
Here's the page now:

http://www.chocolatelover.net/

Now, on to converting all the otrher pages at that site from tables to css!

Thanks again...and thanks also to
Godfear1 who generously offered to look into the problem


Rick
Last edited by tgreer; Nov 4th, 2006 at 11:11 pm. Reason: Removed unnecessary quote block.
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006
Nov 4th, 2006
0

Re: Content Breaking thru Borders

Many people agree, that the "body" tag should be treated as a top-level block element: the "box" everything is in. Another viewpoint is that it is a syntactical (rather than structural) element, and so doesn't have any "dimensions" in and of itself.

Since there is no agreement, the solution is treat the body element like an "open" and "close" statement that has nothing to do with position, size, etc. and to either put everything within a table, or a DIV.
Last edited by tgreer; Nov 4th, 2006 at 11:14 pm.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Nov 4th, 2006
0

Re: Content Breaking thru Borders

I guess its whether you view the body as an indestructible box that nothing can break out of, or as a sink, that should contain everything, but is subject to overflowing (ok, not the besst analogy! lol).

I favor the "all containing box" model myself, since logically, nothing should exist outside of it.
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006
Nov 5th, 2006
0

Re: Content Breaking thru Borders

Hey it looks great. That was a pretty easy solution. I don't think I would have picked that one up. Great job tgreer.
Reputation Points: 12
Solved Threads: 3
Unverified User
Godfear1 is offline Offline
46 posts
since Oct 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: How to have the div layer center on any browser?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: help with this hiding text example Javascript





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC