Discuss Reset Styles by Eric Meyer

11.07.2011

Every good layout designer has his own blanks, let's take, for example, cleaning up the styles of different browsers (I would call this the first step towards cross-browser compatibility). Today I'd like to show you Eric Mayer's style cleanup and make a few additions.

Of course the style reset shown here is a classic. I don't recommend using this in its unaltered state in your own projects. A basic reset is needed, but in the future, everyone sees for himself what styles he needs before starting a project.

I give the source code of Eric Meyer.

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


Another important styles that are simply necessary for a good layout.

/* clear floating blocks */
.clear{clear:both;}
.clearfix:after {
	content: ".";
	display:block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* clear all references */
a{
	outline:none;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
/* For images in content*/
.a_left{
	float:left;
	margin: 0 10px 10px 0;
}
.a_right{
	float:right;
	margin: 0 0 10px 10px;
}
.a_center{
	text-align:center;
}
Of course, this article presents some of the preparations of my personal style reset. Take for yourself only useful, and at the same time strive for originality!61162079

Last in our blog

Internet Marketing
04.11.2019