How to format the content

Hello

I am new to Modx (great program) but I am having difficulty getting Modx to read my css file. When I point to any of the ones supplied the page is formatted according. However, when I point to my css file the [*#content*] is not formatted. It is the only Template Variable that I am using on the page, all other text is formatted correctly.

Could you anyone tell me what I am doing wrong please?

Regards

Stoosh

Could you provide a link and/or some code (template), hard to say something without informations...

Thank you Made My Day for you quick reply

Then HTML is here


---------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to optimise a website</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="robots" content="NOODP">
<meta name="msnbot" content="NOODP">
<meta name="googlebot" content="NOODP">
<style type="text/css">
<!--
body {
background-image: url();
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link href="capillio.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="10" align="left" valign="bottom" bgcolor="#003366">&nbsp;</td>
<td width="581" bgcolor="#003366"><a href="index.html"><img src="images/capillioheaderlogo.jpg" alt="Capillio - UK Search engine optimisation, training, marketing, internet intelligence" width="382" height="80" border="0" /></a><img src="images/spacer.gif" alt=" " width="3" height="3" /></td>
<td width="159" align="center" valign="middle" bgcolor="#003366">&nbsp;</td>
<td width="10" align="right" valign="bottom" bgcolor="#003366">&nbsp;</td>
</tr>
<tr>
<td colspan="4" align="left" valign="bottom" background="images/lowerheaderbak.gif" bgcolor="#003366">&nbsp;</td>

</tr>
</table>


<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" bgcolor="#B7B7B7" class="MenuHeadingText">&nbsp;Capillio home</td>
</tr>
<tr>

<td bgcolor="#939393"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF" class="MenuGrey"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8" class="MenuGrey">&nbsp;&nbsp;&nbsp;How to </td>
</tr>

<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Keyword Reports </span></td>

</tr>
<tr>
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Marketing </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Workshops </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Consultancy </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Pay Per Click </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Search Engine Optimsation </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td height="1" bgcolor="#CCCCCC"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="25" bgcolor="#F8F8F8"><span class="MenuGrey">&nbsp;&nbsp;&nbsp;Contact </span></td>

</tr>
<tr bgcolor="#CCCCCC">
<td bgcolor="#939393"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
</table></td>
<td valign="top"><blockquote>
<h1>How to optimise a website </h1>
<p class="style3">&nbsp;</p>

<p class="body"><h3>Install Successful!</h3>
<p>
You have successfully installed and configured MODx. We hope you find this site an adequate starting configuration for many small business, organization or personal websites; just change out the template and add your own content and snippets, and you&#39;ll be good to go!
</p>
<h3>Getting Help</h3>
<p>
The <a href="http://modxcms.com/modx-team.html" target="_blank">team behind MODx</a> strives to contantly add to and refine the documentation to help you get up to speed with MODx:
</p>

<ul>
<li>For basic instructions on integrating custom templates into MODx, please see the <a href="http://modxcms.com/designer-guide.html" target="_blank">Designer&#39;s Guide</a>. </li>
<li>For an introduction to working in MODx from the content editors perspectve, see the <a href="http://modxcms.com/editor-guide.html" target="_blank">Content Editor&#39;s Guide</a>. </li>
<li>For a detailed overview of the backend &quot;manager&quot; and setting up Users and Groups, please peruse the <a href="http://modxcms.com/developers-guide.html" target="_blank">Administration Guide</a>.</li>

<li>For developers, architecture and API documentation can be found in the <a href="http://modxcms.com/administration-guide.html" target="_blank">Developer&#39;s Guide</a>.</li>
<li>And if someone has installed this site for you, but you&#39;re curious as to the steps they went through, please see the <a href="http://modxcms.com/getting-started.html" target="_blank">Getting Started Guide</a>.</li>
</ul>
<p>
And don&#39;t forget, you can always learn and ask questions at the <a href="http://www.modxcms.com/forums" target="_blank">MODx forums</a>.

</p>
</p>
<p></p>
</blockquote></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1" align="center" valign="middle" bgcolor="#003366"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="1" align="center" valign="middle" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt=" " width="1" height="1" /></td>
</tr>
<tr>
<td height="20" align="center" valign="middle" bgcolor="#003366"><span class="FooterText"> site map | contact us | terms of use | privacy policy</span></td>

</tr>
<tr>
<td height="45" align="center" valign="middle" bgcolor="#003366"><table width="315" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70"><a href="index.html"><img src="images/capilliofooterlogo.jpg" alt="UK Search engine optimisation, training, marketing, internet intelligence" width="70" height="30" border="0" /></a></td>
<td align="left" class="FooterText">&nbsp;&nbsp;Copyright 2007 Capillio. All right reserved.

&nbsp;&nbsp;<strong>Send us feedback</strong> about the site </td>

</tr>
</table></td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------
The CSS is below
--------------------------------------------------------------

.Outline {
border: 1px solid #999999;
}
.MenuGrey {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #575757;
text-decoration: none;
font-weight: bold;
}

.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #383838;
text-decoration: none;
}
.MenuHeadingText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #383838;
text-decoration: none;
font-weight: normal;
}
.MenuTextBlack {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
.FooterText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #DFDFDF;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #0033CC;
}
a:visited {
text-decoration: none;
color: #0033CC;
}
--------------------------------------------------------

Thanks again

well i think posting the full html will not help. any ways try to see the sequence of the css i think there is a slight problem.

Amitav Roy
Website: http://www.pixelgroups.com
Blog: http://design.pixelgroups.com

Thank you Amitavroy

I am not a CSS person and I thought that the CSS was Ok. Could you tell me exactly what is wrong in the sequence and how it needs to be rearranged please?

Regards

Stoosh

Add another html tag selector to the current body tag selector. For your code you can use "body, p {" where you will then apply the style to the paragraphs, or simply add the table data cell so it will look like this "body, td {". That assumes of course, that you want the same body style applied to the paragraphs and list items in the table cells.

Another thing is to not use "<blockquote>" to wrap all of your content. It’s intended to be used like a paragraph tag where you are calling out, as the name implies, a quote, and not as a large content container.

Also, W3C specification does not allow [tt]<p>[/tt] tags nested within themselves. Change the [tt]<p class="body">[/tt] to [tt]<div class="body">[/tt] and modify the closing tag as well.

Modify your Stylesheet to select [tt]div.body[/tt] instead of [tt]p.body[/tt] and you should be good

Thank you everyone I will do this in the morning and let you know how I get on

Regards

Stoosh