Your also cutting and pasting from an old document. You have divs with IDs or classes that don't exist in the style sheet. Like "userLinks", "extraContent2">, and "contentContainer". These are hold overs from your previous layout and are unnecessary. All of your paragraphs should be simply contained in "paragraph" tags. That will set the font type, color, and size from the style sheet. Anything extra, like bolding, italics, font/color change, would then be done within the paragraph with a "span". It could be done other ways, but you already use a lot of "span" tags so that should be familiar.
Thanks Philo, I'm not too sure which to remove though.
Was checking my homepage www.blackhorsekawasaki.com on www.viewlike.us
All looks reasonably ok except at 800x600......
In normal viewing the page looks fine in Firefox but in IE7 the writing is very close to the side of the left column. Could I also ask if the coding for the page footer is ok
You can certainly do it the way Scutterman suggested. It will work just fine.
Personally, I would modify the "contentcolumn" style in the style sheet, and then create two sub classes. One for one column pages and another for two column pages.
An example might look like the code below. I removed the "margin-left" definition from the "contentcolumn" style and then created the styles "one_col" and "two_col". Each of these styles contains different "margin-left" settings that will be used to compliment the "contentcolumn" style in your HTML document.
Code:
#contentcolumn{ color: #ffffff; }
.one_col{ margin-left: 20px; /* Set a 20 pixel left margin for a one column display */ }
.two_col{ margin-left: 215px; /* Set a 215 pixel left margin for two column display */}
Simplifying your main page, the code looks like the listing below.
Code:
<div id="contentwrapper">
<div id="contentcolumn">
<!-- All of your page content -->
</div>
</div>
On pages that will require two columns, the "contentcolumn" div would look like the following code. This says that the "contentcolumn" div is of the "two_col" class and sets the left margin to 215 pixels.
Code:
<div id="contentwrapper">
<div id="contentcolumn" <span style="font-weight:bold;">class="two_col"</span>>
<!-- All of your page content -->
</div>
</div>
On pages that will require one column, the "contentcolumn" div would changed to look like the following code. This says that the "contentcolumn" is of the "one_col" class and sets the left margin to 20 pixels. Then you would delete, or comment out, the "leftcolumn" div from the HTML document.
Code:
<div id="contentwrapper">
<div id="contentcolumn" <span style="font-weight:bold;">class="one_col"</span>>
<!-- All of your page content -->
</div>
</div>
While this is a bit more complicated, it keeps all the styling in the style sheet and allows your HTML page to select the style it want's to be.
