How to Make the Same Line Height From Microsoft IE & Mozilla Firefox
Internet Explorer interprets margins and line height differently than Mozilla Firefox does. These differences were most pronounced in earlier versions of IE, such as IE6. To get around the code discrepancies and make the line heights match, add an "if" statement to the page HTML that links to a different style sheet for Microsoft IE.
Other People Are Reading
Instructions
-
-
1
Add two "<link>" tags in between the "<head>" tags at the top of the page; for example:
<head>
<link>
<link>
</head> -
2
Insert "rel," "type" and "href" attributes into the "<link>" tags, so that the code looks like the following:
<link rel="stylesheet" type="text/css" href="firefox.css">
<link rel="stylesheet" type="text/css" href="ie.css"> -
-
3
Add "if" statements to the Microsoft IE link code so that the browser knows to activate that CSS code when the viewer looks at the webpage in IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]--> -
4
Add "element { line-height: #px; }" to the Firefox CSS. Replace "element" with the desired page component (e.g., table, div, p), then replace "#" with the desired line-height; for example:
body { line-height: 15px; }
-
5
Save the firefox.css file. Create a copy of the CSS file, and then rename it as "ie.css." You should have one firefox.css file and one ie.css file.
-
6
Launch the page in IE and Firefox. Upload firefox.css and ie.css to your web server if you're using an online page editor.
-
7
Line up IE and Firefox side by side. Reduce or increase "line-height" by one pixel in the ie.css code until until Mozilla Firefox and Microsoft IE have the same line-height for the page.
-
1
