For some strange reason I cannot seem to be able to control the font size in IE6 (Internet Explorer 6).
Can view here:
http://circledigital.com/ElectricSun...xFontSize.html
I am not sure about IE 7 either, but since I cannot have more than one version of IE on my computer at a time, I will have to find another computer to test IE 7 Windows.
The font size behaves fine on Firefox, both on Windows and Mac. But when viewed in IE 6 the font is bigger than in the other browsers, and bigger than how I want it viewed.
On my IE 6 browser and can go to View/Text Size/ and choose "smaller", and it looks about the size I want it. The smaller size in IE6 is about the same size as the default size on Firefox both Windows and Mac.
But I think most people will have the default size on IE6 set to: View/Text Size/ Medium, which is too large compared to what I want the size to be, and as compared to the correctly behaving browsers Firefox.
There has got to be a simple fix to this!! Can you help me please!
Thanks!!!
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/fsp.js"></script>
<script type="text/javascript" src="js/reveal_hide.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Help Fix Font SIze Problem IE6</title>
<link href="ElSun_NewCSS3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #6e788d;
}
body,td,th {
color: #57637a;
font-size: 12px;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<div align="left">
<br />
<h1>Please help fix this Font Size Problem in Internet Explorer 6</h1>
<p>For some strange reason I cannot seem to be able to control the font
size in IE6 (Internet Explorer 6). I am not sure about IE 7 either, but
since I cannot have more than one version of IE on my computer at a time,
I will have to find another computer to test IE 7 Windows.</p>
<p>The font size behaves fine on Firefox, both on Windows and Mac. But
when viewed in IE 6 the font is bigger than in the other browsers, and
bigger than how I want it viewed.</p>
<p>On my IE 6 browser and can go to View/Text Size/ and choose "smaller",
and it looks about the size I want it. The smaller size in IE6 is about
the same size as the default size on Firefox both Windows
and Mac.</p>
<p>But I think most people will have the default size on IE6 set to: View/Text
Size/ <strong>Medium</strong>, which is too large compared to what I
want the size to be, and as compared to the correctly behaving browsers
Firefox.</p>
<p>There has got to be a simple fix to this!! Can you help me please!</p>
<p> </p>
<p>Thanks!!!</p>
<p> </p>
<div align="center"><span class="style1"><br />
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
@charset "ISO-8859-1";
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
h1 {
font-family:Verdana;
font-size:16px;
font-weight:bold;
color:#568fbc;
}
/* Layout */
#wrap {
position: relative;
padding:0px;
background: #ffffff;
width: 690px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 5px solid #ffffff;
}
html>body #wrap {
width: 690px;
}
/* Masthead */
#mast {
background:#fff url(Images/Bnr3.jpg) no-repeat;
width:690px;
height:133px;
margin:0;
padding:0;
border:0px;
}
/* Content */
#main {
margin-top:0em;
margin-bottom: 0px;
background-color:#f3f3f7;
}
#content {
padding:5px;
margin-top:0em;
margin-left: 20px;
margin-right: 25px;
}
.contentMargin {
padding:5px;
margin-top:0em;
margin-left: 135px;
margin-right: 20px;
}
.leftbox
{
width:110px;
margin: 0px 30px 0px 0px;
padding: 0px 0px 0px 0px;
font:80% Arial, sans serif;
text-align:center;
color:#663300;
voice-family:"\"}\"";
voice-family:inherit;
float:left;
}
html> .leftbox {
width:110px;
}
Before you post, read our: 
Please help fix this Font Size Problem in Internet Explorer 6
