This text in my paragraphs look different in IE and Firefox. In Firefox, the text size is set to normal; In IE it is set to medium. The h2 element is roughly the same size in both browsers at this setting. However the paragraph text is much larger in IE, and I want it to look as it does in Firefox. Is there a way to code it so it looks the same? Thanks.
Here's the code...
<html>
<head>
<title>Terms of Use</title>
<style type="text/css">
<!--
body {
background-image: url(paper.gif);
margin: 0 auto;
padding: 0;
color: #000000;
font-size: medium;
}
p {margin-left: 20px; font-size :medium;}
h1 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
a {text-decoration: none}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: black;
}
hr { color:black; background: black; border: 0; height:2px; width: 90%;
}
-->
</style>
</head>
<h1>Terms of Use</h1>
<hr>
<p>This text looks different in IE and Firefox. In Firefox, the text size is set to normal; In IE it is set to medium. The h2 element is roughly the same size in both browsers at this setting.
However the paragraph text is much larger in IE, and I want it to look as it does in Firefox.</p>
<hr>
<p align="center"><b><font face="Script MT Bold"><font size="+2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"webpage_home.html"onMouseOver="window.status='Click here to go to Adirondack Cyberscapes Home Page'; return true"onMouseOut="window.status=' '; return true">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Landscapes.html"onMouseOver="window.status='Click here to go to Landscapes'; return true"onMouseOut="window.status=' '; return true">Landscapes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Technology.html"onMouseOver="window.status='Click here to go to Technology'; return true"onMouseOut="window.status=' '; return true">Technolgy</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Music.html"onMouseOver="window.status='Click here to go to Music'; return true"onMouseOut="window.status=' '; return true">Music</a>
</body>
</html>use absolute font sizes then... pixels... sometimes you have to give for cross-browser support... for usability, you can add buttons to make the text larger or smaller as ALA does...use absolute font sizes then... pixels... sometimes you have to give for cross-browser support... for usability, you can add buttons to make the text larger or smaller as ALA does...
Thanks. Your advice was very helpful. I like the design of your website. It's very "clean" looking, which is always a good thing.I've found text sizes between the two browsers to be fairly consistent if you size the <body> text to X percent and use ems in the interior elements.
/* Percentage font size keeps steps between font size adjustments via the
view menu to a sane level */
body {
font-size: 80%;
}
/* Em-based font size makes Opera size fonts relatively the same as other
browsers. */
html>body {
font-size: .8em;
}
h2 {
font-size: 1.2em;
}
Here's the code...
<html>
<head>
<title>Terms of Use</title>
<style type="text/css">
<!--
body {
background-image: url(paper.gif);
margin: 0 auto;
padding: 0;
color: #000000;
font-size: medium;
}
p {margin-left: 20px; font-size :medium;}
h1 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
font-family: script mt bold;
margin: 0 auto;
padding: 20px;
}
a {text-decoration: none}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: black;
}
hr { color:black; background: black; border: 0; height:2px; width: 90%;
}
-->
</style>
</head>
<h1>Terms of Use</h1>
<hr>
<p>This text looks different in IE and Firefox. In Firefox, the text size is set to normal; In IE it is set to medium. The h2 element is roughly the same size in both browsers at this setting.
However the paragraph text is much larger in IE, and I want it to look as it does in Firefox.</p>
<hr>
<p align="center"><b><font face="Script MT Bold"><font size="+2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"webpage_home.html"onMouseOver="window.status='Click here to go to Adirondack Cyberscapes Home Page'; return true"onMouseOut="window.status=' '; return true">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Landscapes.html"onMouseOver="window.status='Click here to go to Landscapes'; return true"onMouseOut="window.status=' '; return true">Landscapes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Technology.html"onMouseOver="window.status='Click here to go to Technology'; return true"onMouseOut="window.status=' '; return true">Technolgy</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Music.html"onMouseOver="window.status='Click here to go to Music'; return true"onMouseOut="window.status=' '; return true">Music</a>
</body>
</html>use absolute font sizes then... pixels... sometimes you have to give for cross-browser support... for usability, you can add buttons to make the text larger or smaller as ALA does...use absolute font sizes then... pixels... sometimes you have to give for cross-browser support... for usability, you can add buttons to make the text larger or smaller as ALA does...
Thanks. Your advice was very helpful. I like the design of your website. It's very "clean" looking, which is always a good thing.I've found text sizes between the two browsers to be fairly consistent if you size the <body> text to X percent and use ems in the interior elements.
/* Percentage font size keeps steps between font size adjustments via the
view menu to a sane level */
body {
font-size: 80%;
}
/* Em-based font size makes Opera size fonts relatively the same as other
browsers. */
html>body {
font-size: .8em;
}
h2 {
font-size: 1.2em;
}