CSS tips for newbeeies….

Don’t use empty DIVS:

Instead of using empty divs to clear the floats use element below the floating element to clear the floats. Else clear the container holding your whole document.

Inheriting the link color:

To let the link to inherit the color as same as the text around it, use

{ Color:inherit }

e.g.: Suppose <span id="eg1">This is the example text to <a>illustrate</a> the <a> inherit </a> propertylt;span>

Now the css for the above text could be:

#eg1{ color:#aaa; }

Now if u want the link in the document should inherit the color of its parent element, use inherit property,

#eg1 a{ Color:inherit; }

Background-Position:

Values:	top, center, bottom, left, center, right
Initial:	0% 0%
Inherited:	No

If a background image has been specified, the value of 'background-position' specifies its initial position.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

• 'top left' and 'left top' both mean the same as '0% 0%'.
• 'top', 'top center' and 'center top' mean the same as '50% 0%'.
• 'right top' and 'top right' mean the same as '100% 0%'.
• 'left', 'left center' and 'center left' mean the same as '0% 50%'.
• 'center' and 'center center' mean the same as '50% 50%'.
• 'right', 'right center' and 'center right' mean the same as '100% 50%'.
• 'bottom left' and 'left bottom' mean the same as '0% 100%'.
• 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
• 'bottom right' and 'right bottom' mean the same as '100% 100%'.

Examples:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */

Empty div height:

Empty div has some default height in IE whereas firefox does not show this default height. This is because IE takes some default alphabet in the empty div. and hence it shows height in the empty div.

So To fix this bug use font-size=1 in that div.

Eg: <div style=”font-size:1px”></div>

Table Rules:

To display only rules in table use rules attribute . IE does not display rules without frames attributes.

Eg. : <table rules=”rows” frames=”void”>

<tr>

<td>TABLE RULES</td>

</tr>

</table>

List:

To align the text justify in ‘li’, use

Display:block;

List-style-type:

We use list style type property to change the shape of bullet in the unordered list. Sometimes the web browser behaves in the tricky way and shows different bullet shapes than that was specified.

In a such a case instead of explicitly defining

list-style-type:square

Place the image to the background of 'li' item and adjust in such a way that it emulates the bullet of the list.

Eg:

.boxContent li {

background:transparent url(../styleImages/bullet.jpg) no-repeat scroll 0 4px;

list-style-type:none;

padding-left:12px;

}

Remove the white space in between li and its content:

Use li{

display:inline-block;

}

Remove the dotted border around the active link in Firefox:

a{

outline: none;

}