 |  |  |  |  |  |  |  |
Content Breaking thru Borders
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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:
The CSS:
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)
The CSS:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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.
•
•
•
•
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.
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
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.
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.
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
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.
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.
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.
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.
I favor the "all containing box" model myself, since logically, nothing should exist outside of it.
 |
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: How to have the div layer center on any browser?
- Next Thread: help with this hiding text example Javascript
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
