How to Reset Line-Height Across Browsers
Displaying Web pages the same way in different browsers takes time. Each browser has slight differences in the way it formats Web pages. This is especially true for line height. A CSS reset overrides the default browser settings. Eric Meyer, author of "CSS: The Definitive Guide," did an in-depth study on line height and found that there were inconsistencies across browsers. Since line height affects several elements on a Web page, it's tempting to use an asterisk to create a universal reset. A universal reset applies the change to all the elements on a Web page, but doesn't work in all browsers. Therefore, it's best to apply the reset to specific elements instead.
Other People Are Reading
Instructions
-
-
1
Select "File" and "New" in a text editor.
-
2
Declare each selector you want to reset in your page, using the customized code from Eric Meyer's CSS reset:
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;
}
-
-
3
Click "File" and "Save." Name the file "reset.css" in the "Save As" dialog box and click "Save."
-
4
Close the CSS file and select "File" and "Open." Find and double-click the HTML file to which you want to apply the reset line-height.
-
5
Insert the following code directly below the opening HEAD tag at the top of your page:
<link rel="stylesheet" type="text/css" href="reset.css">
-
6
Select "File" and "Save" to update your HTML file.
-
1
