bgcolor: "#8FCCCC"; doesn't work! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

fleur -> bgcolor: "#8FCCCC"; doesn't work! (2/24/2004 10:59:29)

Hi there all you experts!

I was wondering if someone could explain why after adding a background colour to a table data tag in my CSS, there is no change to the table data I apply the style to. If I change anything else, such as increase/decrease the size of the font, or change font colour, it's applied immediately - so I'm at a loss here!

I have many TD descriptions in my CSS, and the others work just fine.

I've copied the code for the troublesome TD below:

TD.tdb-head1
{ bgcolor: "#8FCCCC";
text-align: "left";
font-size: "80%";
color: "#0D6CA6";
font-weight: "bold";
valign: "top";
}

Thanks for your help [:)]

Fleur



Giomanach -> RE: bgcolor: "#8FCCCC"; doesn't work! (2/24/2004 11:02:51) 

bgcolor: "#8FCCCC";


Not standard CSS, replace it with: 

background: #8FCCCC;


That works, I know it does, I use it all the time.

HTH

Dan



gorilla -> RE: bgcolor: "#8FCCCC"; doesn't work! (2/24/2004 11:11:59)

quote:

{ bgcolor: "#8FCCCC";
text-align: "left";
font-size: "80%";
color: "#0D6CA6";
font-weight: "bold";
valign: "top";
}


To expand slightly on giomanach's reply. It works because it is a keyword. You should never put quote marks around a keyword in your declaration. Here's the relevant extract from the spec:

quote:

4.1.2 Keywords
Keywords have the form of identifiers. Keywords must not be placed between quotes ("..." or '...'). Thus,

red

is a keyword, but

"red"

is not. (It is a string.) Other illegal examples:
Illegal example(s):


width: "auto";
border: "none";
font-family: "serif";
background: "red";



Rule of thumb - where something has spaces in it such as a font name surround it with quotes. Otherwise don't

Thus:

font-family: "serif";

is wrong.

While

font-family: "some weird font that nobody has ever heard of and would look foul on the computer even if they did, apart from wasting sytem resources in that is ";

is right.



Giomanach -> RE: bgcolor: "#8FCCCC"; doesn't work! (2/24/2004 11:13:13)

quote:

Q: "Mummy, why is the gorilla bouncing that script kiddy's head against the floor?"
A: "Because he got his IP Address."

tune in later for more installments of this thrilling saga .........


[sm=lol.gif][sm=lol.gif]



gorilla -> RE: bgcolor: "#8FCCCC"; doesn't work! (2/24/2004 11:40:29)

Oops forgot to put in the url:

http://www.w3.org/TR/REC-CSS2/syndata.html

It is very well worth your while downloading the spec from w3c. It is the source after all [:)]. Also always validate both your html and your css. Using w3c's validator.

http://validator.w3.org/ for html and xhtml

http://jigsaw.w3.org/css-validator/ for css

I don't recommend that you use things like dreamweaver's validartion or indeed any other third party validator as you're

  • Wasting money.
  • Relying on somebody else to have interpreted the spec correctly and then written a program to check your code against the spec.


Go to the source [:)]



fleur -> RE: bgcolor: "#8FCCCC" (reply to Dan & M) (2/24/2004 20:19:52)

Thanks for that!

It now works[:)]

However, I've now added some spacing before and after the text. It looks fine on the FrontPage Design page, but if I preview it in IE6 there is no change (ie. the background color should be wider by the number of pixels indicated but it isn't).

I always seam to come up with strange problems...[8|]

Here is the code, I'm sure I've done something wrong. It's 1:00 am here in the UK and after dinner and a few glasses of wine I didn't have the energy left to go to the w3c website (which I have used before and found very useful!). I'm being very lazy and asking you the question since I'm now off to bed and won't be looking at this for 8 hours!!!

I'll check it out tomorrow [:)]


TD.tdb-head1
{
margin-top: 5px;
margin-bottom: 5px;
background: #8FCCCC;
text-align: "left";
font-size: "80%";
color: "#0D6CA6";
font-weight: "bold";
valign: "top";
}

Good night and thanks once again ;->

marie-paule



gorilla -> RE: bgcolor: "#8FCCCC" (reply to Dan & M) (2/25/2004 2:07:59)

quote:

ORIGINAL: fleur

Thanks for that!


TD.tdb-head1
{
margin-top: 5px;
margin-bottom: 5px;
background: #8FCCCC;
text-align: "left";
font-size: "80%";
color: "#0D6CA6"; font-weight: "bold";
valign: "top";
}

marie-paule


Ahem! [&o] Oops maybe I shoudl have say "you're welcome" first :-) fix tat one first [:) then see if it is still there.

There's a well known inheritance bug in IE as it relates to td elements. would you mind posting the entire style sheet. Can't promise I'll be able to reply today, but I will reply.

Greetings from sunny Copenhagen btw :-)



c1sissy -> RE: bgcolor: "#8FCCCC" (reply to Dan & M) (2/25/2004 7:15:50) 

[quote]TD.tdb-head1 
{ 
margin-top: 5px; 
margin-bottom: 5px; 
background: #8FCCCC; 
text-align: "left"; 
font-size: "80%"; 
color: "#0D6CA6"; 
font-weight: "bold"; 
valign: "top"; 
} [/quote]


You have "" around several things in your styles that aren't supposed to have them, left, 80% bold, top, and of course as Gorilla pointed out the #0D6CA6. Try removing them and see what happens.



fleur -> RE: bgcolor: "#8FCCCC" (reply to Dan & M) (2/25/2004 7:27:50)

Dear M (alias Gorilla)

I wish I was somewhere else but grey London right now - have never been to Copenhagen but have a wonderful Danish friend and have visited him in Herning.

But back to my problem - I removed the quotes from the color: #0D6CA6; but no change (not sure if that's what I was supposed to do!?)

I have to tell you that untill deciding to develop this website for my company, ie: http://www.ChangeFacilitators.com, the last one I developed was for a small client using FP98, way back in 1999! So I'm pretty new to all this stuff and have learned it all on my own...ie. a real newbie as compared to you...

My view was that what I wanted to do was fairly simple, so try it myself and learn something at the same time. But I'm finding it would take months of working only at this to get good at it, and unfortunately, since I'm also trying to develop and re-launch my business, I don't have enough time [&o]

If you have the inclination and the time to have a look at my website, I hope you will think it is ok, except that I have a major problem still - some pages take too long to load, the worst being the Facilitating Change page. Well, I won't trouble you any longer, except to say that if you think you can help me optimise it, I'd be very grateful [:)][:)][:)]

Please let me know.

Best wishes from cloudy London England (from a Canadian who wishes she was in Montreal [:)])

marie-paule



fleur -> RE: bgcolor: "#8FCCCC" (reply Gorilla) (2/25/2004 7:34:31)

PS my website address is

http://www.ChangeFacilitators.com

fleur

(in the previous reply the comma got stuck in the URL so when you click on the link it can't find the website!)



fleur -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 7:38:55)

Hi there [:)]

I hadn't tried removing the quotes from all the other bits - will try that. Problem is I've been using FR2003 which puts quotes around everything!!!!! And not really knowing much about HTML, I'm always wary of making changes [sm=ask.gif]

Fleur



d a v e -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 8:29:42)

try topstyle lite (free) http://www.bradsoft.com/download/index.asp to write your style sheets - much easier, keeps it safe out of FP's dirty paws.
one thing to note in your body tag 

body         
{ font-family: Verdana, Arial, Courier New;
  bgcolor: "#FFFFFF";
  color: "#0D6CA6"; 
  text-align: left;
  margin-top: 2; 
  margin-left: 0; 
  margin-right: 0; 
  }


should be (i know you know about the ""s) 
body         
{ font-family: Verdana, Arial, "Courier New", sans-serif;   /*you might prefer to remove courier new and leave the generic san-serif*/  
  background-color: #FFFFFF;   *bg-color is html*/   
  color: #0D6CA6; 
  text-align: left;
  margin-top: 2px;      /*you must specify a unit, pixels or ems or percentage*/   
  margin-left: 0px;      /*its better to put in a unit here as well but not strcitly necessary - zero is zero*/  
  margin-right: 0px; 
  }



d a v e -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 8:33:10)

p.s. also
background: #8FCCCC;

doesn't work! because it needs to be

background-color: #8FCCCC;

also it's a good idea not to use - in style names, better to use
TD.tdbSmallBold
or TD.tdbsmallbold



d a v e -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 8:39:22)

p.s. (would have been easier to write all this in one message)
if you have a gecko based browser (NN6+, mozilla, firefox...) then you can get a quick html or css reference tab installed into your sidebar (handy if you have a permanent connection)
http://devedge.netscape.com/toolbox/sidebars/

ah yes you can also use

background: #8FCCCC;

or
background-color: #8FCCCC;

The 'background' property is a shorthand property for setting the individual background properties
jsut in case you get confused!



c1sissy -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 9:21:08)

quote:

ORIGINAL: d a v e

try topstyle lite (free) http://www.bradsoft.com/download/index.asp to write your style sheets - much easier, keeps it safe out of FP's dirty paws.
one thing to note in your body tag 

body         
{ font-family: Verdana, Arial, Courier New;
  bgcolor: "#FFFFFF";
  color: "#0D6CA6"; 
  text-align: left;
  margin-top: 2; 
  margin-left: 0; 
  margin-right: 0; 
  }


should be (i know you know about the ""s) 
body         
{ font-family: Verdana, Arial, "Courier New", sans-serif;   /*you might prefer to remove courier new and leave the generic san-serif*/  
  background-color: #FFFFFF;   *bg-color is html*/   
  color: #0D6CA6; 
  text-align: left;
  margin-top: 2px;      /*you must specify a unit, pixels or ems or percentage*/   
  margin-left: 0px;      /*its better to put in a unit here as well but not strcitly necessary - zero is zero*/  
  margin-right: 0px; 
  }



This is excellent advice!

Also Dave, one thing that I dont know about is how they get the css into the frontpage after doing it. There are several areas in here where people have questioned the placement of their css file into front page, if I am making sense?



Giomanach -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 9:24:27)

Getting CSS into FP depends on the version you are using:

FP2000 and eariler has to be done manually, FP20002 has the option of making a link to the stylesheet, FP2003, doesn't that do CSS anyway??

DW does it for you so no worries there

Dan



fleur -> RE: new style sheet ! (2/25/2004 9:31:59)

ORIGINAL: gorilla

There's a well known inheritance bug in IE as it relates to td elements. would you mind posting the entire style sheet. Can't promise I'll be able to reply today, but I will reply.

Greetings from sunny Copenhagen btw :-)


Hello again [:)]

Here is my attempt at correcting the style sheet following all the excellent advice I've received - unfortunately, it doesn't mean I got it right! As a matter of fact, the extra "5px" of margin on the TD.tdb-head1 line with the turquoise background is still not showing up in the browser [:o]

body
{ font-family: Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #0D6CA6;
text-align: left;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

a:active { color: #8FCCCC }
a:link { color: #3BACC3 }
a:visited { color: #00759C }

TABLE
{
font-family: Verdana, Arial, sans-serif;
color: #0D6CA6;
border: 0px;
cellpadding: 0px;
cellspacing: 0px;
}

/* divider lines - blue & grey */

HR.hrb
{
color: #0D6CA6;
}

HR.hrg
{
color: #808080;
}


/* table data styles - pagename */

TD.pagename
{
text-align: left;
valign: top;
font-size: 75%;
font-weight: bold;
color: #808080;

}

/* small text for page links */

TD.tdlinks
{
text-align: left;
valign: top;
font-size: 60%;
color: #0D6CA6;
}

/* main heading dividers */

TD.tdb-head1
{
margin-top: 5px;
margin-bottom: 5px;
background-color: #8FCCCC;
text-align: left;
valign: top;
font-size: 80%;
color: #0D6CA6;
font-weight: bold;
}

TD.tdg-head1
{
margin-top: 5px;
margin-bottom: 5px;
background-color: #8FCCCC;
text-align: left;
valign: top;
font-size: 80%;
color: #808080;
font-weight: bold;
}

/* regular text - blue */

TD.tdbbig
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 75%;
color: #0D6CA6;
}

TD.tdb
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 70%;
color: #0D6CA6;
}

TD.tdbsmall
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 65%;
color: #0D6CA6;
}

/* regular text - grey */

TD.tdgbig
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 75%;
color: #808080;
}

TD.tdg
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 70%;
color: #808080;
}

TD.tdgsmall
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 65%;
color: #808080;
}

/* bold text - blue */

TD.tdbbig-bold
{
text-align: left;
valign: top;
font-size: 75%;
color: #0D6CA6;
font-weight: bold;
}

TD.tdb-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 70%;
color: #0D6CA6;
font-weight: bold;
}

TD.tdbsmall-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 65%;
color: #0D6CA6;
font-weight: bold;
}

/* bold text - grey */

TD.tdgbig-bold
{
text-align: left;
valign: top;
font-size: 75%;
color: #808080;
font-weight: bold;
}

TD.tdg-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 70%;
color: #808080;
font-weight: bold;
}

TD.tdgsmall-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 65%;
color: #808080;
font-weight: bold;
}

/* bold text - salmon */

TD.tdsbig-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 75%;
color: #E08578;
font-weight: bold;
}

TD.tds-bold
{
text-align: left;
line-height: 150%;
valign: top;
font-size: 70%;
color: #E08578;
font-weight: bold;
}

/* bold text - dark turquoise */

TD.tdtbig-bold
{
text-align: center;
valign: top;
font-size: 85%;
color: #019290;
font-weight: bold;
}

TD.tdt-bold
{
text-align: center;
line-height: 150%;
valign: top;
font-size: 70%;
color: #019290;
font-weight: bold;
}

Well, it looks better in my style sheet (it's all aligned)....

A bien-tot

fleur



fleur -> RE: bgcolor: "#8FCCCC" (reply to Gio...) (2/25/2004 9:39:57)

Hi Dan [:)]

It does have a feature for developing CSS, but it's so time consuming that my approach has been to do it manually, cutting and pasting and changing what needs to be changed, eg: text color or font size.

This way I can ensure consistancy and it's so much faster!!!

FP is great for people who don't know much such as myself, but I've still had to learn basic HTML to clean up the messy code it generates when you change your mind about stuff and start making changes !!!!

fleur



c1sissy -> RE: bgcolor: "#8FCCCC"; doesn't work! (2/25/2004 9:59:08)

Your link order is incorrect. You have 
a:active { color: #8FCCCC } 
a:link { color: #3BACC3 } 
a:visited { color: #00759C }


The correct order of links should be 
a:link { }
a:visited { }
a:hover { }
a:active


hope this helps out a bit.



fleur -> RE: bgcolor: "#8FCCCC" (reply c1sissy) (2/25/2004 10:09:54)

Finally, I can be of some help to you guys!!! [:)]

When you create a style sheet in PF2003, you create it with a file extension of .css (as I said in my previous reply I preferd to code it manually, copying and pasting stuff etc).

The key to having the CSSs work properly is to create a new folder in your local website directory, example:

C:\my websites\website05
--> foldername05
--> _borders
--> _private
--> ......
--> images
--> New_Folder

and then you store all the CSS files in this folder.

In my case, I defined a template which I use for all the pages on my website. So I modified the template by going to the main task bar:

1. go to FORMAT --> Style Sheet Links

2. on this menu, click "all pages" (so the CSS pages you add to the list will be linked to all pages in the website - this depends on what you are doing really)

3. now add all the style sheets in the correct order if you have more than one (which I do).

If you already had style sheets defined and stored somewhere else, you first need to delete the links to them:

If you don't apply all of the style sheets to each page in your website, you'll have to go to each page individually, then

1. go to FORMAT --> Style Sheet Links

2. remove the click next to "all pages"

3. for each CSS in the list, first highlight the file link (it will show up as still in the old folder name) and click remove to delete the old references.

4. then add each CSS one by one from the New Folder as required.

Obviously, if you are using all CSSs in all pages of your web, you only need to do this on one page.

Hope this isn't too confusing! [8|]

fleur [:)]



fleur -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/25/2004 13:11:28)

Deb,

Thanks [:)]

Didn't have any probs with the links or link colors, but then I wasn't using Hover...anyway, I prefer to use the standard so I'll change it.

fleur

PS where can I find out what the correct order is for all these bits? I'm never sure what I've done is really correct or not - I figure if it works it must be OK, but perhaps it isn't standard and is just supported by IE6.



c1sissy -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/25/2004 14:42:48)

Hey, no problem!

quote:

but perhaps it isn't standard and is just supported by IE6.

[:o][:o][:o]

Never use IE as your main tester! lol, Toooo forgiving with many things.

As far as where to go, Look in here in the css forum and you'll see at the top css links, Iin there are many things that you can read that will help you out.

Also, search different terms on google, you'll find tons of information to read.



fleur -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/25/2004 15:09:33)

Thanks for that [:)]

I have to say that from having started on this project about a month ago, and only working on it here and there, I've still managed to learn a lot, especially since I've discovered all the valuable help on this forum.

I've learned quite a bit today thanks to all of you [:)]

Can I ask what is happening to the little man in your avatar? He appears to be happy, yet looks like he's being sampled by a large insect that's about to devour him [;)]

fleur



fleur -> RE: bgcolor: "#8FCCCC" (reply M Gorilla) (2/25/2004 15:15:50)

Well,

I think my website is a bit more optimised than it was, although I can still do more. Please let me know what you think if you have a few minutes to browse through it.

http://www.changefacilitators.com

thanks!

fleur [:)]



c1sissy -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/25/2004 16:08:34)

quote:

Can I ask what is happening to the little man in your avatar? He appears to be happy, yet looks like he's being sampled by a large insect that's about to devour him

ooooo, roflol!! I'm laughing tooo hard to type the answer to this one! I'll have to come back later on that! btw, very long story! And that little man, that is Mel Gibson, [:D][:D]

I looked at your site and you are a quick learner! I would picture you giving me answers with css very shortly![;)]



jaybee -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/25/2004 18:32:50)

Fleur

The site is really nice. (Here we go..... here's the but bit!)

But

No just a couple of suggestions really. I use a high bright TFT screen and have been doing quite a bit of work recently on accessibility.

1. Can you make your colours a bit stronger. For people with sight problems and on my own monitor they're very pale in places. The pale pink copyright line for example

2. The logo is a bit fuzzy and the strap line whites out in places.

Otherwise really nice. Well done. [:)]



fleur -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/26/2004 5:15:50)

Hi there

I'm glad you think my use of CSS is good. It's really saved me days of work whenever I've decided to tweak colours or change font sizes. And on another site like this I found out how to use percentages for tables so that my website resizes and looks good no matter what size of screen you view it with - it also prints really well.

Also happy to see you got a chuckle from my question re your avatar - can't wait to get all the details!!! [:D]

Cheers from London (sunny this morning, at least for the next few minutes...)

fleur



Giomanach -> RE: bgcolor: "#8FCCCC"; (in reply to c2Ksissy) (2/26/2004 5:22:10)

quote:

Cheers from London (sunny this morning, at least for the next few minutes...)


It's not too bad up here, although we do have rain forecasted for this afternoon[&:]

Dan



fleur -> RE: bgcolor: "#8FCCCC"; (in reply to Jaybee) (2/26/2004 5:25:58)

Jaybee,

Many thanks for your feedback - I actually viewed my site on one of those screens (unfortunately, I still had the old banner) and noticed what you said about the salmon colour looking pale pink!!! I'd forgotten to change it as I've been working so hard on improving the content, banner, bullets, layout etc!


ORIGINAL: jaybee

1. Can you make your colours a bit stronger. For people with sight problems and on my own monitor they're very pale in places. The pale pink copyright line for example

YES - will do today, thanks for reminding me [:)]

2. The logo is a bit fuzzy and the strap line whites out in places.

OOPS - can't see that on my (high resolution) screen - and excuse me if I sound a bit silly for asking but what is a "strapline" please? I'll see what I can do to fix this

[/quote]

Best wishes,

fleur



fleur -> RE: bgcolor: "#8FCCCC"; (in reply to Giomanach) (2/26/2004 5:42:11)

Morning Dan [:)]

Would appreciate any comments you have re improving my website!

http://www.ChangeFacilitators.com

Have a great day [:)]

marie-paule



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.2651367