Resetting CSS

To minimise the effects of browser inconsistencies, it is a good idea to reset CSS at the beginning of the file.

The following works just fine.

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

I like this because it’s simple and then I can set margins, paddings etc to any required elements.

h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
p, table, dl, ul, ol { margin: 10px 0; }
ul, ol, dl dd { margin-left: 40px; }


or as http://meyerweb.com/eric/tools/css/reset/ suggests, the following reset may be useful.


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}


Making hovering work for IE

Most browsers support :hover for any HTML elements but IE doesn’t work like that (Surprise!). Read the following article to implement whatever:hover to enable proper hovering for IE 5,6,7 and 8.

http://www.xs4all.nl/~peterned/csshover.html

Fitting an image inside a div

To prevent browsers from automatically extending the Div width to fit a large image, simply do:

 

overflow:hidden;

 

This will cut the image to fit inside the specified Div size.

Wrapping floats in a float

If you work with css floats much you’ll eventually come across this problem:

2 floated elements inside a container. The container doesn’t expand to contain the floats. There are a lot of solutions to this, such as sticking in an element to clear the floats (bleh) before closing the container, using the :after pseudo-class to inject something to clear the floats, or setting a fixed height for the container, using a min-height workaround – the list goes on. The simple, all-conquering method of getting around this problem? Float the container too:

This article has been copied from http://www.yongfook.com/items/view/81/10-dirty-little-web-development-tricks

CSS 2 column: variable/fixed widths

The following works for IE, FF and Chrome

Left column is 100% and the right column is fixed

 

div#mainTopContainer{

margin-top:10px;

margin-bottom:10px;

height:200px;

}

 

div#mainTopLeftContainer{

border:1px solid #999;

height:200px;

margin-right:200px;

padding:0px;

}

 

div#innerMainTopLeftContainer{

padding:10px;

}

 

div#innerInnerMainTopLeftContainer{

 

}

 

div#mainTopRightContainer{

float:right;

width:200px;

height:200px;

border:1px solid #999;

}

 

div#innerMainTopRightContainer{

padding:10px;

}

3 columns of variable width

/* default listing page */

 

div#defaultListingContainer{

position:relative;

width:100%;

height:400px;

border:1px solid #CCC;

}

 

div#defaultListingLeft{

float:left;

width:33%;

border:#F00 solid 1px;

}

 

div#defaultListingRight{

float:right;

width:33%;

border:#0F0 solid 1px;

}

 

div#defaultListingMiddle{

position:absolute;

border:#00F solid 1px;

width:33%;

left:33.5%;

right:33.5%;

}

 

 

 

—————————————-

 

 

<div id=”defaultListingContainer”>

 

<div id=”defaultListingLeft”>

    left

    </div>

    

    <div id=”defaultListingRight”>

    right

    </div>

    

    <div id=”defaultListingMiddle”>

    middle

    </div>

 

</div>