Friday, December 30, 2011

Inline-block in IE

display:inline-block;

This piece of code does not work in IE since inline-block is not recognized  in IE. To counter this we use an IE hack.

We should use:

display:inline;
zoom:1;

Also, suppose you have 2 inline-block elements inside one div. You will find that there is a gap of -4px between the elements which doesn't seem to go. This can be overcome by using:

.parentDiv{
  word-spacing:-4px
}
.childDiv{
  word-spacing:0px;
}

Image height not equal to td height

Consider that you have 2 columns in a row inside a table. One column(td) has texts and the other only has an image. Then, the height of the column and the height of the img will be different. You will always have a small gap below the image. This can be rectified by using :

img{display:block;}
This issue was caused because img is not considered as a block element.

Saturday, December 24, 2011

Undoing default browser styles

Use the given below style rules as the first line in your css files for undoing default browser styles.
Default browser styles may hinder with your style rules making it difficult for you to style the page.

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,dl,dt,dd,ol,ul,li,fieldset,form,
input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;
outline:0;vertical-align:baseline;margin:0;padding:0}
:focus{outline:0}
ol{list-style:decimal outside}
ul{list-style:none outside}
table{border-collapse:collapse;border-spacing:0;font-size:inherit}
caption,th{text-align:center;font-weight:bold}
fieldset,img{border:0}
a img,:link img,:visited img{border:none}
blockquote:before,blockquote:after,q:before,q:after{content:""}
address{font-style:normal}
pre,code,kbd,samp,tt{font-family:monospace;line-height:100%}
sup{vertical-align:text-top;font-size:50%}
sub{vertical-align:text-bottom}
:link,:visited,del,ins{text-decoration:none}
abbr{border-bottom:none}