Trying Cheryl's 3 Column Template

[JohnB352]

I got this to work, and it's pretty straightforward.  Up until the point that I "increase" font size in a div.  The sample warns about reducing it.  So I'm not sure why this isn't working.
LINK
If I don't use the h1 tag on the text in the center column it looks fine.

This is what I'm referring to:
<div id="ThreeColumn-Middle">
   <h1>Ocala Mountain Bike Association</h1>
</div>

What's causing this to blow up like that?
Thanks.

[fcphdJim]

Put your middle content div after the left and right columns. I know it seems counter-intuitive, but the floated divs should come first in your source code. Then the middle content will nestle nicely between the two columns.
Jim

[JohnB352]

Put your middle content div after the left and right columns.
Jim

Ah... and that's exactly how she did it in her example.  I forgot that when I created my test page. 
That works perfect.
Thanks Jim.


John

[Cheryl D Wise]

Your code doesn't look like that in my Reading template and you shouldn't be using a width of 100% in any column definition. Full width is the default and when you add margin & padding to 100% it will overflow the containters forcing a horizontal scroll.

For the code you are using Jim is correct that floats need to go before the content that isn't floated if you want them to line up correctly in a row.

[JohnB352]

Your code doesn't look like that in my Reading template and you shouldn't be using a width of 100% in any column definition. Full width is the default and when you add margin & padding to 100% it will overflow the containters forcing a horizontal scroll.

I see that now in your example.  I used your "Three column layout with both sides height determined by the content" non-graphics template. I may have done that as a result of trying 2-3 other 3 column templates first.  It works for now.  If I add any padding or margin I'll remove it.  Thanks.

[JohnB352]

...and you shouldn't be using a width of 100% in any column definition. Full width is the default and when you add margin & padding to 100% it will overflow the containters forcing a horizontal scroll.

If I take off the width definition, it still overflows.  Leaving it in there gets different results, with FF and IE8.
LINK
The test along the bottom is supposed to be in the center div.
If I leave the width definition in there, it looks fine in IE8 but not in FF.  In FF the <p> drops all the way to the bottom.  Which really makes no sense when you look at it with FireBug, and see there's no padding that's doing that.

[fcphdJim]

The text drops down in Safari also. I didn't check, but I would bet it does it in Chrome and Opera too. The problem is caused by "h1 + p". I'm not sure what the purpose of that is, but deleting it made the text behave in Safari and FF.
Jim

[JohnB352]

The problem is caused by "h1 + p". I'm not sure what the purpose of that is, but deleting it made the text behave in Safari and FF.

Hmm... not sure what you mean.  This is a test page for what will become the home page for the website.  That's why I have the h1.
It makes no sense to me; if a div defaults to take up the entire width, why does this break when no width is defined.

When I had the width defined (450px), it still displayed incorrectly, using FF4.  It would put the <p> all the way at the bottom.  But looked ok in IE8.  That's why I decided to try it with no width.

[Cheryl D Wise]

h1 + p targets the first paragraph after an h1 element. In this case you are telling it to clear the left column which may not be what you want to do. So I'd suggest removing it. The issue has nothing to do with paddingn and everything to do with telling the browser to clear the left column.

First step is always validate the HTML & CSS. In this case you have a BOM which can throw some versions of IE into quirks mode. Go to Tools > Page Editor Options > and remove the checkmark to use a BOM on the HTML pages. Unfortunatley, that won't get rid of existing ones but changing from UTF-8 to one of the ISO charactersets will do so.

You do have one CSS error:
.quote-end {
   color: #AAAAAA;
   float: right;
   font-size: 3.5em;
   line-height: 20px;
   padding: 0 0 10 0; /*only 0 n */
   font-family: Arial,sans-serif;
   font-weight: 700;
}

I also noticed that you have a lot of inline css which makes it harder to troubleshoot your pages as well as not using headings correctly. It looks like you used h5 for column headings for size and wieght instead of using and h2 and defining them so that in those columns it displayed the way you have defined your h5. I'd suggest changing that since you should not be skipping heading levels. Remember that a web page is like an outline and you don't go down 5 levels without having something in levels 2-4.

FWIW, I don't like the way the menu you are using is coded. You cannot have a style block inside of the <body> element and expect it to work correctly in all browsers. All style elements must be in the head section of the page or inline. While you can have a script block inside the body of the page the one you are using should also be in the head section of the page.

[JohnB352]

h1 + p targets the first paragraph after an h1 element.

First step is always validate the HTML & CSS. In this case you have a BOM

You do have one CSS error:

I also noticed that you have a lot of inline css which makes it harder to troubleshoot your pages as well as not using headings correctly.

FWIW, I don't like the way the menu you are using is coded.

The h1+p was suggested to me in the MS forum to fix a problem with a raised-cap effect that I was using. I'm no longer using it, so I got rid of the h1+p and that fixed the problem.

When you say "validate", are you referring to the Intellisense in EW, or are you using some other tool to do that?

I did a quick lookup on what BOM is.  That's way over my head.  I wouldn't know what ISO character set to use, so I will leave that alone for now.  Plus, I don't see a place to change that with EW2 in Site>Site Settings.

I fixed the CSS error.  Thanks.

RE: the inline CSS and incorrect use of h5, etc;  I'm working on getting a handle on that.  I know what you are referring to.  I think this is related to my "work flow", or lack there of.  I haven't really developed one, and often times I feel like I need a "plan", because of issues like this.  I'm finding myself creating a lot of one-offs, because I'm figuring a lot of things out on the fly.

RE: the menu;  I know what you mean, but I'm really stuck with this, for this website.  I won't use it again.  It's a EW addin that I bought.  I just don't want to start from the beginning at this point, for a menu.

Thanks for taking time to help with this.

[JohnB352]

While you can have a script block inside the body of the page the one you are using should also be in the head section of the page.

Could someone explain the pros & cons of having a script block in the body versus the head section?

I ask for 2 reasons:
1.) I use a jquery image swap script.  The script block is in the head section.  I'm not using the script right now, the code to swap images has been removed. I'll be putting it back at some point. But the image swapping will only be on the index page. I was told in the MS forum that it needed to be in the head section.  Which I did. But I then detached the index.htm file from the dwt, because I didn't want that script block on every page on the site.  Sounds like I didn't have to do that, if I could have had it in the body.
2.)The script block that is in the body is for the menu.  Which works fine. What we be the benefit of moving it to the head section?

Just trying to understand the differences.

Thanks.

[Cheryl D Wise]

Add a second editable region to your DWT. While MS automatically puts one in for the <title> element but adding a second is sensible so that it be below the stylesheet link. I typically use something like:

<!-- #BeginEditable "doctitle" -->
<title> Page title </title>
<meta name="description" content=" bit for search engines that may display description in results "/>
<!-- #EndEditable -->
<link href="site.css" rel="stylesheet" type="text/css" />
<!-- #BeginEditable "dochead" -->
<style type="text/css">
/* placeholder for page level styles */
</style>
<!-- scripts for individual pages can go in here too -- >
<!-- #EndEditable -->

I find it is easier to maintain sites when scripts are always in the same place -the head section of the page-using a second editable head section makes that much easier to do but MS doesn't provide a way through the EW interface to do so easily. You have to type or copy-paste-change region name to create the second region.

[JohnB352]

Thanks Cheryl. 
That will have to be something I delve into at a later date.  This isn't something that's "broke", nor keeping me from moving forward.

[gimme987]

the inline CSS and incorrect use of h5, etc;  I'm working on getting a handle on that.  I know what you are referring to.  I think this is related to my "work flow", or lack there of.  I haven't really developed one, and often times I feel like I need a "plan", because of issues like this.  I'm finding myself creating a lot of one-offs, because I'm figuring a lot of things out on the fly.

[RitzClark]

I'm using the CSS template with a banner , 3 columns and I want to specify a background color for the middle column without changing the color of left and right column. Please help me with code. Any help would be appreciated.