CSS Flowing Problems

[toad78]

I have a page that I'm having trouble getting it flow vertically appropriately. The page is at http://vissergazette.netfirms.com/molding/index.html

My CSS is as follows:

body, html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

body>html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

#body_center {
	text-align: center;
}

#body_on {
	position: relative;
}

#wrapper {
	width: 987px;
	height: 845px;
	margin: 0 auto;
	background: #A9CED6;
	z-index: 10;
	position: relative;
	padding-top: 3px;
}

#maincontent {
	width: 951px;
	margin: 0 1em 0 1em;
	height: 775px;
	background-color: #FFF;
	border: 1px solid #979797;
	z-index: 10;
	float: left;
}


#topnav {
	margin: 10px 10px 0 0;
	padding: 0;
}

#topnav li {
	font: normal 11px/22px Verdana;
	color: #0000CC;
	padding: 0;
	margin: 0;
	list-style: none;
	float: right;
	height: 22px;
	line-height: 22px;
	white-space: nowrap;
	background: #A9CED6 url(../images/book-tab-orange.jpg) no-repeat;
}

#topnav a {
	width: 100px;
	font-weight: normal;
	text-decoration: none;
	display: inline;
	float: left;
	color: #FFF;
	background: #A9CED6 url(../images/book-tab-orange.jpg) no-repeat;
}

#topnav a:hover {
	background: url(../images/booktab-green.jpg) no-repeat;
	font-weight: bold;
	text-transform: capitalize;
}

#topnav a:visited  {
	text-transform: capitalize;
}

#calendar {
	width: 325px;
	margin-top: 8px;
	float: left;
	z-index: 50;
	height: 655px;
	margin-left: 5px;
	display: inline;
}

#calendar p {
	text-transform: none;
	margin: 3px 5px;
	text-indent: 3px;
}

#calendar img.title, #calendar table, td.outline, #calendar tr, #calendar td.title {
padding: 0;
margin: 0;
}

#calendar img.title {
border-top: 1px solid #7B5411;
}

#calendar table, td.outline {
vertical-align: top;
}

#calendar table.items {
width: 303px;
margin: 0 0 5px 0;
padding: 0;
color: #5A3711;
border-left: 1px solid #7B5411;
border-right: 1px solid #7B5411;
border-bottom: 1px solid #7B5411;
background-color: #F9F4EF;
}

#calendar th {
text-align: left;
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
border-top: 1px solid #7A5214;
border-bottom: 1px solid #7A5214;
vertical-align: bottom;
background-color: #E4B98B;
padding: 3px 0 3px 3px;
}

#calendar tr.color {
background-color: #FFD19E;
}

#calendar tr.cellcolor {
background-color: #FDE4C9;
}

#calendar td {
	font: normal 11px Arial, Helvetica, sans-serif;
	text-transform: capitalize;
	vertical-align: top;
	padding: 3px 0 3px 3px;
	margin: 0;
	text-align: left;
}

#calendar td.days {
padding-left: 75px;
}

#calendar td.location {
text-align: center;
padding-left: 0;
}

#calendar td img.spacer {
margin: 0 0 0 35px;
}

#calendar .time {
	padding-left: 51px;
	margin: 0;
	text-align: left;
}

#calendar a:link, #calendar a:visited, #calendar a:hover, #calendar a:active {
	color: #633D11;
	text-transform: capitalize;
}

.weeklink {
	text-transform: lowercase;
}

#top {
	z-index: 50;
	margin-top: 10px;
	margin-left: 10px;
	width: 600px;
	height: 687px;
	float: left;
}

.logo {
	padding: 0;
	width: 280px;
	margin: 0 10px 10px 0;
	float: left;
}

.slideshow {
	float: left;
	width: 300px;
	padding: 0;
	background-color: #FFF;
	height: 198px;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-left: 9px;
}

.slogan, .border, .border2, .border3 {
	margin-left: 0;
	float: left;
	width: 599px;
	padding: 0;
}

.slogan {
	height: 30px;
	line-height: 30px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 0;
}

.border {
	height: 2px;
	margin-top: 2px;
	float: left;
}

.border2 {
	height: 2px;
	margin-bottom: 3px;
}

.border3 {
	height: 5px;
	margin-bottom: 5px;
}

#info {
	position: absolute;
	top: 289px;
	height: 390px;
	width: 602px;
	z-index: 50;
	float: left;
	margin-left: 10px;
}


#columns {
	float: left;
	margin: 10px 0 0 10px;
	width: 600px;
	height: auto;
}

#col1 {
	background-color: #E9F2BD;
}

#col1 .hilite {
	background-color: #656E38;
	font-weight: bold;
	color: #FFF;
	padding: 5px;
}

#col1, #col2 {
	width: 292px;
	height: 472px;
	padding-bottom: 10px;
	float: left;
	margin-top: 5px;
	border-left: 2px solid #C0C0C0;
	border-bottom: 2px solid #C0C0C0;
}

#col2 {
	background-color: #FFEBA4;
	margin-left: 10px;
}

#col1 a:link, #col2 a:link {
	font-weight: normal;
}

#topnav a:hover {
	font-weight: bold;
}

#col1 h1 {
color: #545B23;
}

#col2 h1 {
color: #7A5214;
}

#col1 h1, #col2 h1 {
font: bold 16px/18px Verdana, Arial, Helvetica, sans-serif;
}

#col1 h1, #col2 h1, #col1 p, #col2 p {
	margin: 10px;
	text-align: left;
}

#col1 p, #col2 p {
font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
text-indent: 5px;
}

#col1 p, #col1 ul {
color: #3A3F18;
}

#col1 ul {
	font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
	padding-right: 15px;
	list-style-image: url(../images/leaf.gif);
	text-align: left;
}

#col1 li {
list-style-position: outside;
padding-bottom: 3px;
padding-left: 0;
}

#col2 p {
	color: #623506;
}

#col1 a, #col1 a:link {
	color: #3A3F18;
}
#col2 a:link, #col2 a:hover, #col2 a:visited, #col2 a:active {
	text-transform: lowercase;
	color: #623506;
}

img.pic {
float: left;
padding: 5px;
margin-right: 8px;
margin-bottom: 5px;
border: 1px solid #633D11;
}

#copyright {
	margin: 2px 0;
	position: relative;
}

#copyright p {
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
	display: block;
}

#copyright p a:active, #copyright p a:link, #copyright a:visited {
	text-decoration: underline;
	font-weight: normal;
	color: #5A3711;
}

What do I want? Well, first off, I would like for the columns to be flowing with the borders around them, not over them. That goes for the table on right and the article columns on the left. Whenever I tested them using more information, they just go over their encased divs plus over the border.

Does anyone have any solutions to my problem? I've tested a variety of ways, from floating, setting relativity to certain columns, and creating background images for the borders, but I get inconsistent results.

I would appreciate any expertise you may offer.

Heather

[wyrd33]

Let's see if any of this helps for some of the IE6 problems:

- Validate the page. Fix all validation errors (there are 29).
- Remove HTML comments, they cause errors in IE6.
- On any floated content with margins, add the declaration display: inline;. It will fix the double margin bug you're probably experiencing.

[Paul O'B]

Also remove the heights from the columns because the content is greater than the height you set. You can't set a height and then expect it to grow when content is greater (although IE will do this other browsers won't). You could use a min-height if you wanted a min height but IE6 doesn't understand min-height (see the faq on min-height for a solution).

When you've fixed the issues mentioned above then post back and we'll tackle what's left.

[wyrd33]

Alternatively he can use overflow: auto; if he wants the boxes a specific height for design reasons.

For min-height in IE6 use;
* html element { height: 400px; } /* or whatever min-height you want */

IE6 treats height as a min-height.

[ydesignsx™]

Try using height:100%; on these styles.

#wrapper {
	width: 987px;
	height: 845px;
	margin: 0 auto;
	background: #A9CED6;
	z-index: 10;
	position: relative;
	padding-top: 3px;
}

#maincontent {
	width: 951px;
	margin: 0 1em 0 1em;
	height: 775px;
	background-color: #FFF;
	border: 1px solid #979797;
	z-index: 10;
	float: left;
}

#col1, #col2 {
	width: 292px;
	height: 472px;
	padding-bottom: 10px;
	float: left;
	margin-top: 5px;
	border-left: 2px solid #C0C0C0;
	border-bottom: 2px solid #C0C0C0;
}

[Paul O'B]

Try using height:100%; on these styles.

No, I'm afraid you can't do that as the same reasons apply as already mentioned.

If you apply a height (percentage or otherwise) then the good browsers obeys that height and you get no more than what you specified. The height:100% equates to the same as saying height: xxpx because the height is based on the height of its parent. 100% height only works when the parent has a known height anyway. It does not work on parents that are height :auto and it will also collapse to height:auto.

You would need to use min-height on the parent but this has the effect of the child's height:100% collapsing to height:auto because you cannot set a height based on an auto height element which min-height effectively is.

There are very few instances where height:100% is usable in a normal layout (read the faq on 100% height for more info).

Alternatively he can use overflow: auto; if he wants the boxes a specific height for design reasons.

Yes of course thats an option if you don't mind the scrollbars on the element itself. It can be useful for keeping things at a set size.

[ydesignsx™]

No, I'm afraid you can't do that as the same reasons apply as already mentioned.

If you apply a height (percentage or otherwise) then the good browsers obeys that height and you get no more than what you specified. The height:100% equates to the same as saying height: xxpx because the height is based on the height of its parent. 100% height only works when the parent has a known height anyway. It does not work on parents that are height :auto and it will also collapse to height:auto.

You would need to use min-height on the parent but this has the effect of the child's height:100% collapsing to height:auto because you cannot set a height based on an auto height element which min-height effectively is.

There are very few instances where height:100% is usable in a normal layout (read the faq on 100% height for more info).



Yes of course thats an option if you don't mind the scrollbars on the element itself. It can be useful for keeping things at a set size.

I see, I think.

I played around with the fluid heights to see if fluid height. I used XHTML Strict Doctype and didn't validate the code before implementing the height changes. I tested this using in FF2, IE7 and IE6. In FF your overflow issue was resolved using fluid height, but some other things were broken like the blue wrapper and the two little boxes above col1 and col2. Is this the issue you're referring?

In IE7 the overflow issue is solved using fluid height and everything looks as your original link submission. In IE6 there isn't an overflow issue using either fixed or fluid heights, but there is a width issue with the floating tables/div pushing to the next line when using both fixed and fluid heights.

Try making the height of all your divs with height defined long enough to fit the longest height div. The only draw back is that the column will get longer as data is entered and your prblem will exist all over again.

I also recommend creating a separate style sheet for IE6 using a conditional statement to handle the height, width and floating issues in IE6. There was also some weird overflow in IE6 that I am unfamiliar. It seems as there an "a" is repeating from the last yada. I changed it to "... sing sing a song sing out loud" and the last two characters, "ud", overflowed on to the next line.

[brdnwi]

Just by looking at it I believe it's the height of your divs. It looks like they have a defined height. Unset the height value. You won't need it. Setting it to 100% won't work either.

As well, TEST THIS SITE IN IE6. In that browser your whole right column with the class schedule has fallen below the left column. To fix that I believe you'll have to shorten the width of your right column. The only good news with IE6 is that your text is flowing with the columns, but that's what IE does.

always test in FF and IE. NS and Opera usually follow FF quite well. IE6 is the devil.

[Paul O'B]

Just by looking at it I believe it's the height of your divs. It looks like they have a defined height. Unset the height value. You won't need it. Setting it to 100% won't work either.

Isn't that what I already said lol

It seems as there an "a" is repeating from the last yada

Wyrd33 offered the solution to this in his post as this bug is often associated with html comments and floats. Read more about it here.

Hope that helps

[toad78]

Also remove the heights from the columns because the content is greater than the height you set. You can't set a height and then expect it to grow when content is greater (although IE will do this other browsers won't). You could use a min-height if you wanted a min height but IE6 doesn't understand min-height (see the faq on min-height for a solution).

When you've fixed the issues mentioned above then post back and we'll tackle what's left.

Thank you for the advice. I did exactly what you recommended, but now all of my borders are gone. I do agree that in IE6 my table winds up on the underside, even though I don't have a way of seeing that (I had someone else look at it on their browser). I shall change the width of that to correlate to the width (I thought by my calculations that it would've fit into the width of my content, guess not). My footer and copyright also wind up in an odd position, not sure what I did wrong there.

I have updated the design with changes on: http://vissergazette.netfirms.com/molding/index.html and I've posted my CSS code here:

/* CSS Document for Primary Designs */
body, html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

body>html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

#body_center {
	text-align: center;
}

#body_on {
	position: relative;
}

#wrapper {
	width: 987px;
	margin: 0 auto;
	background: #A9CED6;
	z-index: 10;
	position: relative;
	padding-top: 3px;
}

#maincontent {
	width: 951px;
	margin: 0 1em 0 1em;
	background-color: #FFF;
	border: 1px solid #979797;
	display: inline;
	float: left;
}


#topnav {
	margin: 10px 10px 0 0;
	padding: 0;
}

#topnav li {
	font: normal 11px/22px Verdana;
	color: #0000CC;
	padding: 0;
	margin: 0;
	list-style: none;
	float: right;
	height: 22px;
	line-height: 22px;
	white-space: nowrap;
	background: #A9CED6 url(../images/book-tab-orange.jpg) no-repeat;
}

#topnav a {
	width: 100px;
	font-weight: normal;
	text-decoration: none;
	float: left;
	color: #FFF;
	background: #A9CED6 url(../images/book-tab-orange.jpg) no-repeat;
}

#topnav a:hover {
	background: url(../images/booktab-green.jpg) no-repeat;
	font-weight: bold;
	text-transform: capitalize;
}

#topnav a:visited  {
	text-transform: capitalize;
}

#calendar {
	width: 325px;
	margin-top: 8px;
	float: left;
	margin-left: 5px;
	display: inline;
}

#calendar p {
	text-transform: none;
	margin: 3px 5px;
	text-indent: 3px;
}

#calendar img.title, #calendar table, td.outline, #calendar tr, #calendar td.title {
padding: 0;
margin: 0;
}

#calendar img.title {
border-top: 1px solid #7B5411;
}

#calendar table, td.outline {
vertical-align: top;
}

#calendar table.items {
width: 303px;
margin: 0 0 5px 0;
padding: 0;
color: #5A3711;
border-left: 1px solid #7B5411;
border-right: 1px solid #7B5411;
border-bottom: 1px solid #7B5411;
background-color: #F9F4EF;
}

#calendar th {
text-align: left;
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
border-top: 1px solid #7A5214;
border-bottom: 1px solid #7A5214;
vertical-align: bottom;
background-color: #E4B98B;
padding: 3px 0 3px 3px;
}

#calendar tr.color {
background-color: #FFD19E;
}

#calendar tr.cellcolor {
background-color: #FDE4C9;
}

#calendar td {
	font: normal 11px Arial, Helvetica, sans-serif;
	text-transform: capitalize;
	vertical-align: top;
	padding: 3px 0 3px 3px;
	margin: 0;
	text-align: left;
}

#calendar td.days {
padding-left: 75px;
}

#calendar td.location {
text-align: center;
padding-left: 0;
}

#calendar td img.spacer {
margin: 0 0 0 35px;
}

#calendar .time {
	padding-left: 51px;
	margin: 0;
	text-align: left;
}

#calendar a:link, #calendar a:visited, #calendar a:hover, #calendar a:active {
	color: #633D11;
	text-transform: capitalize;
}

.weeklink {
	text-transform: lowercase;
}

#top {
	z-index: 50;
	margin-top: 10px;
	margin-left: 10px;
	width: 600px;
	display: inline;
	float: left;
}

.logo {
	padding: 0;
	width: 280px;
	margin: 0 10px 10px 0;
	display: inline;
	float: left;
}

.slideshow {
	float: left;
	width: 300px;
	padding: 0;
	background-color: #FFF;
	height: 198px;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-left: 9px;
}

.slogan, .border, .border2, .border3 {
	margin-left: 0;
	float: left;
	width: 599px;
	padding: 0;
}

.slogan {
	height: 30px;
	line-height: 30px;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 0;
}

.border {
	height: 2px;
	margin-top: 2px;
	float: left;
}

.border2 {
	height: 2px;
	margin-bottom: 3px;
}

.border3 {
	height: 5px;
	margin-bottom: 5px;
}

#info {
	position: absolute;
	top: 289px;
	width: 602px;
	z-index: 50;
	float: left;
	margin-left: 10px;
}


#columns {
	float: left;
	display: inline;
	margin: 10px 0 0 10px;
	width: 600px;
}

#col1 {
	background-color: #E9F2BD;
}

#col1 .hilite {
	background-color: #656E38;
	font-weight: bold;
	color: #FFF;
	padding: 5px;
}

#col1, #col2 {
	width: 292px;
	padding-bottom: 10px;
	float: left;
	display: inline;
	margin-top: 5px;
	border-left: 2px solid #C0C0C0;
	border-bottom: 2px solid #C0C0C0;
}

#col2 {
	background-color: #FFEBA4;
	margin-left: 10px;
}

#col1 a:link, #col2 a:link {
	font-weight: normal;
}

#topnav a:hover {
	font-weight: bold;
}

#col1 h1 {
color: #545B23;
}

#col2 h1 {
color: #7A5214;
}

#col1 h1, #col2 h1 {
font: bold 16px/18px Verdana, Arial, Helvetica, sans-serif;
}

#col1 h1, #col2 h1, #col1 p, #col2 p {
	margin: 10px;
	text-align: left;
}

#col1 p, #col2 p {
font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
text-indent: 5px;
}

#col1 p, #col1 ul {
color: #3A3F18;
}

#col1 ul {
	font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
	padding-right: 15px;
	list-style-image: url(../images/leaf.gif);
	text-align: left;
}

#col1 li {
list-style-position: outside;
padding-bottom: 3px;
padding-left: 0;
}

#col2 p {
	color: #623506;
}

#col1 a, #col1 a:link {
	color: #3A3F18;
}
#col2 a:link, #col2 a:hover, #col2 a:visited, #col2 a:active {
	text-transform: lowercase;
	color: #623506;
}

img.pic {
float: left;
padding: 5px;
margin-right: 8px;
margin-bottom: 5px;
border: 1px solid #633D11;
}

#copyright {
	margin: 2px 0;
	position: relative;
}

#copyright p {
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
	display: block;
}

#copyright p a:active, #copyright p a:link, #copyright a:visited {
	text-decoration: underline;
	font-weight: normal;
	color: #5A3711;
}

[Paul O'B]

Hi,

Which borders are we looking for specifically (to save time hunting for them)?

Also see this stylerule is nonsense

body>html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

Html is the root element and therefore cannot be a child of the body. Just delete that stylerule as it's doing nothing and may only trip up older browsers.

As a rule of thumb the only rules you apply to html should be to remove the margins and padding. Apply all the rest of the rules to the body.

e.g.Do it like this:

html, body {
padding: 0;
margin:0;
}
body{
padding:10px 0 0 0;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

In your example you are applying all the styles to the html element and then applying then to the body element as well. This could possible mean that you are adding a 10px margin to html and then another 10px margin to the body element resulting in possibly in a 20px margin inn browsers that don't understand margin collapse.

You are better of using a padding-top 10px on the body anyway instead of a margin if you want some space at the top otherwise you may run into margin collapse issues.

[Paul O'B]

Hi,

If by "borders" you mean the background color of your wrapper element that isn't showing in Firefox then it's because you haven't cleared the floats.

Floats are removed from the flow and therefore an element that only holds floats (such as your wrapper) will in fact hold nothing and collapse to zero. You need to use a clearing mechanism after the float and before the closing div of #wrapper to allow it to extend around the float. See the FAQ on floats for a fuller understanding.

A quick fix would be to use overflow:auto on #wrapper which will force the issue.

#wrapper{overflow:auto}

You still have the duplicate character bug in IE and it will need this fix.

* html #col2{margin-right:-3px}

If you wanted both those columns to be equal height you would need to use a background image repeated on a shared parent of both columns to create a "faux column" effect.

[toad78]

[QUOTE=Paul O'B;3715445]Hi,

Which borders are we looking for specifically (to save time hunting for them)?

Also see this stylerule is nonsense

body>html {
padding: 0;
margin: 10px auto 0 auto;
background-color: #FFF;
color: #5A3711;
font: normal 11/14px Arial, Helvetica, sans-serif;
text-align: center;
}

The reason why I have the above code is for Opera Browsers. I was advised that this would be necessary. You would argue this point?

Yes, I am referring to the wrapper background (blue color). Would it be easier if I just used background images around the content in their own div containers so they would flow with the content as it grows?

I will try to add background images to my colored columns so they'd be equal lengths (that's probably visually better to go with).

Thank you!
Toad78

[Paul O'B]

The reason why I have the above code is for Opera Browsers. I was advised that this would be necessary. You would argue this point?

Vehemently

No browsers are interpreting that code. (body>html) - html is the root element and cannot be a child of the body. It is utter nonsense

Whoever told you to add it does not know what they are talking about. Or alternatively you have misunderstood them completely.

You would have needed to use html>body {styles etc......} before any browser would look at it. But you have already defined styles for the html and body elements anyway so why repeat them.

Yes, I am referring to the wrapper background (blue color). Would it be easier if I just used background images around the content in their own div containers so they would flow with the content as it grows?

I have given you the solution for making the background extend around your content. This is a float clearing issue which you don't seem to be comprehending so I suggest you read the FAQ on floats so that it all makes sense

I will try to add background images to my colored columns so they'd be equal lengths (that's probably visually better to go with).

The background image isn't applied to the columns then selves as that would make no difference. You must apply the background image to the parent that holds both columns because that ius the only way to get full height for both.

Here is an example to make it clearer.

http://www.pmob.co.uk/temp/three-equal-divs-bg.htm

Hope that makes sense

[toad78]

Vehemently

http://www.pmob.co.uk/temp/three-equal-divs-bg.htm

Hope that makes sense

Thank you,
Toad78
Newbie CSS designer

[ydesignsx™]

Isn't that what I already said lol



Wyrd33 offered the solution to this in his post as this bug is often associated with html comments and floats. Read more about it here.

Hope that helps

Ah I missed that. Thanks, I never seen that bug.

[toad78]

Vehemently

Ok. I've uploaded the site so you can see visually the changes that were made, thanks to your advice.

http://www.friendsoftheriponlibrary.org/Untitled-1.php

(the CSS is in the View Source)

I've made changes to the background colors and alignment and have tested it in IE6 and other browsers using Browsershots. It seems to look good, for now.

Unfortunately, I still cannot get W3C to validate it because there seems to be issues with my flash slideshow and some other errors regarding javascript. How am I suppose to fix these?

Toad78

[Paul O'B]

Hi,

Read the sticky threads in the flash forum regarding flash poblems/validation etc.

The correct syntax for javascript is:

<script type="text/javascript"></script>

Not this:

<script language = "javascript">

You should also link to an external src file rather than embedding the javascript.

[toad78]

Hi,

Read the sticky threads in the flash forum regarding flash poblems/validation etc.

The correct syntax for javascript is:

<script type="text/javascript"></script>

Not this:

You know, I went online and found a code that jumbled the email address up, which seemed to have validated! WOOHOO!

Plus, thanks to your help and the links your provided regarding the floating of columns, adding the background and such, the site is working MUCH nicer with it's flow. I used the 2 column flow codes for both the article columns I had (with the background-image included), and I also used another one of your suggestions for creating my 2nd-level pages.

You were a great help, and I thank you greatly!

Now I need to figure out my sandbag issues--hehehe. Off to another place!

Toad78