« Is it a bird? Is it a plane? No, it's Netscape! | Main | Google's new email discussion groups »
December 01, 2004
Div Overflow
On a site I a built for a customer, the gentleman wanted notes in a side bar. Granted that was easy enough to do... except for one page. The content in the sidebar exceeded the length of the content in the main area, and by extending the content below this area, it gave it an odd appearance.
I emailed the customer and asked if it would be acceptable to make this long content scrollable and placed in a fashion so it doesn't extend past the content in the main part of the page. He replied this would be fine with him.
iframes means including a different page, which is more work, increases load time, can cause problems with printing, navigation, and getting the page properly indexed by search engines.
I added a div overflow to an example template I showed you two weeks ago. You can see it here
http://www.homebusiness-websites.com/apple
The CSS for it look like this:
#overflow{
background-color: #FFFFFF;
width:160px;
height:125px;
overflow: auto;
}
...then I placed the scrollable content in between <div id="overflow"></div>
The CSS wasn't added to the print stylesheet, so that when you print the page, the whole column will print off to the right, just as it is when you look at the page in your browser.
Older browsers like Netscape 4.x, don't support the @import method for including stylesheet data, which makes the page backwards compatible. If you use your browser "view source" you will se this in the <head></head>:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<style type="text/css" media="screen">@import url("stylesheet.css"); </style>
Overall, it is a pretty handy way to include more data in a limited area.
In some cases you may wish to include a lot of data in a table and have it scrollable. Very few browsers support this though. See:
http://htmlhelp.com/test/tbody.html
What they don't tell you on the above link is you can hide this from browsers that don't support it with an alternate stylesheet like this:
<style type="text/css"><!-- @import url(hidefromie6.css) screen; --></style>
The above alternate stylesheet will be hidden from from all current MSIE browsers from 4.x and up, and Netscape 4.x browsers.
Posted by Steve MacLellan at December 1, 2004 06:44 AM
Trackback Pings
TrackBack URL for this entry:
http://www.homebusiness-websites.com/mt/mt-tb.cgi/56
Comments
Post a comment
Thanks for signing in, . Now you can comment. (sign out)
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)