ease up on the upper case, this isn’t 1997 dealing with HTML 3.2
it’s usually not a great idea to change the font-size without setting the line height, or to omit fallbacks should the font you want not exists (like say… verdana on a mac)
Are you on a computer (mac or linux) that doesn’t have verdana installed in the first place since that’s a microsoft core font?
the use of PT generally isn’t recommended, you may wish to try %/EM (I was a hard sell on that too – six years ago when it wasn’t all that viable. Today, the WCAG says use %/EM, so use %/em)
is that your ENTIRE stylesheet?.. Are you declaring anything in the markup that could be overriding that? This is why a CSS snippet isn’t all that helpful; CSS without the HTML it’s applied to is effectively gibberish.
You’re setting the same values over and over again – well, except for PRE which you seem to be setting in px… You’re also missing a few semi-colons that could break it in SOME browsers… and that dual pseudo-class would be unneccessary if you put :visited BEFORE :hover – and don’t forget that when you target:hover on a link, you should also nab :active and :focus
I would also advise against the 10px font size on PRE… but I’d have to see the page in question to be sure.
When declaring fonts I ALWAYS use the full condensed font property:
Including a style so that legacy browsers actually obey the entire line, setting the line-height and of course at least one fallback and the fallback-family. Good rule of thumb, change the font-size, change the line-height. I use 140% as I find spacing them apart a bit more than the norm (110-130% depending on browser and font renderer) makes it easier to keep track of word-wraps.
So fixing all that would probably look something like this:
body {
font:normal 85%/140% verdana,helvetica,sans-serif;
/*
85% works out to 14px on small font/96dpi systems,
and 17px for large font/120dpi users
*/
color:#333
}
table,
td,
th {
/*
this font declaration should be unneccessary unless you're
dealing with IE 5 or IE in quirks mode from a lack of doctype!
*/
font:normal 100%/140% verdana,helvetica,sans-serif;
/*
You shouldn't have to redeclare the color, it should be inheriting from BODY
*/
}
a {
color:#039;
text-decoration:none;
/* no need to restate font, should inherit from BODY */
}
a:visited {
color:#90D;
}
a:active,
a:focus,
a:hover {
color:#F00;
text-decoration:underline;
}
pre {
font:normal 10px/14px monospace;
}
.normal-link_small {
font:normal 90%/140% verdana,helvetica,sans-serif;
/* borders on illegibly small */
}
Though I’d have to see the markup to say for sure what’s going on. Do you have a copy online live we could take a look at?
Thanks for all the input!
Just to clarify, if i type some words it comes out in Times ( where i would expect it to come out in Verdana). If I then select a word and link it, the word changes to verdana.
This is simpler
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head><br>
<LINK rel=“stylesheet” href=“styles/style_01.css” type=“text/css”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
</head>
<body>
this is times but should be <a href=“http://sitepoint.com”>verdana</a>
</body>
</html>
The first HTML you posted has an invalid doctype – and hordes of attributes that if you are using CSS you shouldn’t even have in your HTML in the first place. You also are declaring FACE improperly, since face can’t accept multiple fonts like font-family can. That alone could be screwing things up.
You really might want to look into switching to STRICT instead of being in “transition” from 1997 to 1998… which means getting rid of background, bgcolor, text, link, vlink, alink, FONT, target, face, etc, etc, etc… All things that really have no business being in any HTML written after 2003ish. (when we kicked netscape 4 to the curb).
The second one has an invalid HEAD since BR can’t go in HEAD… and you’ve got HTML 3.2 in your HTML 4.01 tranny… even so, there’s nothing in the second one that should stop the text from being turned into verdana, unless you either didn’t show us the whole stylesheet, or worse, the link to the stylesheet is invalid…
Are you SURE the stylesheet is actually even being loaded? I mean, if you set background-color on body, does it take?
Again, this would be simpler if you put the site in question online live somewhere… most of us here could diagnose it instantly in that case — or at least confirm it’s a real problem and not just something wonky with your browser.
Actually, I just applied your CSS to the HTML in your first example – and it works if the CSS is actually called. CSS off it does what you describe, so I’m assuming the link to the CSS is wrong.
Though really, it’s hard to tell what’s what in here with the lack of semantic markup… though that “base target=” bit could be screwing things up too… Question: is this supposed to be inside a frameset?!? If so then it’s REALLY stuck in 1997… Going through the code, I’m assuming some wysiwyg is generating this? It’s got all the telltales of something like DW or Frontpage.
[B]Thank you for the time you have spent on this deathshadow
This is someone else’s markup. I am just beginning to address it. >>>the style sheet works as I said when I make a link the font changes to conform to what is directed by the style sheet. [/B]
You said:The first HTML you posted has an invalid doctype – and hordes of attributes that if you are using CSS you shouldn’t even have in your HTML in the first place. You also are declaring FACE improperly, since face can’t accept multiple fonts like font-family can. That alone could be screwing things up. Sure but, but no because it doesn’t work in the second example either
You really might want to look into switching to STRICT instead of being in “transition” from 1997 to 1998… which means getting rid of background, bgcolor, text, link, vlink, alink, FONT, target, face, etc, etc, etc… All things that really have no business being in any HTML written after 2003ish. (when we kicked netscape 4 to the curb). OK
The second one has an invalid HEAD since BR can’t go in HEAD… without the tag it still doesn’t work and you’ve got HTML 3.2 in your HTML 4.01 tranny… OK even so, there’s nothing in the second one that should stop the text from being turned into verdana, unless you either didn’t show us the whole stylesheet, I did or worse, the link to the stylesheet is invalid… it isn’t, see >>> above
Are you SURE the stylesheet is actually even being loaded? yes (above) I mean, if you set background-color on body, does it take?
Again, this would be simpler if you put the site in question online live somewhere… most of us here could diagnose it instantly in that case — or at least confirm it’s a real problem and not just something wonky with your browser. The full stylesheet and the page that it applies to is above
Many thanks,
I hate to do this, as all of Shad’s comments are quite valid…PUN!!!
to change a LINK font on hover:
a{}
a:focus,a:hover,a:active, {… }
a:hover {font-family:Verdana; }/hover rules must come after :link and :active…/
a:visited{…}
I must point out that chang9ing the font WILL HAVE unforeseen effects on your layout. 16px(for example) Helvetica is just not the same size as as 16px Verdana… so things will re flow accordingly… just keep that in mind. this is part of what Shad was saying in his first reply point #2.
If you wanted to affect inputs… you need to add input {font-family:inherit}
<inputs> (and <textarea>) is about forms. I guess it, I am just not getting what you are trying to ask, specifically. But I threw that in as a side guess anyway.
My first guess was that you were trying to get a LINK to change fonts on HOVER… which is why I suggested you revise the order of your CSS a:rules.
BTW, if suspect that your style sheet isnt linking… there’s a simple test for that.
AT THE END of your CSS style sheet in question… ADD: BODY{border-top:50px solid pink;} and SAVE
if when you reload the page you have thick pink line at the top of the page… your stylesheet is loading fine, leaving only two possibilities… you dont have the Verdana installed in the machine (in that case , NO MATTER WHAT YOU DO , you wont see it the font change) or your rules are in the wrong order… see my suggestion above
OH … also… get rid of all the FONT tags, am not certain that they would cause conflict but they maybe they are. in any case they are outdated and youa re using CSS now anyway.
yes i got the big pink border and as i said if link a word it becomes verdana so verdana is there. Have been using verdana as preferred font since 1996 so definitely there.
my question is in the first post, v clearly it is just a pain to have to keep manually making almost all of the font verdana sigh…
Notice that you never close the “font” tag, so everything after that is Arial.
Having said that, it is true that your code is a bit of a mess, and could stand some serious cleanup along the lines recommended by other posters. Just don’t let them get you bogged down - some of these guys, if you post a question about the font you’re using, will tell you that your shirt doesn’t match your pants.
As far as I can see that font tag is actually closed before it reaches the text the OP is talking about. (unless I missed a tag somewhere which is likely :))
Therefore it is not having any adverse effect on this text (and even if it was you’d be getting Arial and not Times as the OP states).
<p><font size="2" color="red">
<!>
<!>
<!>
<!>
</font>[B]Typying here should come out in verdana?[/B]</p>
As others have mentioned I am actually seeing that text as verdana and I have attached a screenshot showing that IE and Firefox agree that it is verdana.
I used the code and css that the OP supplied without changes (apart from making the text red so that we know the rule is being applied).
Therefore the real issue is elsewhere (although as others have said that code should be sent back to 1999 and a fresh start made :)).
it is just a pain to have to keep manually making almost all of the font verdana sigh.
You shouldn’t need to do that so perhaps post a screenshot of what you are seeing may give us a clue if you can’t host this online anywhere for us to fix for you.
OMG You guys have gone to so much trouble. The junky code will be junked. I didn’t write it. My problem is when I start to type in Dreamweaver I expect to see verdana not times. I made it simple back in this post: http://www.sitepoint.com/forums/4887390-post7.html
i type, i get times. I save and preview in the browser, i get times. Something is weird and it ain’t the junky code or anything in it as in the post above there’s nothing but the bare minimum. It is reading the style sheet as when I link text it changes into verdana.
<mythbusters>Well there’s your problem</mythbusters>
Fat bloated overpriced steaming piles of manure like Dreamweaver are inept enough on their own – loading some old outdated code into it and then expecting the WYSIWYG to actually behave normally is unrealistic at best… As a dearly departed friend of mine used to say: “The only thing you can learn from Dreamweaver is how NOT to build a website, and the only thing about Dreamweaver that can be considered professional grade tools are the people promoting it’s use”
WYSIWYG editors universally produce rubbish markup, rubbish CSS, and NONE of the example or auto-generated code included with them is worth a damn.
Do yourself a huge favor, uninstall that bloated useless nonsense, make microwave art with the CD’s and burn any documentation that came with it – then go get a plain flat text editor like Crimson, EditPlus, Notepad++, etc… and work with the actual code directly.
