steve m
07-29-2007, 10:41 AM
Hello,
I am somewhat new to CSS and I am working on this project and I am having trouble with my style sheets working right or trying to get certain things to work. I have this page where I want to use 3 different fieldsets, two fieldsets inside another fieldset. I want to keep all of my CSS rules on a style sheet, but I can't get some things to work unless I put the CSS rules inline with the tag. I have even tried making each tag a class, but still the same results. For example, I want to change the color of the font in the legend, but I can't unless I put the rule inside the tag.
Can someone be able to help me and explain why these rules work inline, but do not work when I put them on a style sheet?
CSS Code:
body{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
background: #FFFFFF;
}
.title{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
font-size: 24pt;
color: #333333;
font-weight: bold;
margin-top: 5px;
margin-bottom: 0;
margin-left: 5px;
}
.location{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
font-size: 12pt;
color: #333333;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.header_line{
border-bottom: 3px double #333333;
}
.copyright{
font-family: arial, verdana, helvetica, Geneva, sans-serif;
font-size: 8pt;
color: #333333;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.errormsg{
font-family: arial, verdana, helvetica, Geneva, sans-serif;
font-size: 8pt;
color: #CC0000;
font-weight: bold;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
}
fieldset {
margin: 0 0;
padding: 1em;
border: 2px solid #666666;
background: #FFF;
width: 766;
{
legend {
font-size: 12pt;
font-weight: bold;
color: #333333;
}
ul a{
font-family: tahoma;
font-size: 12pt;
font-weight: normal;
}
li{
list-style: none;
}
li a{
line-height: 2em;
color: #CC0000;
text-decoration: none;
}
ul a:active{
color: #CC0000;
cursor: default;
}
ul a:hover{
color: #FF1111;
text-decoration: underline;
}
HTML Code
<body>
<div align="center">
<table width="766" cellpadding="0" cellspacing="0">
<tr>
<td width="766" class="header_line" colspan="2">
<p class="title">line1</p>
<p class="location">line2<p>
</td>
</tr>
<tr>
<td width="766" colspan="2">
<fieldset>
<legend style="color: #333333;">Administration</legend>
<fieldset style="float: left; width: 360px;">
<legend>Menu</legend>
<ul>
<li><a href="upload_picts.php">Upload Picture of the Day</a></li>
<li><a href="#">View/Edit Pictures</a></li>
<li><a href="#">View/Edit Comments</a></li>
<li><a href="#">View/Edit Members</a></li>
</ul>
</fieldset>
<fieldset style="display: inline; width: 360px; text-align: center;">
<legend>Picture of the Day</legend>
<?php
//echo $msg;
while($dis_row = mysql_fetch_array($display_pict))
{
extract($dis_row);
}
?>
<p style="font-family: verdana; font-size: 10pt;">
Uploaded - (<?php echo $upload_date; ?>)
</p>
<img src="../<?php echo $picturl; ?>" width="200">
</fieldset>
</fieldset>
</td>
</tr>
<tr>
<td width="766" colspan="2">
<p class="copyright">© GrahamLive 2007. All Rights Reserved</p>
</td>
</tr>
</table>
</div>
</body>
The code highlighted in red are the problems.
Thank you in advance
I am somewhat new to CSS and I am working on this project and I am having trouble with my style sheets working right or trying to get certain things to work. I have this page where I want to use 3 different fieldsets, two fieldsets inside another fieldset. I want to keep all of my CSS rules on a style sheet, but I can't get some things to work unless I put the CSS rules inline with the tag. I have even tried making each tag a class, but still the same results. For example, I want to change the color of the font in the legend, but I can't unless I put the rule inside the tag.
Can someone be able to help me and explain why these rules work inline, but do not work when I put them on a style sheet?
CSS Code:
body{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
background: #FFFFFF;
}
.title{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
font-size: 24pt;
color: #333333;
font-weight: bold;
margin-top: 5px;
margin-bottom: 0;
margin-left: 5px;
}
.location{
font-family: verdana, arial, helvetica, Geneva, sans-serif;
font-size: 12pt;
color: #333333;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.header_line{
border-bottom: 3px double #333333;
}
.copyright{
font-family: arial, verdana, helvetica, Geneva, sans-serif;
font-size: 8pt;
color: #333333;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.errormsg{
font-family: arial, verdana, helvetica, Geneva, sans-serif;
font-size: 8pt;
color: #CC0000;
font-weight: bold;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
}
fieldset {
margin: 0 0;
padding: 1em;
border: 2px solid #666666;
background: #FFF;
width: 766;
{
legend {
font-size: 12pt;
font-weight: bold;
color: #333333;
}
ul a{
font-family: tahoma;
font-size: 12pt;
font-weight: normal;
}
li{
list-style: none;
}
li a{
line-height: 2em;
color: #CC0000;
text-decoration: none;
}
ul a:active{
color: #CC0000;
cursor: default;
}
ul a:hover{
color: #FF1111;
text-decoration: underline;
}
HTML Code
<body>
<div align="center">
<table width="766" cellpadding="0" cellspacing="0">
<tr>
<td width="766" class="header_line" colspan="2">
<p class="title">line1</p>
<p class="location">line2<p>
</td>
</tr>
<tr>
<td width="766" colspan="2">
<fieldset>
<legend style="color: #333333;">Administration</legend>
<fieldset style="float: left; width: 360px;">
<legend>Menu</legend>
<ul>
<li><a href="upload_picts.php">Upload Picture of the Day</a></li>
<li><a href="#">View/Edit Pictures</a></li>
<li><a href="#">View/Edit Comments</a></li>
<li><a href="#">View/Edit Members</a></li>
</ul>
</fieldset>
<fieldset style="display: inline; width: 360px; text-align: center;">
<legend>Picture of the Day</legend>
<?php
//echo $msg;
while($dis_row = mysql_fetch_array($display_pict))
{
extract($dis_row);
}
?>
<p style="font-family: verdana; font-size: 10pt;">
Uploaded - (<?php echo $upload_date; ?>)
</p>
<img src="../<?php echo $picturl; ?>" width="200">
</fieldset>
</fieldset>
</td>
</tr>
<tr>
<td width="766" colspan="2">
<p class="copyright">© GrahamLive 2007. All Rights Reserved</p>
</td>
</tr>
</table>
</div>
</body>
The code highlighted in red are the problems.
Thank you in advance