|
| Web News |
UK loses its nanotechnology lead
The UK government has failed to allocate enough funding to nanotechnology, and the funding that has been allocated has not be fairly distributed, according...
BBC to launch mobile TV trial
UK broadcaster BBC has partnered with mobile operators Orange, Vodafone and 3 to launch a trial to syndicate a range of its television channels and radio networks...
Credit card heist hits 45 million users
A security breach on the computer systems at TK Maxx is now thought to have led to the theft of 45.7 million credit and debit card records.The data theft took place over...
Company profile: Zeus Technology
Web-acceleration company Zeus Technology is in growth mode — the Cambridge-based company has just opened a US office, and is expanding its staff and distribution channel. But unlike most of its peers, Zeus has...
999 concerns prompts regulation of internet phone...
Telecoms watchdog Ofcom yesterday unveiled plans to regulate the use of the internet to make phone calls for the first time, sparking fears that heavy handed...
CNET launches wi-fi watch site for business travellers
Online publisher CNET Networks UK is to launch a user-generated 'wi-fi watch' website next week. The site, www.atlarge.com, aims to publish unbiased and...
|
|
03.30.07
Helpful Tips On CSS
 By
Philipp Lenssen
1. Color shortcuts and color conversions
In CSS, you can write color values in a variety of ways, e.g. "RGB(0,0,0)", "black", and "#000000" all result in black. However, you can also use a shortcut for hexadecimal values that follows this form: "#000". #0BC for example means #00BBCC but is a little quicker to write.
Sometimes when you need to feed color values into forms, e.g. for tools such as Google AdSense where you can define a border and background color, you need to provide hexadecimal values only. However, as you may want to mirror an existing RGB value in your CSS file, you need a color converter. Some years ago I created desktop tool WebCol to convert between the different CSS color formats and I'm still using it for those occasions... and there are also online converters.
2. CSS bug hunting
Your stylesheet doesn't seem to do what you want it to do? There's a variety of approaches you can use to debug the problem now:
* Make sure your HTML validates. Validation is the basis for the actual debugging process, because if you have an open tag somewhere, the whole file may be screwed. So jump to the W3C HTML validator and do a quick check if every element is in place.
* Make sure you're running the CSS in compliant mode. Many browsers support two rendering modes; a backwards compliant "quirks mode" and a "standards compliance mode." For example, in Firefox you can right-click any HTML page and select "View page info" to check the render mode value. If you are having CSS problems, don't even start to tweak and debug before you've ensured you're running in the standards compliance mode (e.g. having a Strict doctype in your HTML ensures this).
Try a Better Way Today.
Try WebEx MeetMeNow - Click
Here |
|
* Use a deeper selector. Sometimes, the styling you want to achieve is overridden by another selector somewhere else in the CSS file you're working on (or another CSS file). A quick fix is to use a deeper selector - e.g. "body div#foo .bar { ... }" instead of just ".bar { ... }" to give your current styling more importance in the cascading.
* Confused about the box model you're currently working with? CSS can get confusing if you're working with deeply nested HTML elements. One quick visualization of what you're actually looking at is to use something like "div { border: 2px dotted red; }" to give every div element on the page a red border, and then refresh the HTML page (you want to remove the border after you found the bug, of course).
* Someone told you your page is broken on Mac Safari... but you run Windows! How do you check how well your CSS file works in different browsers, different browser versions, and different operating systems? One easy way is to use BrowserPool. This little free download lets you select from a variety of OS's and browser versions, and you can then upload your (trade-secret-cleansed!) HTML to your server to give it a quick check through the eyes of this "virtual PC."
3. Media separation
One bonus of using external CSS files instead of inline stylesheets is that you can serve different layouts to different media - like a mobile layout vs a screen layout. So you'll be using something like...
Continue reading this article.
About the Author:
Philipp Lenssen from Germany, author of 55 Ways to Have Fun With Google, shares his views & news on the search industry in the daily Google Blogoscoped.
|
