August 5th, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=201
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
The Ultimate CSS Reference got a very nice review [1] on
Slashdot today. It scored a 9 out of 10!
Having served as the Technical Editor on the book, Andrew Tetlaw
has taken the opportunity to dive into the book and pull out a
handful of little-known facts about CSS for this issue. Check
out his article below!
If you don't have a copy of The Ultimate CSS Reference [2]
handy, you can use the online version, The SitePoint CSS
Reference [3], to follow along instead.
Happy reading!
[1] <http://books.slashdot.org/books/08/08/04/130249.shtml>
[2] <http://www.sitepoint.com/books/cssref1/>
[3] <http://reference.sitepoint.com/css/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Your job is building great websites for your clients. Lying awake
at night wondering if those sites are accessible is not.
That's why we maintain Fully Redundant Network Operations Center
capabilities from two cities 24/7/365. So you can impress your
clients and still get some shut-eye.
Find out why 3.1 million websites call The Planet home.
Celerons for $69/Month + Free Setup:
http://www.eztrackz.com/tracking.aspx?id=88330
Dual Xeon 2.4 IDE for $139:
http://www.eztrackz.com/tracking.aspx?id=88331
Free Backup for 90 Days:
http://www.eztrackz.com/tracking.aspx?id=88332
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Mining the SitePoint CSS Reference
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
MINING THE SITEPOINT CSS REFERENCE - - - - - - - - - - - - - - -
By Andrew Tetlaw
Most of us who know CSS are self taught. The problem with
teaching yourself is that you spend most of your time learning
only the stuff you'll need every day, leaving little holes in
your knowledge -- dim and dusty corners inhabited by obscure
facts you rarely use, but may be useful to know.
While editing the SitePoint CSS Reference [1] I came across many
valuable nuggets of CSS knowledge; things I only partially
understood or was completely unaware of. Here are a few
examples.
TERMINOLOGY: RULE V DECLARATION
In CSS, the term rule [2] is often misused. Sometimes you'll see
the following referred to as a rule:
padding: 1em;
It is, however, a declaration [3]. Here is a CSS rule:
body {
padding: 1em;
background-color: #fff;
}
A declaration specifies a value for a single property. A rule
can contain one or more declarations in a block that is preceded
by a selector.
PERCENTAGE VALUES FOR TOP OR BOTTOM PADDING OR MARGIN
If you specify a percentage value for top or bottom padding [4]
or margin [5], the percentage value represents a percentage of
the width of the containing block and not its height, as you
might expect.
MULTIPLE VALUES FOR TEXT-DECORATION
Did you know that the text-decoration [6] property can take
multiple space-separated values? For example you can do this:
a:hover, a:focus {
text-decoration: underline overline;
}
A LENGTH OR PERCENTAGE VALUE FOR VERTICAL-ALIGN
When used on inline boxes (not table cells), the vertical-align
[7] property can take a length or percentage value. The effect
is to raise or lower the position of the inline element in
relation to its line box. A percentage value represents a
percentage of the element's line-height [8].
[1] <http://reference.sitepoint.com/css/>
[2] <http://reference.sitepoint.com/css/rulesets>
[3] <http://reference.sitepoint.com/css/declarations>
[4] <http://reference.sitepoint.com/css/padding>
[5] <http://reference.sitepoint.com/css/margin>
[6] <http://reference.sitepoint.com/css/text-decoration>
[7] <http://reference.sitepoint.com/css/vertical-align>
[8] <http://reference.sitepoint.com/css/line-height>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
EXPAND YOUR BUSINESS WITH W3 MARKUP
Rely on us to get more projects completed each week! We provide:
* Pixel-precise hand-coded Valid CSS & (X)HTML for any project
* Theme or "skin" implementation into popular software like:
WordPress, Drupal, Joomla, MovableType, Blogger, Pligg,
Textpattern, Typo3, osCommerce, Shopify, X-Cart, SMC, even
HTML Email templates, Server Side Includes
* Same-day turnarounds and pricing discounts
* Search engine friendly semantic coding
* 100% cross-browser, cross-platform browser compatibility
* Money back guarantee and 100% non-disclosure
Get started here: http://w3-markup.com/p/sitepoint-newsletter-tech-times
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PERCENTAGE VALUES FOR BACKGROUND-POSITION
If you have ever wondered why your background image started
acting crazy when using percentage values for
background-position [1] then you may not have been aware of how
percentage values actually work with the property. A percentage
value refers to both a position inside the element as well as a
position within the image. A background-position set to 50% from
the top of an element will place the point in the background
image that is 50% of the height of the image at a position that
is 50% of the height of the element.
That's seems normal because it effectively centers the image
within the element. But, when you use unusual percentage values
like 66%, the position of the image seems to veer, unexpectedly,
all over the place. Alex has written an excellent blog post [2]
about the background-position property that explains the
behavior.
TABLE-LAYOUT AND PERFORMANCE
The table-layout [3] property allows you to specify that the
fixed layout algorithm should be used by the browser to
calculate column and table widths. In the default table layout
algorithm column widths are influenced by the contents of the
cells, even if you specify a width. You might say that
specifying a width in this situation is more like a guideline
than an actual rule.
You are able to specify that the fixed layout algorithm should
be used by setting table-layout to the value: fixed. Using this
algorithm, the browser will ignore the contents of the cells and
use the available width specifications to calculate the widths of
the table columns, even if the content doesn't fit. You can read
more about it in the Table Formatting [4] topic in the
reference.
The benefit of the fixed table layout is better performance,
especially for large tables with many columns. If you have a
large table, and can safely specify the column widths, using
table-layout: fixed; will enable the browser to display the
table faster.
If you have uncovered a nugget of obscure CSS knowledge in the
SitePoint CSS Reference or elsewhere leave your comments on the
blog entry:
JavaScript & CSS Blog: Stylish Scripting
by Andrew Tetlaw
Mining the SitePoint CSS Reference
http://www.sitepoint.com/blogs/?p=2775
[1] <http://reference.sitepoint.com/css/background-position>
[2] <http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/>
[3] <http://reference.sitepoint.com/css/table-layout>
[4] <http://reference.sitepoint.com/css/tableformatting>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Morae: Usability Testing for Software & Web Sites. An all-digital tool
that enables you to:
-Quickly identify website and software design problems
-Affordably conduct user testing. Quickly calculate metrics & graph results.
-Deliver professional results in a fraction of the time.
http://www.techsmith.com/morae.asp?cmp=StPtUX3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hope you enjoyed Andrew's tour of the dark and dusty corners of
CSS!
Since we've just released The Ultimate HTML Reference, I'm
thinking I might do the same thing for HTML starting next
issue...
Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
23 Beautiful Examples of Web Site Archives
by Jina Bolton
Does your design enthusiasm extend to the archives section of
your site, or do you tend to overlook its potential? In this
article, Jina takes us on a tour of appreciation though a
gallery of beautiful examples - you'll never neglect this aspect
of a site again!
http://www.sitepoint.com/article/1661
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
new search engine: Cuil
<http://www.sitepoint.com/forums/showthread.php?threadid=562352>
Hiding Pages from Search Engines
<http://www.sitepoint.com/forums/showthread.php?threadid=563245>
Firefox 3.1 Preview
<http://www.sitepoint.com/forums/showthread.php?threadid=562827>
Microsoft looks to Mojave to revive image
<http://www.sitepoint.com/forums/showthread.php?threadid=561952>
How many are actually running without javascript?
<http://www.sitepoint.com/forums/showthread.php?threadid=560659>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Can You Make A Living As an iPhone Developer? (2 comments)
http://www.sitepoint.com/blogs/2008/08/05/can-you-make-a-living-as-an-iphone-developer/
Yahoo! Releases Music API
http://www.sitepoint.com/blogs/2008/08/05/yahoo-releases-music-api/
Adobe CTO: Interactive Flash Video Coming
http://www.sitepoint.com/blogs/2008/08/05/adobe-cto-interactive-flash-video-coming/
Digitizing Paper is a New Cottage Industry (1 comment)
http://www.sitepoint.com/blogs/2008/08/05/digitizing-paper-is-a-new-cottage-industry/
Yahoo! Is Becoming A Leading Semantic Web Pusher (1 comment)
http://www.sitepoint.com/blogs/2008/08/02/yahoo-is-becoming-a-leading-semantic-web-pusher/
Advice: Microsoft Should Invest Y Combinator-style (1 comment)
http://www.sitepoint.com/blogs/2008/08/02/advice-microsoft-should-invest-y-combinator-style/
The New Delicious is Finally Here (5 comments)
http://www.sitepoint.com/blogs/2008/08/01/thethe-new-delicious-is-finally-here/
Web Tech Blog: TECHNICALLY SPEAKING
SitePoint Needs Web Tech Enthusiasts a?" Win An iPhone!
http://www.sitepoint.com/blogs/2008/08/04/sitepoint-needs-web-tech-enthusiasts-win-an-iphone/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list, send a blank email to:
leave-2350308-2266608.e57363ef99c8b59c8667cca2fd106cbe@sitepoint.sparklist.com
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.