Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
My Top Ten CSS Tricks

My Top Ten CSS Tricks



|Views: 82|Likes:
Published by api-3797737

More info:

Published by: api-3797737 on Oct 17, 2008
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





My Top Ten CSS Tricks
1 of 7
10/13/2006 9:40 PM
Trenton Moss

Trenton is crazy
about Web
usability and
accessibility \u2013

so crazy that he went and
started his ownweb
accessibility and usability
consultancy to help make
the Internet a better place
for everyone.

Trenton Moss has written13 articles for SitePoint with an average reader rating of8.8.

View all articles by Trenton
Home\u00bbClient Side Coding \u00bb CSS Tutorials \u00bb Page 1

By Trenton Moss
September 27th 2005
Reader Rating: 9

CSS [1] can be complex, and as each new browser version is

released, you may well find yourself struggling to keep up with the
latest tips and hacks. But those tips and hacks will save your sanity!
Here, I've put together the ten tips that I find most helpful, to save
you the hassle of scrounging around the Web for solutions when
time is tight.

1. Block vs. Inline Level Elements
Nearly allHTML [2] 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>. The characteristics of
inline elements, on the other hand, are the opposite of block elements:

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 trick, but in actual fact, this is a very powerful technique, which you can use whenever you want to:

My Top Ten CSS Tricks
My Top Ten CSS Tricks
2 of 7
10/13/2006 9:40 PM

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 [3] is used to fix a rendering problem in pre-IE 6 browsers on PC, whereby the border and
padding are included in, rather than added onto, the width of an element. A number of CSS-based solutions have
been put forward to remedy this; here's another one that I 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 exceptIE5 [4].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, we instruct IE5.0 to ignore the command. Likewise, if we place empty comment tags after the colon, IE5.5 will ignore the command. Using these two rules in conjunction with each other, we can hide the command from all of IE5.x browsers.

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
functionality 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>:

<div class="container">
Next, we create our CSS commands, to create a minimum width of 600px:
{min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
My Top Ten CSS Tricks
3 of 7
10/13/2006 9:40 PM
}The first command is the regular minimum width command; the second is a shortJavaScript [5] command that
only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you
may prefer to insert it into the head of each HTML document to get around this.
You might also want to combine this minimum width with a maximum width:
{min-width: 600px;

max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}4. IE and Width and 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 we need to fit more text into them, or
should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won't
allow the box to resize. If we only use the min-width and min-height commands, though, 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, 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, the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box withclass="box":
{width: 80px;
height: 35px;
}html>body .box
{width: auto;

height: auto;
min-width: 80px;
min-height: 35px;

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->