Hey All-

I am trying to use CSS on a dynamic table... but when I set up the CSS class, it doesn't style any of the content. The content just looks the same as if I didn't style it at all... I've also been playing around with using CSS to style specific tags (td, table) as well... but that doesnt seem to work either.

Are there any steps to styling dynamic tables with CSS that i'm forgetting?

Thanks!

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote> I've also been playing around with using CSS to style specific tags (td, table) as well... but that doesnt seem to work either....<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

it should if it's done correctly. you writing the css yourself, or getting dreamweaver to do it for you?

post your css & page code up

regards

Dave Thomas
<b>DMX Zone Manager</b>

Dave-

Thanks for your reply! I have tried setting up the external CSS files with DreamWeaver. Recently I've been making adjustments to them manually (as I've been learning as much as I can about CSS). Here's the code for the page... it's a really simple test page because I want to make sure it works before I put it on my site.

<font color=red>Here's the code:</font id=red>


&lt;?php require_once('Connections/LinkTestConn.php'); ?&gt;
&lt;?php
$maxRows_rsLinkTest = 10;
$pageNum_rsLinkTest = 0;
if (isset($_GET['pageNum_rsLinkTest'])) {
$pageNum_rsLinkTest = $_GET['pageNum_rsLinkTest'];
}
$startRow_rsLinkTest = $pageNum_rsLinkTest * $maxRows_rsLinkTest;

mysql_select_db($database_LinkTestConn, $LinkTestConn);
$query_rsLinkTest = "SELECT * FROM links";
$query_limit_rsLinkTest = sprintf("%s LIMIT %d, %d", $query_rsLinkTest, $startRow_rsLinkTest, $maxRows_rsLinkTest);
$rsLinkTest = mysql_query($query_limit_rsLinkTest, $LinkTestConn) or die(mysql_error());
$row_rsLinkTest = mysql_fetch_assoc($rsLinkTest);

if (isset($_GET['totalRows_rsLinkTest'])) {
$totalRows_rsLinkTest = $_GET['totalRows_rsLinkTest'];
} else {
$all_rsLinkTest = mysql_query($query_rsLinkTest);
$totalRows_rsLinkTest = mysql_num_rows($all_rsLinkTest);
}
$totalPages_rsLinkTest = ceil($totalRows_rsLinkTest/$maxRows_rsLinkTest)-1;
?&gt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;TFL-LinkTest&lt;/title&gt;
&lt;link href="/FilmlotlinkStyle.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table width="768" border="0" class="FilmlotStyle"&gt;
&lt;tr&gt;
&lt;td width="298"&gt;&lt;h1&gt;name&lt;/h1&gt;&lt;/td&gt;
&lt;td width="292"&gt;&lt;h1&gt;desc&lt;/h1&gt;&lt;/td&gt;
&lt;td width="164"&gt;&lt;h1&gt;category&lt;/h1&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php do { ?&gt;
&lt;tr&gt;
&lt;td height="25"&gt;&lt;?php echo $row_rsLinkTest['name']; ?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $row_rsLinkTest['desc']; ?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $row_rsLinkTest['category']; ?&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php } while ($row_rsLinkTest = mysql_fetch_assoc($rsLinkTest)); ?&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;?php
mysql_free_result($rsLinkTest);
?&gt;


<font color=red>Here's the external CSS stylesheet:</font id=red>

h1 {
font-family: sans-serif;
color: #FFFFFF;
font-size: 9px;
font-weight: bold;
text-transform: capitalize;
text-decoration: none;
background-color: #CC9900;
}
h2 {
font-family: sans-serif;
background-color: #CCCCCC;
color: #666666;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: none;
}
link {
font-family: "san serif";
font-size: 10px;
color: #CCCCCC;
}


Edited by - WebDoofus on 01 Sep 2005 19:17:19

ok if you have these two files in the same folder,
they will work with the code i give below,
if you have the styles in a seperate folder,
you need to change the css reference in the head section

html page
<pre id=code><font face=courier size=2 id=code><font color=red>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;TFL-LinkTest&lt;/title&gt;
&lt;link href="FilmlotlinkStyle.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- there is no class called FilmlotStyle in the style sheet???
To create a class
you must name the style with a preceding '.'
so, for example...
.FilmlotStyle{
border: 0px;
font-size: 12px;
}
--&gt;
&lt;table width="768" border="0" class="table1"&gt;
&lt;tr&gt;
&lt;!-- You had your H1 tags set to 9px which makes no sense,
they should be the biggest, and H2 smaller, not bigger.
I've set them to 15px just so u can see the css working.
--&gt;
&lt;td width="298"&gt;&lt;h1&gt;name&lt;/h1&gt;&lt;/td&gt;
&lt;td width="292"&gt;&lt;h1&gt;desc&lt;/h1&gt;&lt;/td&gt;
&lt;td width="164"&gt;&lt;h1&gt;category&lt;/h1&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="25"&gt;&lt;h1&gt;heading 1&lt;/h1&gt;
&lt;h2&gt;heading 2 &lt;/h2&gt;
an example of your header styles.

&lt;/td&gt;
&lt;!-- hyperlink uses a 'a href', so css must use a:link --&gt;
&lt;td&gt;&lt;p&gt;&lt;a href="nothere.php"&gt;this is a hyperlink &lt;/a&gt;&lt;/p&gt;
&lt;p&gt;in a style like below, which will control all TD tags. &lt;/p&gt;
&lt;p&gt;td{ &lt;/p&gt;
&lt;p&gt;}&lt;/p&gt;&lt;/td&gt;
&lt;td class="otherTD"&gt;..this TD has a class applied to it called .otherTD
which you can see in the css sheet. &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</font id=red></font id=code></pre id=code>

css sheet:
<pre id=code><font face=courier size=2 id=code>
<font color=blue>
h1 {
font-family:Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
background-color: #CC9900;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
color: #666666;
font-size: 12px;
}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
}
.table1{
width: 768px;
border: 1px solid #CC3300;
}
td{
background-color:#99CC99;
}
.otherTD{
background-color:#0066FF;
}
</font id=blue>
</font id=code></pre id=code>

if you want to use a font family, it is best to specify the full family
otherwise just use 'font', i've commented the html with things that
were wrong, this will show up in grey text in dreamweaver.

regards

Dave Thomas
<b>DMX Zone Manager</b>

Thanks for the help... After messing with it for a few hours I realized that no matter what changes I made, I would always get the default font. That made me wonder if the html could "find" the external CSS file...

Here was the problem:
<font color=blue>&lt;link href="/linkstyle.css" rel="stylesheet" type="text/css"&gt;</font id=blue>

I changed it to:
<font color=blue>&lt;link href="linkstyle.css" rel="stylesheet" type="text/css"&gt;</font id=blue>
(because the css file is in the same folder as the html file)

Now it works fine... MAN! A friggin '/' was the problem! I guess that's why I'm a noob!<img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>

Thanks!

Edited by - WebDoofus on 02 Sep 2005 03:04:29