Hi all, My text looks fine when I've applied .smallprint to it but when I then link part of that text to another page it turns blue. Any ideas would be gratefully received? It's driving me nuts! <html> <head> <title>XYZ</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style>a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } .smalltopmenu { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: uppercase; text-decoration: none; color: #019cb0; line-height: 16px; } .download { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: bolder; font-variant: normal; text-transform: uppercase; text-decoration: none; color: #019cb0; line-height: normal; } .smallprint { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: bolder; font-variant: normal; text-transform: uppercase; color: #999999; padding-top: 10px; padding-bottom: 10px; text-decoration: none; line-height: normal; padding-right: 0px; padding-left: 0px; } .productname { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; color: #000000; text-decoration: none; margin-bottom: 5px; line-height: normal; font-variant: normal; margin-top: 0px; margin-right: 0px; margin-left: 0px; } .sectiontitle { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; font-weight: bold; font-variant: normal; color: #000000; text-decoration: none; margin-top: 6px; margin-bottom: 2px; line-height: normal; margin-right: 0px; margin-left: 0px; } .subhead { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: 16px; font-weight: normal; font-variant: normal; color: #666666; text-decoration: none; margin-bottom: 30px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } .body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; margin-right: 10px; margin-bottom: 5px; color: #666666; margin-top: 0px; margin-left: 0px; } .bodybold { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: 16px; font-weight: bold; font-variant: normal; color: #666666; text-decoration: none; margin-right: 10px; margin-bottom: 2px; margin-top: 0px; margin-left: 0px; } </style> </head>
Probably because you have the :link styled but then it gets visited and changes colors due to changing to the :visited state.
1) without the markup the CSS is being applied TO, any CSS is gibberish. 2) Condense yer *** properties, you've got over a hundred lines without empty lines between elements doing the job of 60 with blank lines between them.. 3) if you are setting all the psuedo-states the same, just declare the parent ONCE! 4) while px might be ok for some of those elements, I really hope you aren't formatting ALL of your text in px since that's a total and miserable accessibility /FAIL/. Remember, use px when you have to, and you should never have to on your content. 5) If you ARE going to use PX metric fonts, anything smaller than 11px is also a /FAIL/ at life so far as accessibility is concerned - hell I get twitchy below 14px. 6) I'm going to assume that is an incomplete snippet - you do have a DOCTYPE, right? 7) Never trust the named line-heights. 8) You might want to try using a reset so you don't saddle yourself with cross-browser headaches later on. 9) Stripping underlines off your anchors is REALLY bad practice and should be avoided. 10) You should probably be setting your content size on BODY, not .body 11) It's bad practice to state font-family using caps. While only older versions of netscape and mozilla kvetch about it, better safe than sorry. Likewise it's bad practice to state hex numbers in lower case. 12) .bodybold looks like you are using a presentational class for something that should just use the tag - but again without the HTML it's hard to say. 13) I think everyone here is missing what you are saying... Basically if I'm reading it right you are complaining that if you put the text into anchors, the anchor is blue? That's the default color for an anchor and you've done nothing to change that in your CSS. Putting that all together, let's simplify down your CSS into less of a train wreck... This won't change the behavior, but at least makes the bloody thing manageable. /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } .body { font:normal 85%/130% arial,helvetica,sans-serif; color:#666; } a { text-decoration:none; color:#000; /* set your anchor colors here */ } .smalltopmenu { text-transform: uppercase; font:normal 11px/16px arial,helvetica,sans-serif; color: #019CB0; } .download { text-transform: uppercase; font:bold 9px/11px arial,helvetica,sans-serif; color: #019CB0; } .smallprint { text-transform: uppercase; font:bold 9px/11px arial,helvetica,sans-serif; color:#999; padding:10px 0; } .productname { font:bold 16px/19px arial,helvetica,sans-serif; color:#000; margin-bottom:5px; } .sectiontitle { font:bold 24px/28px arial,helvetica,sans-serif; color:#000; margin:6px 0 2px; } .subhead { font:normal 14px/16px arial,helvetica,sans-serif; color:#666; margin-bottom:30px; } Code (markup): Though .productName, .sectionTitle and a bunch of those other values LOOK like they should probably be heading tags (we have tags for that) and not classes, much less .smalltopmenu which being a menu should be a unordered list - so where's your styling for your LI and anchors under that list? I've got a feeling that you are throwing classes at *** that doesn't even NEED classes. Again, without the markup it's being applied to, the CSS is gibberish. Your snippet, while unnecessarily long, does nothing but make more questions.
%/em - that's what the WCAG says. Some developers will tell you only to EVER use %/em - I'm not that strict about it as there ARE legitimate reasons to use it; they ALL involve image interactions. If you have it over a fixed height image, then px will prevent the layout from breaking on large font/120dpi systems. Personally I restrict that scenario to when it's behind a image for gilder-levin, or for single line elements like menu items - I would never put a fixed height image behind flow text in the 'content' areas, since that should be %/em whenever possible... or even PT, since points is the only metric that Firefux and other gecko based browsers will pay the least attention to in regards to the host OS metric - which is why for the LONGEST time forum developers using pt in their CSS - a habit we got when we still cared about supporting netscape 4. (and that I used to defend for that reason!) Now that we can effectively say *** Nyetscape 4 users, we can go %/em since anyone who cares about the system metric will either change the default font-size in firefox, or say **** firefox and use a browser that actually HAS accessibility aids like Opera or even IE. There's a reason I put 85%/130% on my body tag - gives me 14px default content size at 96dpi, 17px at 120dpi, and 12px for the handful of 75dpi handheld and legacy *nix users... Well, that and you can NEVER trust the default line-height. I made a page a while back that compares all the sizes/metrics and what effects they have on what browsers and OS. http://battletech.hopto.org/html_tutorials/fontCompare/template.html The chart near the bottom which shows medium/100%/16px/12pt side-by-side really illustrates how different all the various systems handle the exact same size declarations... and I also cover the 'problem' with trusting the inherited line-height below that. Font sizes are a LOT more complex than most people think.
Great read, really informative! I never bothered with screen differences before, but now I certainly will. Have you had any experience with reading pt based text, say 12p, off a device with a smaller than 96dpi screen? Does it look too big? The reason I ask this is because Nokia N900 (and probably all the future Nokia phones) has a mobile version of Firefox as its browser and as you said %/em doesn't work properly in FF, which may cause some problems?
Well, FF doesn't read the 'system metric' from windows - but you can manually set the default font size under tools > Options > Content > Fonts & Colors... there's a 'size' dropdown, and it's in PX. Setting it to 20 makes FF behave like browsers that obey the system metric... If I was building it to a small screen phone, I'd probably change that value for said device; keeping the 'minimum font-size' in mind. (I love it when people say "I can't get 8px fonts in FF" - no shit, really?) But if it's a phone, it should probably be ignoring font-size in the first place. Most small screen devices do (Blazer, Opera mini/mobile)