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!

CSS font issue 1

Status
Not open for further replies.
EvertonFC

EvertonFC

Technical User
Nov 24, 2004
107
GB
Hello

I am using the following in my head tag:

<style type="text/css">

H5 {font-weight: medium;
font-style: normal;
font-size: 8pt;
font-family: verdana;
fontcolor: #FFFFFF;}

</style>

and in <BODY> I have:

<H5>
<table width="40%" border="0" cellspacing="0" cellpadding="1" align="center">
<tr>
<td width="15%"><nobr><a href="gall.html">First</a> |
<a href="Retail.html">Previous</a></nobr></td>

<td width="40%" align="center"><nobr><a href="gall.html"> 1 |<a href="Waiter.html"> 2</a>| <a href="Teacher.html">3</a>
| <a href="Retail.html">4</a>| <a href="Engineer.html">5</a> | <a href="Office.html">6</a> | </nobr></td>
<td align="right" width="10%"><nobr><a href="Office.html">Next</a> | <a href="Office.html">Last</a></nobr></td>
</tr>
</table><H5>

The link is:
I can't seem to force CSS to recognise the font colour or size. I can get it to work without CSS, but I am trying to get away from the old tags.

I would appreciate any suggestions.

Thanks.

EvertonFC
 
Sort by date Sort by votes
You need to apply your CSS to the <td> tag, not the H% idf you want to affect the stuff in the <td>

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Well it could be because the cascade doesn't go through to tables in some browsers - it's an old problem though not one I come up against too often anymore.

The other thing is that I am not certain you should be putting a table inside a heading tag. Why are you doing that?
To be honest you don't need a table at all to do what you are doing. Just use an unordered list and style it with CSS to display the links alongside each other.
Much more sensible.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
And, just since nobody has mentioned it yet... fontcolor is not an appropriate attribute. It is simply [tt]color[/tt].
 
Upvote 0 Downvote
Of course, validation would have shown that. Why do so many people ask for help here without validating their code, only to find that's the first thing they're usually told, and it usually solves their issue?

*sigh*

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Many thanks for your posts.

This validates in CSS:

<style type="text/css">

td {font: medium normal 8pt verdana #FFFFFF}

</style>

But, as seen here,
the text (the links) are blue/purple and not in Verdana.

Thanks, anyway.

EvertonFC
 
Upvote 0 Downvote
It is because td is a table cell, not a link. Links do not inherit the color because they should be distinguishable from the rest of the text. You wouldn't want to look for links on a page where links would just look like normal text, would you? Specific link changes should be done to the link itself. And still, what is the 'medium' in your font shorthand? I looked on the W3 font page and it looks like medium cannot apply where you're applying it.
 
Upvote 0 Downvote
I wholeheartedly agree that it is. But lets look at the way one should compose the font shorthand according to W3:

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

Now, let's look at the OP's font line:

font: medium normal 8pt verdana #FFFFFF}

Since there is no color in font shorthand, we can forget about the #FFFFFF. That cannot be applied to anything else. Font-family is simple, that's Verdana. So we're left with '8pt', 'normal' and 'medium' and on the other hand with font-style, font-variant, font-weight and font-size. Line-height does not apply since we can see that we must separate it with a slash next to font-size.

Now, how to fit those three values in those four categories?

font-style accepts normal | italic | oblique so that one can only take normal.
font-variant accepts normal | small-caps so that too can only take normal.
font-weight accepts normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 so that three can only take normal from that list.
Which leaves us with font-size, which can take both 8pt and medium but not both. So either 8pt or medium is a renegade value in that declaration. Which one will it be, I guess will be at the discretion of the browser (could be that it is ignoring the whole things altogether).
 
Upvote 0 Downvote
Hello

Yes, I agree that usually we want our links to be distinguishable from normal text, but in this case they only text I have on the page are links.

Therefore, I would prefer them to be all white (the background is black).

However, I have still not had any sucess in achieving this effect.

I have tried different things, including the following, but still can't resolve this issue (I have reduced the amount of HTML for convenience):

<!--
? { font-family: Verdana; 8pt; color: #FFFFFF;
}
-->
</style>


<table width="40%">

<tr><td width="15%"><nobr><a href="gall.html">First</a> |
<a href="Retail.html">Previous</a></nobr></td></tr>

</table>

I have indicated with a ? because I am unsure which value to insert and where I should insert it. I don't want to use p { etc (as some tutorials seem to suggest) because I need to use the white font in 8pt in a table cell. But do I insert the value, whatever it is, in with the TD itself?

Many thanks

EvertonFC

 
Upvote 0 Downvote
Hello Dan

That did the trick! Many thanks. Now I just have to find a way of changing the font to 8pt Verdana (instead of the boring 12pt Times), and I'm fine.

I didn't realise that font colour did not have the same properities as other font attributes, so I'm gratful for your assistance.

Cheers

Steve
 
Upvote 0 Downvote
So how about continuing the same way...
Code: 
td a {
     color: #FFFFFF;
     font: normal 8pt Verdana;
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
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
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
268
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
298
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top