[Nfb-web] FW: [BW] Ten more CSS tricks you may not know

Mon Oct 30 07:42:56 CST 2006

Susie Stanzel sends this along with the thought it may be helpful to us.

 Ten more CSS tricks you may not know

By Trenton Moss

Cascading Style Sheets are the foundation on which many of the best
websites are built. Using CSS allows developers to describe the common
style for the
website, in terms of colours, fonts and layouts. Following up on his
previous tutorial,

LINK:
http://www.itwales.com/997814.htm

Trenton Moss of Webcredible shares some more of his top tips to help you
get the most from your CSS.

1. Block vs. inline level elements

Nearly all HTML elements are either block or inline elements. The
characteristics of block elements include:
Always begin on a new line

Height, line-height and top and bottom margins can be manipulated

Width defaults to 100% of their containing element, unless a width is
specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul>, and
<li>. Inline elements on the other hand have the opposite
characteristics:

Begin on the same line

Height, line-height and top and bottom margins can't be changed

Width is as long as the text/image and can't be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>,
<img>, <strong> and <em>.

To change an element's status you can use display: inline or display:
block. But what's the point of changing an element from being block to
inline, or
vice-versa? Well, at first it may seem like you might hardly ever use
this, but in actual fact this is a very powerful technique, which you
can use any
time you want to:

Have an inline element start on a new line

Have a block element start on the same line

Control the width of an inline element (particularly useful for
navigation links)

Manipulate the height of an inline element

Set a background colour as wide as the text for block elements, without
having to specify a width

2. Another box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6
browsers on PC, where by the border and padding are included in the
width of an element,
as opposed to added on.

LINK:
http://tantek.com/CSS/Examples/boxmodelhack.html

A number of CSS-based solutions have been put forward to remedy this, so
here's another one which we really like:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all
browsers except IE 5.x on PC. Because the second command comes second it
takes precedence
over the first - any command that comes second will always override a
preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, IE 5.0 will
ignore the command. Likewise, by placing these empty comment tags after
the colon, IE
5.5 will ignore the command. By using these two rules in conjunction
with each other, we can hide the command from all of IE 5.x.

3. Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby
you can specify a minimum width for any element. This can be
particularly useful
for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come
up with a new way of making this work in this browser. First, we'll
insert a <div>
under the <body> tag, as we can't assign a minimum width to the <body>:

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of
600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a
short JavaScript command that only IE understands. Do note though, this
command
will cause your CSS document to invalidate so you may prefer to insert
it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE and width & height issues

IE has a rather strange way of doing things. It doesn't understand the
min-width and min-height commands, but instead interprets width and
height as min-width
and min-height - go figure!

This can cause problems, because we may need boxes to be resizable
should more text need to go in them or should the user resize text. If
we only use the
width and height commands on a box then non-IE browsers won't allow the
box to resize. If we only use the min-width and min-height commands
though then
we can't control the width or height in IE!

This can be especially problematic when using background images. If
you're using a background image that's 80px wide and 35px high, then
you'll want to
make sure that the default size for a box using this image is exactly 80
x 35px. However, if users resize the text then the box size will need to
expand
gracefully.

To resolve this problem, you can use the following code for a box with
class="box":

box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS6 rule but IE will ignore
the second rule because it makes use of the child selector command.
Non-IE browsers
will read through the second one and will override the values from the
first rule because this CSS rule is more specific, and CSS rules that
are more specific
always override those that are less specific.

5. Text-transform command

One of the lesser known, but really useful CSS commands is the
text-transform command. Three of the more common values for this rule
are: text-transform:
uppercase, text-transform: lowercase and text-transform: capitalize. The
first rule turns all characters into capital letters, the second turns
them all
into small letters, and the third makes the first letter of each word
capitals.

This command is incredibly useful to help ensure consistency in style
across an entire website, particularly if there a number of content
editors. Say for
example your style guide dictates that words in headings must always
begin with capital letters. To ensure that this is always the case, use
text-transform:
capitalize. Even if site editors forget about the capitalisation, their
mistake won't show up on the website.

It's also preferable to use text-transform: uppercase to capitalise
words, as screen readers may pronounce shorter words in capital letters
as acronyms.
A great example of this is 'CONTACT US', which is pronounced as 'contact
U S' by some screen readers.

6. Disappearing text or images in IE?

IE has a very strange bug where text or background images sometimes
disappears from sight. These items are still actually there, and if you
highlight everything
on screen or hit refresh they'll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text next to a
floated element. To remedy the problem, simply insert position: relative
into the
CSS command for the disappearing element, and for some bizarre reason
that'll usually fix the problem. If this doesn't work (it sometimes
doesn't), assign
a width to the offending element in the CSS and that should fix the
problem.

7. Invisible text

Sometime you may actually want to make text invisible. Invisible text
can be especially useful for screen reader users, perhaps to assign a
label to a form
item or insert a heading ahead of a section. Don't want to change the
visual appearance by inserting these? Make them invisible and no one
using a visual
browser knows that they're there.

You may also want to make text invisible if using a print or handheld
CSS file, as some information may not need to be displayed on either of
these mediums
(see below for more on this).

To make text invisible you can use display: none - easy! This works fine
for hiding text from handhelds (if CSS is supported) and printed web
pages, but
isn't so great for many screen readers. Screen readers are now becoming
too clever for their own good, and some will actually ignore the any
text that
has the rule display: none assigned to it.

For screen readers users therefore, a new approach is needed: position:
absolute; left: -9000px. This basically takes the text and positions it
9000px to
the left of the left edge of the screen, essentially making it
invisible.

8. CSS document for handhelds

A separate CSS document can be created for PDAs and mobile phones, and
only activated when one of these devices is being used to access your
site. More
and more websites are creating separate CSS documents for printing, so
web pages automatically become print-friendly when users choose to print
them.

LINK:
http://www.alistapart.com/articles/goingtoprint/

You can also do the same for handheld devices.

The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css"
media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands
in the main CSS document. So, what commands should you place in this
file?

Ideally, you want handheld web users to avoid having to scroll across.
To test this, open up your website in a regular browser window and
resize it to 150px
in width. Then, open up your main CSS file and insert some new commands
at the very bottom of the document. The commands you place here should
adjust the
layout of the website so that it doesn't require horizontal scrolling at
a 150px width. Then, open up a new document, cut and paste these new
commands
over, and save it as handheldstyle.css (or whatever name you want to
give it).

What your website offers to handheld web users should be quite different
to what it offers on traditional web browsers, as the user experience is
quite
different. For further information, a book such as Handheld Usability is
a great read.

LINK:
http://www.amazon.co.uk/exec/obidos/ASIN/0470844469/ref=pd_ecc_rvi_3/026
-2336786-5677265

9. 3-d push button effect

Back in the early days of the web, 3-d buttons that appeared to become
pushed in when moused over were all the rage. At that time, this could
only be achieved
through images and JavaScript, but now with the advent of CSS we can go
all retro and re-create a 3-d effect.
The main CSS commands you'll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve
the desired presentation effect - the only limit is your imagination!

10. Same navigation code on every page

Most websites highlight the navigation item of the user's location in
the website, to help users orientate themselves. This is a fundamental
requirement
for basic usability, but can be a pain as you'll need to tweak the HTML
code behind the navigation for each and every page. So can we have the
best of
both worlds? Is it possible to have the navigation highlighted on every
page, without having to tweak the HTML code on each and every page? Of
course it
is...

First of all, you'll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home" >Home</a></li>
<li><a href="#" class="about" >About us</a></li>
<li><a href="#" class="contact" >Contact us</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should be
representative of where users are in the site and should change when
users move to
a different site section. When in 'Home' it should read <body
id="home">, in 'About Us' it should be <body id="about"> and in 'Contact
Us' <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home"
is contained within id="home", and when class="about" is in id="about"
and class="contact"
is in id="contact". These situations will only occur when the user is in
the appropriate site section, seamlessly creating our highlighted
navigation item.

About the author

This article was written by Trenton Moss. Trenton's crazy about web
usability and accessibility - so crazy that he went and started his own
web usability
and accessibility consultancy, Webcredible

LINK:
http://www.webcredible.co.uk

to help make the internet a better place for everyone. He knows an awful
lot about intranet usability and spends much of his time conducting
accessibility
evaluations of websites.

Send a comment about this article to editor at itwales.com.

http://www.itwales.com/997770.htm

---
Respectfully submitted by: Dr. Sidney Ordway JD, Ph.D
MailTo:docsgo at swbell.net
Phone & FAX: 210-657-0059