Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fonts in CSS

Status
Not open for further replies.
GiffordS

GiffordS

Programmer
May 31, 2001
194
CA
I'm fairly new to CSS and I'm having a bit of an issue. I have used the following:

<style type="text/css">
body {scrollbar-base-color:#5c5a4e; font:Verdana;}
.brown {font-color:#583303; font-size:8pt;}
.red {font-color:#b50909; font-size:8pt;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:hover{text-decoration:none;}
</style>

And then, in the body of the page I am using:

<span class="brown">Text that should be brown</span>

and

<span class="red">Text that should be red</span>

The font style and size are working great, but the color always defaults to black regardless of whether the text is in a brown span or a red span.

Please educate me here. THX
 
Sort by date Sort by votes
Actually, I have tried both color and font-color. Neither works.
 
Upvote 0 Downvote
Nevertheless, color is the correct one. There must be something funny going on with your code that isn't apparent from your example.

News and views of some obscure guy
 
Upvote 0 Downvote
Perhaps this:

Where you have the following line:
.brown {font-color:#583303; font-size:8pt;}

Should you not be specifying the element, like this:

span.brown {font-color:#583303; font-size:8pt;}
or
p.brown {font-color:#583303; font-size:8pt;}



Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
 
Upvote 0 Downvote
With minimum adjustments (like petey said, it's color, not font-color; Chris' font in body changed), this works for me crossbrowser:
Code: 
<style type="text/css">
body { scrollbar-base-color: #5c5a4e; font: normal 1em Verdana; }
.brown { color: #583303; font-size: 8pt; }
.red { color: #b50909; font-size: 8pt; }
a { text-decoration: none; }
</style>

<body>
<span class="brown">Text that should be brown</span>
<span class="red">Text that should be red</span>
</body>
 
Upvote 0 Downvote
I wanted to thank everyone for helping with this. I'm sorry but I got sidetracked on another project so I did not respond in a timely manner. Anyway, picking the ball back up again....

Vragabond nailed it with the color issue, but the font size is still not working. When I change the sizes to say, the brown font at 8pt and the red font at 10pt, they both appear the same size. Actually, that's not true. The brown is always the same size regardless of how I set it. The red seems to adjust, but not the brown. I'm at a loss as to why it would work with the red but not the brown. The current code is pasted below.


.brown {color:#583303; font-size: 8pt;}
.red {color:#b50909; font-size: 12pt;}


Any help would be once again appreciated.
 
Upvote 0 Downvote
I must admit I cannot reproduce your problem. Your code works fine on my machine. Are you trying this exact problem or is your problem embedded in a larger page with much more CSS styles and (X)HTML code?
 
Upvote 0 Downvote
I have posted all of the CSS elements contained on the page. It really is driving me a little batty. I'm not using a very complex page at all. Even worse, I've gotten it now to where it works once through, but not twice.

For instance, if I start the page using the brown class...

<span class="brown">content</span>

it works great. I can then change to the red class...

<span class="red">content</span>

and I have no problems. But... when I try to go back to the brown class...

<span class="brown">content</span>

I get neither the brown or the red, but the default black. Maybe I need a priest.
 
Upvote 0 Downvote
what about a cache clear?

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage
 
Upvote 0 Downvote
I've even gone so far as to avoid the third span entirely by encapsulating the rest of the page, from the end of the red span onward, in a division.

<span class="brown">content</span>
<span class="red">content</span>
<div class="brown>content</div>

Exact same result as before. The first two work well, but I when I try to go back to brown it goes instead to default black. I also tried giving each span a specific name, which would make any cache dump unnecessary, and that had no effect either.
 
Upvote 0 Downvote
please past your entire html here. there is likely some outside source of the error, since by itself, vrag's code works.

give us your complete html and we'll find out the answer, i hope.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Actually, I just found a workaround. I simply wrapped the page in a table and assigned the table element the brown class. That way I'm just using the spans to pick up the red class when needed. It works perfectly. I didn't change any code other than that, so I'm not really sure what the deal was. I do appreciate everyone's time, though.
 
Upvote 0 Downvote
This may have been a typo, but you are missing a " in your code:

Code: 
<span class="brown">content</span>
<span class="red">content</span>
<div class="brown[red]"[/red]>content</div>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
267
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
689
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top