homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
My fonts won't register for h2,h3 tags. Everything else does?
Why won't the fonts work, but everything else does?
designbylanoue




msg:4033377
 12:45 am on Nov 29, 2009 (gmt 0)

I am having trouble with Fonts registering in my h2, h3 tags... however the padding, font-size, and color does register? Can someone please help?

The webpage is here:

<snip>

and the css is here:

<snip>

The issue is on these two tags:

.col1 h2 a:link {
color: #CCDDEB;
font: Verdana, Geneva, sans-serif;
font-size: 32px;
padding: 0px 10px;
}

.col2 h3 a:link {
color: #CCDDEB;
font: Verdana, Geneva, sans-serif;
font-size: 32px;
padding: 0px 10px;
}

Thanks to anyone who can help!

[edited by: swa66 at 1:03 am (utc) on Nov. 29, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

 

swa66




msg:4033383
 1:09 am on Nov 29, 2009 (gmt 0)

Welcome to WebmasterWorld!

Links to problem pages: we don't do that out here, but it's easy enough without referencing it anyway.

Font: try "font-family:" or use the "font:" shorthand but then you'll at least have to move the fontsize to it too.
[w3.org...]

To find such errors for yourself: try validating your code.
[jigsaw.w3.org...]

":link" peudo-class unless you intend to have something radically different on :visited I'd suggest to style the "a" without any pseudo class applied for your basic needs and then you still can change what you need changed in the (many) different states a link can be.
See here: [webmasterworld.com...]

[edited by: swa66 at 2:13 am (utc) on Nov. 29, 2009]

D_Blackwell




msg:4033385
 1:13 am on Nov 29, 2009 (gmt 0)

Welcome designbylanoue. The personal links are going to get chopped, so I cannot use as a reference.
................................

font: is a shorthand. You cannot declare only font-family: with shorthand. This is why it is not working.
................................

Option 1: Truly use the shorthand:

{font: 32px Verdana, Geneva, sans-serif;}
................................

Option 2: Declare separately:

{font-size: 32px;
font-family: Verdana, Geneva, sans-serif;}

I would prefer Option 2, but either is fine.
................................

NOTE: font-size: and font-family: are required to use the shorthand. Other values are optional.
................................

NOTE: font-size-adjust: and font-stretch: cannot be included in font: shorthand and should be declared separately.
................................

NOTE:
Because the declaration blocks provided as code samples are absolutely identical, there is no need to declare twice.

Example:

.col1 h2 a:link, .col2 h3 a:link {
color: #ccddeb;
font: 32px Verdana, Geneva, sans-serif;
padding: 0px 10px;
}

Now, both the selector designations will share the declaration block.

D_Blackwell




msg:4033391
 1:36 am on Nov 29, 2009 (gmt 0)

While you would benefit from becoming extremely familiar with W3C site, it is of limited use for viewing working examples and clarifying explanations and information. The academic stress can make it less than helpful at times. The #font-shorthand link is an example of the limitation. Where is is put in clear, simple wording that font-size: and font-family: are required, or it won't work (in the real world)?

In addition to searching an element or what-have-you on W3C, you should also bring up results that actually show the guidelines at work. These sites often have much more useful and understandable explanations to go with the official, technical, guidelines.
...............

I intended to state that I prefer Option 1 in the previous post - over Option 2.

swa66




msg:4033393
 1:57 am on Nov 29, 2009 (gmt 0)


While you would benefit from becoming extremely familiar with W3C site, it is of limited use for viewing working examples and clarifying explanations and information. The academic stress can make it less than helpful at times. The #font-shorthand link is an example of the limitation. Where is is put in clear, simple wording that font-size: and font-family: are required, or it won't work (in the real world)?

It actually says so in the BNF-like usage ...
[ [ <'font-style'> <'font-variant'> <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] caption icon menu message-box small-caption status-bar inherit

Explaining that in plain text is going to be quite a long text.
The square braces denote optional parts.

Granted not everybody is apt at parsing all-out BNF (but this simplified version is easy enough once you know a few principles used. Nevertheless it is *the* reference and has examples (not examples of what doesn't work, but examples that do work as well as a number of pitfalls (such as the shorthand resetting all it can set to the default value).

designbylanoue




msg:4033398
 2:31 am on Nov 29, 2009 (gmt 0)

Thanks guys it works perfectly, BTW sorry for the links... I am new to this.

<div id="wrapper">
<div class="col1">
<h2><a href="#">Title of Post Goes Here!</a></h2>
</div>
</div>

CSS:
.col1 h2 a:link {
color: #CCDDEB;
font: Verdana, Geneva, sans-serif;
font-size: 32px;
padding: 0px 10px;
}

Thanks again Guys and Gals!

[edited by: SuzyUK at 1:52 pm (utc) on Nov. 30, 2009]
[edit reason] removed excess code, per charter, [/edit]

SuzyUK




msg:4034010
 2:09 pm on Nov 30, 2009 (gmt 0)

Where is is put in clear, simple wording that font-size: and font-family: are required, or it won't work (in the real world)?

We tried explaining some the more common pitfalls a few years back, in this thread [webmasterworld.com] - font is in post #:1204419

Note: setting a font using a shorthand property later in the cascade will override more explicit settings from earlier on.

It, the font shorthand property, will work quite well without any of the optional parts, EXCEPT, if used it will read 3 of them to have been implicitly set to default values. i.e. font {} without a font weight, will revert back to the default font-weight, which may override a more explicit setting earlier in the cascade.

I would generally not use shorthand font settings except for body and/or wrapper elements, then take finer control using the longhand properties further down the cascade if required.

HTH

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved