Archive for CSS Tips

Use CSS file for all browser except Internet explorer (IE)

Sometimes it happens that we want to use the same CSS file for all Browsers except IE,because IE doesn’t support many features of CSS 3 (IE 6, IE 7 ,IE 8 )

to do that,in head tag we should change that line associated with css to this:

<!--[if IE]><![if !IE 6]><![endif]--><link rel="stylesheet" href="style.css" type="text/css"/><!--[if IE]><![endif]><![endif]-->

or:

<!--[if !IE 6]><!--><link rel="stylesheet" href="style.css" type="text/css" /><!--<![endif]-->

It’s already done! but if we want to force IE to use different CSS file we can use this code:

<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css"/><![endif]-->

Centering DIV vertically and horizontally

In this tutorial we show you how to absolutely centering DIV vertically and horizontally

first of all you should put this CSS code in your page:

 

<style>
html, body {height: 100%;}
#CenteredDiv {
width:300px;
height:150px;
position:absolute;l
eft:50%;
top:50%;
margin:-75px 0 0 -150px;
border:1px solid #222222;
text-align:center;
background-color:yellow;
}
</style>

after that just call this css with defining class in your html code:

<div id="CenteredDiv"></div>

 

That’s It

click here to see example below

 

 

 

how to get empty space instead of using BR tag

If you want to get more space or less than the <BR> tag You can use this code

<div style="height:100px"></div>

Many of the beginner coders used to typing many of <BR> tags to achieve high vertical  empty space,but actually it’s not the best way to achieve this goal

By changing the value of Height tag you can change the Height of empty space that you want.

Changing HTML Table or TD Background Color on Mouseover Using CSS

In order to dynamically change the background color of a table, td, or div when the mouse is over it we can use css method.

let’s assume that we have a class in css called “tablebg”

 

.tablebg{
background-color: #e1eafe;
}

Read more