Saturday, August 10, 2013

HTML5 Reset CSS

html5 reset cssThis is the simple way to handle your html page. like html tags body, list, table, etc. Just copy below
code into your new sheet. And save it as "reset.css". After saving file just LINK this CSS file into your Index page.




/* html5 Reset Stylesheet */
/* v1.1  */
/* Last Updated: 2013-08-10 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
*{
    margin:0;
    padding:0;
}
body {
    line-height: 1;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline:none;
    border:0;
}
a:hover{
    text-decoration:underline;
}
a:focus{
    outline:none;
    border:none;
}

img{border:none}
/* change colors as your requirement */
ins {
    background-color: #CCC;
    color: #000;
    text-decoration: none;
}
/* change colors as your requirement */
mark {
    background-color: #CCC;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
/* change color as your requirement */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #666666;
    margin: 1em 0;
    padding: 0;
}
By at 4 comments:
Labels: , , ,

Tuesday, August 6, 2013

Simple way to Css Hack for IE

Css Hack for IEDue to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks.

Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn't officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.

Although there is no simple way to cut through all of the issues with stand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments.

Here is an example:

#element {
    color:orange;
}
#element {
    *color: white;/* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;/* IE6 */
}
#element {
    color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */

CSS hacks are usually bad. You should probably do this instead.

<!--[if lt IE 7]><html class="ie6"> <![endif]-->
<!--[if IE 7]><html class="ie7"> <![endif]-->
<!--[if IE 8]><html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html><!--<![endif]--> 

 This uses conditional comments to target certain versions of Internet Explorer, and the element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

 .element { 
    margin-bottom: 20px; 
} 
 
.ie7 .element { 
    margin-bottom: 10px; 
} 
 
.ie8 .element { 
    margin-bottom: 15px; 
}
By at 5 comments:
Labels: , ,
Subscribe to: Posts (Atom)