I’ve used many different types of tooltips in the past and they all shared the same problem, they do not work with Internet Explorer 6. After many trial and error, I finally have a pure CSS tooltip that works in IE6.

HTML Code:

<a href="#" class="tooltip">Your Link Here
<span> Tooltip message you want to appear. </span></a>

Here’s the CSS code:

a.tooltip {
	color: #7C98AE;
	text-decoration: none
	}
 
a.tooltip:hover {
	position: relative;
	text-decoration: none
	}
 
a.tooltip span {
	display: none
	}
 
a.tooltip:hover span {
	display: block;
   	position: absolute; 
	top: 0px; left: 40px;
	width: 200px;
        padding: 5px; 
	margin: 10px; 
	z-index: 100;
        background: #f0f2f6; 
	border: 1px solid #955F1F;
	opacity: 0.9;
	text-align: center
	}

This CSS tooltip works with IE6, IE7, IE8, Firefox, Chrome, Flock and Opera. If you have your own CSS tooltip solution please share them here.

Tip 1
Clear out the default padding and margin settings before you start working.
Different browsers have different default margin and padding sizes so you want to start with a clean slate, so to speak. Use this command:

1
2
3
4
5

* {
margin: 0; 
padding: 0;
border: 0
}

to clear all default margin and padding settings. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round click-able images, although some people argue that the purple border is necessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop without having to set img border=0 for each image (which is against the strict markup rules in any case).

Tip 2
To center your layout, use a container div to contain all your content
Declare it as follows:

1
2
3
4

#container{
margin: 0 auto;
width: xxxpx
}

There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places for each element within your container.

Tip 3
Work from the top down
Literally start working on your CSS layout starting from the top most elements in your design, as well as the ‘top’ elements in your HTML, such as the body, as well as your main containers.

Declare your CSS commands on the highest level possible and try and declare something once only and let it cascade throughout. Only override the commands at a lower level when strictly necessary. This prevents a verbose CSS file that is difficult to maintain and understand. For example, if you have { margin : 0 auto} settings on each and every sub div within your container – you are in trouble.

Tip 4
Document what you are doing and use Firebug and the Firefox browser to debug
You are not writing your CSS code just for yourself, some day some poor sod will have to debug it. Make numerous comments inside your CSS file to explain why you are doing things in a specific way.

Fitting in with this, you might find yourself having to fix someone else’s CSS more often than you think (or even your own, for that matter). Use the Firebug add-on for Firefox to debug your CSS. This is a life-saver with regards to giving you an insight into exactly where your design might be broken and why.

The only problem with this is that your design might work perfectly in Firefox, but not in IE5, IE6 or IE7. This brings us to the next tip.

Tip 5
Decide which browsers you are going to build your CSS for and test from the start
Some purists insist on making sure that your website work for all possible browsers, others only make it work for the ‘major’ browsers. How do you know exactly which browsers are used the most? Once again W3 Schools come to the rescue.

On the following page, you can see which browsers are the most popular: http://www.w3schools.com/browsers/browsers_stats.asp. From this page you can see that something like IE5 is only used by about 1.1% of browsers. It is up to you whether you consider it worthwhile to build your CSS to be compatible with this browser, or whether you are just going to test your compatibility with IE6, IE7 and Firefox, for example. Whatever you do, when you start building your CSS, start from the top, and test each and every setting in each of the browsers as you go along. There is nothing worse than building a perfect website in Firefox, then finding out right after you have coded a 1000 line css file that it is broken in IE6. To then debug and fix your code after the fact is a nightmare.

Tip 6
Here is an embarrassing little tip for fixing your CSS in IE6 or IE7
Let’s say your design works perfectly in Firefox, but is broken in IE6. You cannot use Firebug to determine where the problem might be since it WORKS in Firefox. You do not have the luxury of using Firebug in IE6, so how do you debug an IE6 or IE7 stylesheet? I often found that it helps to add {border : 1 px solid red} or {border : 1 px solid purple} to the problematic elements. This way you can often see why certain elements do not fit into the space available. It is an embarrassing little tip since it is so primitive and simple, but it works!

Tip 7
Understand floats
Floating of elements is essential to understand, especially in the context of getting your floated elements to work in the different browsers!

Basically elements such as divs are floated to the left or the right (never to the top or the bottom, only sideways). Here are a couple of things to take into consideration with floated elements. Each floated element must have an explicit width specified. If you are making use of floated divs to create a 3 column or a 2 column layout, rather specify the widths in terms of percentages rather than fixed widths, and if you do use percentages, make sure that the percentages do not add up to 100%, this will often cause the right most column to drop below the rest, clearly indicating that you are trying to fit something into the available space that is too wide for it. Rather use percentages that add up to slightly below 100%, such as 25%, 49%, 24% for a left column, middle column and right column.

Floating elements can be extremely complex to understand and it is worth while to spend some time on good sites that provide specific guidelines and tips, such as the Position Is Everything website.

Conclusion
These CSS tips for layout should hopefully save you some time and effort when you next have to panel-beat a table-less design into submission!

Article By: Christine Anderssen
Christine Anderssen is the owner of Tailormade4you, a web design and hosting company in South Africa, catering for small business website owners. Visit our site on www.tm4y.co.za/10-strategies.html to download your free guide on how to make your website really work for you and bring in more customers to your business.

If you’re concerned about your CSS file size ending up way too big than you originally intended, a great solution is to use CSS Shorthand. CSS shorthand allows you to specify several properties on a CSS selector.

Let’s have a look at one of the common ways to style an HTML body:


body{
background-color: #FFFFFF;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: top left;
}


We can achieve the same results using CSS shorthand:


body{background: #FFF url(images/bg.jpg) no-repeat top left}


And what about styling your fonts? Here is an example of a common font properties:


p {
font-style: normal;
font-variant:normal;
font-weight: bold;
font-size: 12px;
line-height: normal;
font-family: Tahoma,"Verdana", Arial;
}


And here’s the shorthand for your font properties:


p {font:bold 1em/1.2em Tahoma,"Verdana",Arial}


One of the common ways to style borders on your divs:


div{
border-width: 1px;
border-color: #000000;
border-style: solid;
}


CSS shorthand for borders:


div{border:1px solid #000}


List styles example:


ul {
list-style-type: circle;
list-style-position: inside:
list-style-image: url (list.jpg);
}


Yes we can also shorthand list styles!


ul {list-style: circle inside url(list.jpg)}


Let’s take a look at the margin properties:


div {
margin-top: 10px;
margin-bottom: 5px;
margin-left: 15px;
margin-right: 20px;}


…And the shorthand version:


div {margin: 10px 20px 5px 15px}

/* One thing to note here is that the properties are assigned in a particular manner – it goes top – right – bottom – left */

Another way to shorthand the margin properties if the top border is the same as the bottom, and if the right border is the same as the left side:


div {margin: 10px 20px}

/* And this assignment is top & bottom – left & right */

Same rules would apply to your padding properties:


div {padding: 10px 5px 3px 4px}
div {padding: 10px 20px}


More CSS Tips

Delete redundant blank spaces in your stylesheet, instead of coding this way:


h1 {
border-bottom:1px dotted #ccc;
margin-left: 10px;
}


Delete your line breaks and blank spaces, keep everything in one line:


h1{border-bottom:1px dotted #ccc;margin-left: 10px}


- You don’t need to put a semi colon at the very end of the property right before the closing bracket.
- Use shortened hex code whenever possible, for example, if you have the hex code #FFFFFF which is white, you can use #FFF instead.

Want to become a CSS master? I highly recommend the books below:

This tutorial will be pretty straight forward, there isn’t any real css tricks or hacks involved. But I really like the simplicity of this css content box and I thought I’d share this with all the aspiring designers out there. What you see above is actually a div with an image of a folded corner otherwise known as dogear for obvious reasons.

Here’s what the dogear image looks like by itself, as you can probably tell this image will be sitting on the upper right corner of our content box. Let’s do some basic coding, here is the css code for our content box.

div.contentbox{
    background: #F7F7F7 url('images/dogear.jpg') no-repeat;
    background-position:100% 0%;
    border:1px dotted #ccc;
    padding:30px}

That’s basically it, we have a CSS class for our content box. I told you this was straight-forward! And now let’s take a look at the html code:

  <div class="contentbox">

    Blah blah blah the contents will be placed here...blah blah blah..
  </div>

Pretty simple right??? Of course you can place the dogear on any of the corners by playing around with the CSS class for that image.

*NOTE ~ This was tested on Firefox 3, IE6, IE8, and Opera not sure how it would look on Safari.