Link size bigger or smaller than text it's in
Hullo all, I just joined, inspired by fruitless Google searches for the subject above.
I'm working on a site which has two stylesheets, one I'm doing and one that is "corporate", i.e. I don't have access to it (so I work on my C drive, with a href to the corporate server's stylesheet). My stylesheet loads after the corporate one.
I noticed that the links in my web pages are all the same size, color and font-family (arial, 12px, blue), no matter where the link is (e.g. in text that's 15px verdana, 13px arial, 16px georgia etc).
The link's font-size is not specified in my stylesheet or even in the corporate one. What the corporate stylesheet specifies is:
body {font-family: Arial, sans-serif; font-size: 0.8em; }
a { color:#004673;font-family: Arial, sans-serif;}
In my own stylesheet, I can override that, but it also means I'll have to do a link style for every text style (i.e. one for the 15px verdana, one for the 13px arial...).
Question: But isn't there an easier way, like "style: the same style as the style of the text it's in, of course!" ? What's the workaround here?
Thanks in advance
Megan posted this at 14:48 — 19th August 2009.
She has: 11,421 posts
Joined: Jun 1999
That should be the default, and that's what they should have done in the corporate stylesheet. There should be no reason to repeat the font-family for the
atag when it's already defined in thebody.Can you post a URL so we can see what's happening with the text sizing? Sounds like something weird is going on there.
Otherwise, yes, you will probably have to create your own definitions for links if you want them to appear in different fonts. Although - and I didn't mean to pick on your design or anything - probably best not to use arial and verdana in the same design
Megan
Connect with us on Facebook!
texpad posted this at 15:04 — 19th August 2009.
They have: 4 posts
Joined: Aug 2009
Thanks for the answer. There is nothing to link to (it's all on my C drive). But I think I solved it anyway - the problem only occurred on one particular type of page where I wanted to use verdana, large font (the rest was arial). The corporate stylesheet was leaking in all over the place (in P, UL, LI, A, etc). So I created a specific div for those pages:
div#special_page
and treated it like this:
div#special_page p, div#special_page a
{
font-family: verdana, arial, geneva, helvetica, sans-serif;
font-size : 12px;
line-height : 18px;
}
div#special_page ul {
list-style : none;
font-family: verdana, arial, geneva, helvetica, sans-serif;
font-size : 12px;
line-height : 18px;
}
div#special_page p.abstract {
font-family:georgia,"times new roman", times, serif;
font-size : 15px;
line-height : 18px;
font-weight:bold;
}
..which immunized it from the corporate stylesheet. Even in Ie6.
No sure if that's standard procedure.
Thanks again for your interest. Much check back here again, like the site design.
Megan posted this at 17:48 — 19th August 2009.
She has: 11,421 posts
Joined: Jun 1999
You should be able to do this instead:
#special_page {
font-family: verdana, arial, geneva, helvetica, sans-serif;
font-size : 12px;
line-height : 18px;
}
#special_page ul {
list-style : none;
}
#special_page p.abstract {
font-size : 15px;
font-weight:bold;
}
Everything inside #special_page should inherit the font settings. Repeating the font-family in the corporate stylesheet is what caused this problem in the first place
If you really wanted to get rid of everything in the #special_page area you could just put a CSS reset in there (look it up!).
Thanks, I'm glad you're enjoying it. I hope to see you around in the future
Megan
Connect with us on Facebook!
texpad posted this at 17:23 — 19th August 2009.
They have: 4 posts
Joined: Aug 2009
...oh, and: I think Verdana can go with arial, if they've got clearly separate functions. In this case the navigation links are all business-like arial off to the side and verdana is the eye-pleasing content. On the rest of the site it's all arial (the rest of it is just archives and lists), but for these particular pages I wanted people to take time and read. Sometimes I used Georgia for that, but lately I thought verdana has that same elegant presence at 12px/17px. Of course this site is all pleasantly readable as well and the font is "tiny" - by the way, what HAVE they used here for body text (webdeveloper can't get to the bottom of it)? Anyone know?
Megan posted this at 17:41 — 19th August 2009.
She has: 11,421 posts
Joined: Jun 1999
So you don't feel the arial and verdana are conflicting then? Your prerogative, really
This is our font stack:
"Lucida Grande","Lucida Sans Unicode","Eras Medium ITC","Bitstream Vera Sans",Helvetica,Verdana,sans-serifDo you find the font to be too small? Which browser/OS are you on?
Megan
Connect with us on Facebook!
texpad posted this at 05:42 — 20th August 2009.
They have: 4 posts
Joined: Aug 2009
I was digressing about readability. As I said (above), I like Georgia and Verdana because they are airy and pleasant onscreen.
Then, noting the font on this site, it occurred to me that my 12px/17px verdana looks huge compared to the 8px lucida here (so lucida is "tiny", i.e. appears to be tiny). But both are easy to read. It's all context, in other words.
What kind of conflict is there between verdana and arial?
Megan posted this at 13:50 — 20th August 2009.
She has: 11,421 posts
Joined: Jun 1999
It's usually not good to use two fonts from the same family in the same design. see here for more:
http://www.apaddedcell.com/7-simple-rules-for-formatting-text-on-the-web
Megan
Connect with us on Facebook!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.