1. Minimum Width for a Page (Using Expressions)

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:

Next, we create our CSS commands, 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, 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:

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

2. Image Replacement

It's always advisable to use standard HTML to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if your planning on using stylized text or a font that is not available on a large abundance of computers, then really you've got no choice but to use an image.

Say for example, you desire the top heading of each page to be ‘Used Cars’, as you're a cars dealer and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

 
Used Cars

Now, this obviously won't use your newly styled header. To fix this problem use this in your CSS document:

 
h1
{
background: url(widget-image.gif) no-repeat;
height: 85px;
width: 600px;
text-indent: -2000px
}

The image, with your fancy text, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. This allows for images to be used instead of text while allowing search engines and screen readers to properly access the text information. Just be sure to assign a height and width value to match your image size when using this trick, otherwise your image will not display properly.

3. CSS 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. For example, when specifying the dimensions of a container you might use the following CSS rule:

 
#box
{
width: 100px;
border: 5px;
padding: 20px
}

This CSS rule would be applied to:

 
...

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

 
#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

And the new HTML would be:

 
...

Perfect! Now the box width will always be 150px, regardless of the browser!

4. Two Classes Together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:

 
...

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

5. CSS border default value

When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!