My Top Ten CSS Tricks

CSS can be complex sometimes, & on release of every new browser version, you may find yourself struggling to keep up with the latest tips & hacks. But those tips & hacks will save your wisdom! Here, we have put together the ten tips that we found most helpful, which will save your time from free loading around the web for solutions.

  1. Block vs. Inline Level Elements:

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

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:

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 is there any point to change an block element to inline element, or vice-versa? Well it seems that you might hardly ever use this technique. But in actual fact, this is very powerful technique which you can use wherever you want.


  1. Another Box Model Hack Alternative:

In pre-IE 6 browsers on PC, the box model hack is used to fix a rendering problem, whereby the border & padding are included in, rather than added onto, the width of an element. A number of CSS solutions have been put forward to remedy this; here is another one:

CSS

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

The first width command is read by all browsers, & even second command is read by all browsers except IE5.x on PC. Because the second comes second, & it takes preference over the first. Any command that comes second will always dominate a previous command. So how all this works?

By inserting empty comment tags (/**/) before the colons, we normally instruct IE5.0 to disregard the command. And even if we insert empty comment tags after the colons, than also IE5.0 will disregard the command. Using these two rules in combination with each other, we can conceal the command from all of IE5.x browsers.

  1. Minimum Width for a Page:

The min-width command is the very helpful CSS command through which you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width of the page.

In IE this command doesn't work properly. If you want to make this command to function properly in IE, you have to insert a <div> under the <body> tag, as we can't give a minimum width to the <body>:

CSS

<body>
<div class="container">

We have created our CSS commands, to create a minimum width of 600px:

CSS

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

The first command which is used is the regular minimum width command, the second command is that command which only IE understands and that is a short JavaScript command. Always prefer to use this command into the head of each HTML document, so you can prevent the document to become invalid.

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

CSS

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


  1. IE and Width and Height Issues:

IE neither understands the min-width command nor it understands the min-height command, but instead interprets width and height as min-width and min-height -- go figure!

This may create problems, because we may need resizable boxes & should we need to fit more text into them, or should the user resize the text. Non IE- browsers will not allow the to resize, even if we use only the width & height commands on a box.

On using only min-width & min-height commands in IE, it may create a problem while using background images. If you are using background image of 80px wide & 35px high , you have to make sure that default size for a box using this image is exactly 80 x 35px. However, the box size will increase gracefully, if users resize the text.

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

CSS

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

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

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

  1. Text-transform Command:

CSS commands is the text-transform command which is one of the least known,but really useful command. There are three common values for this rule which are as follows:
1) uppercase,
2) lowercase and
3) capitalize.
The first rule changes all characters into capital letters,the second changes them into small letters and third rule changes the first alphabet of each word into capital.

This command is verry useful to help the consistency in style across the whole Website,mainly if it has a number of content editors. To see that this is always the case,you can use text-transfom:capitalize rule to smake sure.Even if the site editors forget about the capitalisation,their mistake will not be visible on the Website.

To capitalize words we can also use text-transform:uppercase rule,as screen readers may read small words in capital letters as acronyms. U can take a great example of this that "CONTACT US" is prounced as "contact U S" by some readers

  1. Disappearing Text Or Images In IE?

IE has a very strange bug where text or background image sometimes disappear from sight. These things are still actually present and , if you highlight on screen or hit a refresh button, they will reappear.

This problem mostly occurs with the background images and on text which is placed next to a floated element. To solve the problem, insert position: go into the CSS command for disappearing the element, and for some valid reason, which will usually create a problem. If these also doesn't work, assign a width to the offending element in CSS ---which should solve the problem.

  1. Invisible Text

Sometimes, you may really need to make the text invisible. Invisible text which is really useful for screen reader users, perhaps to assign a label to form a item, or insert a heading at the top of a section. If you want to change the visual appearance by inserting these elements , then make them invisible, and no one using a visual browser will know that they are there.

You may need to make text invisible if you are using a print or handheld CSS file, as some information is not displayed on either of these mediums.

To make text invisible, you can use display: none -- easy! This works fine for hiding text from handhelds and printed web pages, but it is not so easy for screen readers. Screen readers are now becoming very smart for their own benefit, and some will ignore the text that has the rule display: none assigned to it.

  1. CSS Document for Handhelds:

For PDAs & mobile phones, a separate CSS document can be created only when one of these devices is being used to access your site. Many Websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. Same can be done for handheld devices.

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

CSS

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

CSS command is the handheld CSS file which overrides equivalent commands in the main CSS document. Now the question arises that " What commands should you place in this file? Ideally, if you want users of handheld devices then you should avoid having horizontal scroll bar

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 width of 150px. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css

Your Website which is offered to the users of handheld devices should be quite different from the Website which is offered to the Traditional web browsers, as the users experience is quite different on handheld device. For further information, you can go on for a book called as "Handheld Usability", by S.W.Weiss,which is a great read.

  1. Same Navigation Code On Every Page:

Most Websites highlight the navigation item relating to each user's location within the Website, which helps the users to orientate themselves. This is a fundamental requirement for basic usability, but it can be a trouble: we need to take the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have a navigation highlighted on every page, without taking the HTML code on each page? Of course it is!

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

CSS

<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 will need to insert an id into the tag. This id should be the representative of where the users are located in the site, and should change when users move to a different site section. When you are on 'Home' page, it should read <body id="home">, , in 'About Us', it should read <body id="about">, and in 'Contact Us',<body id="contact">.

Next, you create a new CSS rule:

CSS

#home .home, #about .about, #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 section of the site, seamlessly creating our highlighted navigation item.