Dreamweaver - Table & CSS Color Problem. Need Expert Eyes

Author

Table & CSS Color Problem. Need Expert Eyes

CrimeDoctor

2005-07-31, 7:34 pm

I am trying to help out a non-profit organization redesign their website. But,
I am pulling my hair our trying to get the background color to fill a table
100% vertically. Can someone spot what I cannot see?

The left navigation table background-color #900 only extends about half way
down the table column to the end of the CSS style(leftNav) where the content
stops and then turns black (for some reason???). I want to fill the entire
leftNav table with color #900 as it expands in length.

Here is the test page URI: http://www.crime-free-association.org/test_page.htm

Here is the relevant CSS:

#leftNav {
background-color: #900;
}

#leftNav th, #centerSidebar th {
background-color: #900;
color:#FF9;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: center;
margin-bottom: 0px;
padding-top: 25px;
padding-bottom: 5px;
}
#leftNav td {
font-size: 85%;
background-color: #900;
margin-bottom: 0px;
padding-bottom: 0px;
}
#leftNav ul {
list-style-type: none;
margin-left: 0px;
font-size: 70%;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 3;
padding-bottom: 3;
}

#leftNav li {
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
padding-bottom: 8px;
color: #FF9;
}
#leftNav li a{
padding-left: 10px;
color: #FF9;
text-decoration: none;
display: block;
padding-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}

#leftNav li a:hover {
color: #FF0;
text-decoration: underline;
margin-bottom: 0px;
font-weight: bold;

Any ideas using valid HTML and CSS would be greatly appreciated.

Murray *TMM*

2005-07-31, 7:34 pm

Assign that background color to the <td> holding #leftNav. It will always
color all the way to the bottom of the <td> then.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"CrimeDoctor" <chris@crimedoctor.com> wrote in message
news:dciou5$i5l$1@forums.macromedia.com...
>I am trying to help out a non-profit organization redesign their website.
>But,
> I am pulling my hair our trying to get the background color to fill a
> table
> 100% vertically. Can someone spot what I cannot see?
>
> The left navigation table background-color #900 only extends about half
> way
> down the table column to the end of the CSS style(leftNav) where the
> content
> stops and then turns black (for some reason???). I want to fill the entire
> leftNav table with color #900 as it expands in length.
>
> Here is the test page URI:
> http://www.crime-free-association.org/test_page.htm
>
>
> Here is the relevant CSS:
>
> #leftNav {
> background-color: #900;
> }
>
> #leftNav th, #centerSidebar th {
> background-color: #900;
> color:#FF9;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 100%;
> text-align: center;
> margin-bottom: 0px;
> padding-top: 25px;
> padding-bottom: 5px;
> }
> #leftNav td {
> font-size: 85%;
> background-color: #900;
> margin-bottom: 0px;
> padding-bottom: 0px;
> }
> #leftNav ul {
> list-style-type: none;
> margin-left: 0px;
> font-size: 70%;
> font-family: Arial, Helvetica, sans-serif;
> margin-top: 10px;
> margin-bottom: 0px;
> padding-top: 3;
> padding-bottom: 3;
> }
>
> #leftNav li {
> margin-left: 0px;
> margin-top: 0px;
> margin-bottom: 0px;
> font-weight: bold;
> padding-bottom: 8px;
> color: #FF9;
> }
> #leftNav li a{
> padding-left: 10px;
> color: #FF9;
> text-decoration: none;
> display: block;
> padding-bottom: 3px;
> margin-top: 0px;
> margin-bottom: 0px;
> font-weight: bold;
> }
>
> #leftNav li a:hover {
> color: #FF0;
> text-decoration: underline;
> margin-bottom: 0px;
> font-weight: bold;
>
>
> Any ideas using valid HTML and CSS would be greatly appreciated.
>
>

CrimeDoctor

2005-07-31, 7:34 pm

Hi Murray:

I understand your comment and tried it...and everything else I can thing
of...it doesn't work. As you know I use this identical code on another website
and it works perfectly.

The only way I can fiure out how to get this table to cooperate is change code
line 75 (see below):

<td width="140" align="center" valign="top" bgcolor="#900">

change to

<td width="140" align="center" valign="top" style="background-color:#900">

The table color works in the second example using a local style. Can't see why
CSS won't fix it.

Murray *TMM*

2005-07-31, 7:34 pm

I forgot to say that the original page looked fine to me in IE6. Where are
you seeing the problem that you originally described?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"CrimeDoctor" <chris@crimedoctor.com> wrote in message
news:dcis18$lta$1@forums.macromedia.com...
> Hi Murray:
>
> I understand your comment and tried it...and everything else I can thing
> of...it doesn't work. As you know I use this identical code on another
> website
> and it works perfectly.
>
> The only way I can fiure out how to get this table to cooperate is change
> code
> line 75 (see below):
>
> <td width="140" align="center" valign="top" bgcolor="#900">
>
> change to
>
> <td width="140" align="center" valign="top" style="background-color:#900">
>
> The table color works in the second example using a local style. Can't see
> why
> CSS won't fix it.
>

Gary White

2005-07-31, 7:36 pm

CrimeDoctor wrote:

> The only way I can fiure out how to get this table to cooperate is change code
>line 75 (see below):
>
> <td width="140" align="center" valign="top" bgcolor="#900">
>
> change to
>
> <td width="140" align="center" valign="top" style="background-color:#900">

Shorthand is not supported in hex color numbers in HTML, like it is in
CSS. Your second method is actually better because the bgcolor is a
deprecated attribute. However, I suspect it would work if you
specified a legal value for the color:

<td width="140" align="center" valign="top" bgcolor="#990000">

Of course, even better would be to use CSS and move it to a separate
style sheet or block.

Gary

Murray *TMM*

2005-07-31, 7:37 pm

Good going, Chris and Gary. I had missed that completely.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"CrimeDoctor" <chris@crimedoctor.com> wrote in message
news:dcja17$9qt$1@forums.macromedia.com...
> Thanks Gary, that did the trick. I didn't know that CSS hex shorthand was
> not
> supported by HTML. I used the full hex code and it solved the problem.
> Yes,
> eventually I will go back and clean up those little style shortcuts with
> proper
> CSS. My wife is on my XXX for honey-dos so I have to leave it alone for
> now.
> Meanwhile the CSS code validates.
>

CrimeDoctor

2005-07-31, 7:37 pm

Thanks Gary, that did the trick. I didn't know that CSS hex shorthand was not
supported by HTML. I used the full hex code and it solved the problem. Yes,
eventually I will go back and clean up those little style shortcuts with proper
CSS. My wife is on my XXX for honey-dos so I have to leave it alone for now.
Meanwhile the CSS code validates.

Gary White

2005-07-31, 7:37 pm

CrimeDoctor wrote:

>Thanks Gary, that did the trick. I didn't know that CSS hex shorthand was not
>supported by HTML. I used the full hex code and it solved the problem. Yes,
>eventually I will go back and clean up those little style shortcuts with proper
>CSS. My wife is on my XXX for honey-dos so I have to leave it alone for now.
>Meanwhile the CSS code validates.

You're welcome. Glad it worked for you.

Gary

Gary White

2005-07-31, 7:37 pm

Murray *TMM* wrote:

>Good going, Chris and Gary. I had missed that completely.

I know ... you were too busy <checking> to notice it. ;-)

Gary

Murray *TMM*

2005-07-31, 7:37 pm

Hmm - <checking>

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Gary White" <reply@newsgroup.please> wrote in message
news:bbfqe15krurqm6hm5pl3i7ljm3lskhf3hv@4ax.com...
> Murray *TMM* wrote:
>
>
>
> I know ... you were too busy <checking> to notice it. ;-)
>
> Gary