...

View Full Version : Please help fix this Font Size Problem in Internet Explorer 6



CodeGuy
11-26-2008, 02:31 AM
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_New/FixFontSize.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 &quot;smaller&quot;,
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>&nbsp;</p>
<p>Thanks!!!</p>
<p>&nbsp;</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;
}

Excavator
11-26-2008, 02:51 AM
Hello CodeGuy,

I don't really know whats causing it. It's happening here on IE7, works here in FF though.

As an aside, if you enclose your code in [code ] [ \ code] tags it won't take up so much space.

Have a look at this link about font sizes (http://www.bigbaer.com/css_tutorials/css_font_size.htm).

CodeGuy
11-26-2008, 04:17 AM
Thanks for the heads_up on IE7. Also the [code ] [ \ code] tags.

There has got to be some simple solution! I have spent the day searching and all I find are lots of complaints about IE6, but no solution to this font size problem.

I'm thinking and hoping it's an easy fix.

abduraooft
11-26-2008, 08:23 AM
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
Removing that font-size:100%; corrects it in IE.

CodeGuy
11-26-2008, 04:32 PM
Yes abduraooft!

That did it! Thank you very much. :thumbsup:

Much appreciated

CodeGuy

PradeepKr
08-14-2010, 01:36 PM
Use em to specify the font size.
Check font-size property in IE (http://www.expertsguide.info/2010/07/css-font-size-property-not-working-in-internet-explorer/).

effpeetee
08-14-2010, 05:29 PM
This will help you (http://www.my-debugbar.com/wiki/IETester/HomePage)to see more than one vewrsion of IE on you PC at once.

Frank

PradeepKr
08-29-2010, 10:17 PM
Hey Frank, thanks a lot.
That link is cool.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum