scrollable content distorts layout cells!!

[noosh4]

1) Script Title: Scrollable content II

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm


3) Describe problem: I placed this script into a layout table using frontpage. At first it worked, but then I did something that now creates the following problem...

when viewing the page in either the preview window or after it is published online; even though the scrolling window is the correct size, it has distorted the size of the layout cell it is in. The cell is huge (to account for all the content that is "hidden"), and the actuall scrollable window is still correctly taking up only the very top. I have desperately checked for any space that could have been placed accidentally and I don't see anything. There are no other scripts running on the page. (there were, but I erased them, and it worked since.)

[jscheuer1]

How about a link to your live page? Anyways, sounds like the overflow isn't being hidden properly. Perhaps you removed overflow:hidden; from the script or, your layout may require additional overflow:hidden; styling added (this sometimes happens with certain types of markup). It may have nothing to do with this though so, a link to your problem page would be a real aid to us in assisting you.

[noosh4]

John-

here is the link to the live page. the colored laout cells should be the same height as on the home page. thanks so much for your input! I appreciate the help...


http://www.propertyinwestchester.com/history.htm

[jscheuer1]

That's a pretty messed up layout. However, I found that if I removed table1's height attribute and changed the height attribute for table8, table9 and table10 all from 100% to 420, it worked out pretty good (about as well as the home page).

<table cellpadding="0" cellspacing="0" width="1000" id="table1">
	<!-- MSTableType="layout" -->

and:

		<td valign="top" colspan="3">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="420" id="table8">
			<!-- MSCellFormattingTableID="5" -->

and:

		<td valign="top" colspan="6">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="420" id="table9">

			<!-- MSCellFormattingTableID="9" -->

and:

		<td valign="top" width="169">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="420" id="table10">
			<!-- MSCellFormattingTableID="6" -->

[noosh4]

Hey John,

Thanks, yes I see how I can fix it now. Can I ask, when you say "that's a pretty messed up layout" is that a reaction to how the cells were distorting or a reaction to how I am creating the page (my method)? I am new to this and your opinion is valuable...

thanks for the fix.

[jscheuer1]

Well, let me say up front that I do not intend to redesign your page for you but, if you want that, you may find some 'takers' in the HTML forum.

The layout has too many nested tables and is not viewable at 800x600 resolution or, not very pretty. Even at 1024x768, there is a horizontal scrollbar. At 1440x900 it's not so bad. That is due at least in part to using pixel units to define the width of the main table. Percentage widths are usually better.

Generally, layouts should rely less or not at all on tables and be more fluid so that content can wrap at lower resolutions. Another, less favorable way, of dealing with various resolutions is to pick a width that will fit in all of the likely or target resolutions and confine your content to that portion of the page. This is usually either left aligned or centered.

The use of 100% heights is also a poor choice as, it is ambiguous in many browsers.

These are just some general guidelines/observations and opinions do differ. The bottom line is that you may design your page however you like but, if you use a fluid design that validates*, it generally is easier for others to help you with it and usually less likely that it will have problems to begin with.


*CSS Validator:
http://jigsaw.w3.org/css-validator/
HTML Validator:
http://validator.w3.org/