...

View Full Version : Why all fonts larger in Firefox (only) - see css



pnielsen
06-17-2012, 02:49 AM
I created a page in DW CS, specifying font sizes in em. The preview looks fine in IE and DW design view. But in Firefox all the fonts are proportionately enlarged by about 1.5x.

Can someone please have a look at my CSS below and see where the problem might be?

Any other suggestions regarding the code in general would also be appreciated since I am obviously still in the learning stages. Thank you.

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
letter-spacing: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.25;
color: #000000;
}

a:link {
color: #8b3514;
text-decoration: none;
}

a:visited {
color: #8b3514;
text-decoration: none;
}

a:hover {
color: #8b3514;
text-decoration: underline;
}

a:active {
color: #8b3514;
}

.italic {
font-size: .75em;
font-style: italic;
color: #000000;
text-decoration: none;
}

h1 {
font-size: 1.5em;
font-weight: bold;
}

h2 {
font-size: 1.25em;
font-weight: bold;
}

h3 {
font-size: .1em;
font-weight: bold;
}

#head-container
{
color: #000000;
background: #000000;
}

#header
{
margin: 0 auto;
width: 980px;
padding: 0 auto;
background: #ffffff;
}

#header h1 { margin: 0; }

#navigation-container
{
float: left;
width: 100%;
color: #000;
background: #000000;
}

#navigation
{
margin: 0 auto;
width: 980px;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 15px;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #ffffff;
}

#navigation li a:hover { background: #7d26cd; }

#content-container
{
float: left;
width: 100%;
color: #000;
background: #ffffff;
}

#content-container2
{
margin: 0 auto;
width: 980px;
}

#content-container3
{
float: left;
width: 980px;
background: #ffffff;
}

#content
{
clear: left;
float: right;
width: 650px;
padding: 40px 50px 40px 15px;
margin: 0;
display: inline;
}

#content h2 { margin: 0; }

#aside
{
float: left;
width: 200px;
padding: 40px 15px 40px 45px;
margin: 0;
display: inline;
}

#aside h3 { margin: 0; }

#footer-container
{
clear: left;
color: #ffffff;
background: #000000;
line-height: 1.5em;
}

#footer
{
margin: 0 auto;
width: 980px;
text-align: center;
padding: 0px;
height: 20px;
}

sunfighter
06-17-2012, 03:54 PM
In firefox go to top menu and click View>Zoom>Reset or just use Ctrl-0.
See if that helps.

resin
06-17-2012, 05:23 PM
I've noticed the same thing. In IE and Chrome, my font is one size, but in Firefox my font appears just a tad bigger. And yes my zoom is set at default 100% in all browsers. My font styling- font: 1em Arial, "Helvetica Neue", Helvetica, sans-serif . I've tried px and pt as well, but Firefox is always a bit bigger regardless. It is really annoying, and can also cause overflow problems. Glad I found someone else who noticed this, because I've searched all over and it seems noone else is really aware of this or taking any notice to it..

I've also noticed that image coloring is slightly different in Firefox as well. In IE and Chrome images appear normally as they should, but in Firefox the colors appear a bit 'washed out' looking. Apparently FF renders some things a little differently than the other browsers..

sunfighter
06-17-2012, 09:01 PM
To both pnielsen and resin, a em is a relative size font size. According to the W3C an em:

"is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."

They take on their size values based on where they are in a Web browser. Most of the time 1em = 16px, but users can change their default font size in their browsers. If you use ems for fonts (as you should) you should use them for everything such as width, height, padding, margins, etc..
point in case:

#content
{
clear: left;
float: right;
width: 650px;
padding: 40px 50px 40px 15px;
margin: 0;
display: inline;
}
If you use relative sizing the page should look the same regardless of the browser. It may be a little smaller or a little bigger, but everything would be adjusted accordingly.

In my comparison of the FF and chrome browsers I did not see what your seeing, but using
h3 font-size: .1em; It is almost unreadable in FF.

resin
06-17-2012, 10:44 PM
I made a little test sample so you can see what I'm seeing. I viewed the same exact text in IE and FF and took a screenshot of each, and placed them side by side. You'll see that the font is a little bigger in FF. The font is set the same for both at 1em, and no code was touched in between. Also as I said earlier, I tried font sizes in px and pt as well, and got the same exact results. The font is always a little bigger in FF than it is in IE and Chrome.

http://resin.webs.com/fonttest.png

and here is the actual page I used in this test- http://resin.webs.com/new2.html

pnielsen
06-18-2012, 07:16 AM
Sorry, the .1em should have been 1em (typo). Point taken about using em for all parameters. Thanks.

I "reset" Firefox zoom as suggested, but it did not affect the situation. My FF screen font is MUCH larger than the comparison "resin" showed. I actually have to click twice on "zoom out" to get it the same size as IE and in DW design view.

Font sizes when routine internet browsing are fine.

If there is nothing telling in my CSS, could there be a problem with the page's HTML? If so, what types of tags would cause this?

sunfighter
06-18-2012, 04:09 PM
Font sizes when routine internet browsing are fine.
Are you saying things look OK when on the internet but not good in DW?

pnielsen
06-19-2012, 05:59 AM
Finally got to the bottom of it, by process of elimination. It was due to my somewhat scrambled HTML code on the page. Somehow FF choked on it while IE was OK. No need to go into detail, since it's probably a one-off. Thanks to everyone for their assistance..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum