some important things about css

1. Image replacement technique:

It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller 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:

<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>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:

<h1>Buy widgets</h1>Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}Be sure to change “image height” to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, 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. Please note, this can cause accessibility issues as any user with images turned off won’t be able to see the text.

2. 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:

<div id=”box”>…</div>

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:

<div id=”box”> <div>..</div></div>Perfect! Now the box width will always be 150px, regardless of the browser!

3.Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command: #content
{
width: 700px;
margin: 0 auto
}You would then enclose <div id=”content”> around every item in the body of the HTML document and it’ll be given an automatic margin on both its left and right, ensuring that it’s always placed in the centre of the screen. Simple… well not quite – we’ve still got the pre-IE 6 versions on PC to worry about, as these browsers won’t centre align the element with this CSS command. You’ll have to change the CSS rules:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}This will then centre align the main content, but it’ll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

3.vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box.

Hmmm… not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box – perfect!

I also found the following link very useful:

http://css-code.assistprogramming.com/fixing-overflowhidden-in-ie.html