Fonts-size differs between IE and Firefox

[HeroOfSpielburg]

Hello,

I'm very new to CSS and still in the reference/copy/paste/edit stage,
so please forgive my ignorance. I'm using CSS for my blog, and while
the font size is fine in Firefox, it is illegibly small when looked at
in IE. It can't even be mousewheeled to a readable size. Is there
some descrepancy in how the two browsers render CSS? Can anyone
please tell me how to extend or unify my stylesheet so the font shows
up as the same size in both browsers? Please help.

I've listed the type and color section from my CSS below. If I should
be looking somewhere else, please let me know.

Thank you very much.

body {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
background: #ffffff url(images/autumnTactics1.jpg); background-
repeat:no-repeat; background-attachment: fixed;
color: #ffffff;
text-align: right;
}

#page {
background: transparent;
border: 1px solid #959596;
text-align: right;
}

#content {
font-size: 0.8em
}

..narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}

..widecolumn .entry p {
font-size: 1.05em;
}

..widecolumn {
line-height: 1.6em;
}

..narrowcolumn .postmetadata {
text-align: righ;
}

..alt {
background: transparent;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

#footer {
background: transparent;
border: none;
}

small {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
font-size: 0.9em;
line-height: 1.5em;
}

h1, h2, h3 {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
font-weight: bold;
}

h1 {
font-size: 4em;
text-align: center;
}

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

h2 {
font-size: 1.6em;
}

h2.pagetitle {
font-size: 1.6em;
}

#sidebar h2 {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
font-size: 1.2em;
}

h3 {
font-size: 1.3em;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: #cc6666;
}

/* Post title */
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #6666CC;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3
a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}

..entry p a:visited {
color: #b85b5a;
}

..commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'ms ui gothic', 'microsoft sans serif', arial, helvetica;
}

..commentlist li {
font-weight: bold;
}

..commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}

..commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}

#commentform p {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
}

..commentmetadata {
font-weight: normal;
}

#sidebar {
font: 1em 'ms ui gothic', 'microsoft sans serif', arial, helvetica;
}

small, #sidebar ul ul li, #sidebar ul ol
li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}

code {
font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}

[Jukka K. Korpela]

Scripsit HeroOfSpielburg:

I'm very new to CSS and still in the reference/copy/paste/edit stage,
so please forgive my ignorance. I'm using CSS for my blog, and while
the font size is fine in Firefox, it is illegibly small when looked at
in IE.

Simply stop playing with font size in your style sheet. Problem solved. When
you master some simpler issues in CSS, consider setting font size for
headings first, without setting copy text size.

I've listed the type and color section from my CSS below.

And post the URL, not snippets of code. How could we know, for example, how
much nesting you have on your page so that the font size effects cumulate?

body {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;

Have you actually tested your page using each of those fonts? It looks like
a strange list.

text-align: right;

Quite strange.

text-align: righ;

You haven't even used the W3C CSS Validator. Please do so before posting a
question about a particular style sheet.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Felix Miata]

On 2007/06/03 17:50 (GMT-0700) HeroOfSpielburg apparently typed:

I'm very new to CSS and still in the reference/copy/paste/edit stage,
so please forgive my ignorance. I'm using CSS for my blog, and while
the font size is fine in Firefox, it is illegibly small when looked at
in IE. It can't even be mousewheeled to a readable size. Is there
some descrepancy in how the two browsers render CSS? Can anyone
please tell me how to extend or unify my stylesheet so the font shows
up as the same size in both browsers? Please help.

I've listed the type and color section from my CSS below. If I should
be looking somewhere else, please let me know.

body {
font-family: 'ms ui gothic', 'microsoft sans serif', arial,
helvetica;
background: #ffffff url(images/autumnTactics1.jpg); background-
repeat:no-repeat; background-attachment: fixed;
color: #ffffff;
text-align: right;
}

#content {
font-size: 0.8em
}

It's impossible to give a full accurate answer, as you've negelected to provide a URL, but the probable single biggest reason is that you've neglected to tell IE not to be stupid in rudely undersizing
text in #content.

http://css-discuss.incutio.com/?page=UsingEms shows how to tell IE not to be stupid.

http://www.informationarchitects.jp/100e2r?v=4 explains how not to be rude.
--
"Respect everyone." I Peter 2:17 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/

[Bergamot]

HeroOfSpielburg wrote:

>
the font size is fine in Firefox, it is illegibly small when looked at
in IE.

I've listed the type and color section from my CSS below.
[snip huge amount of code]

Please don't post reams of code, post a URL to your page that shows the
problem.

#content {
font-size: 0.8em
}

The problem is most likely the well-known bug IE has with em units. Set
body {font-size:100%} and the problem should go away.

That only leaves the other problem with using too small type for normal
paragraph text. If 1em/100% looks too big to you, you haven't adjusted
your browser default font size properly.

I won't comment on other aspects of your stylesheet, but there are other
questionable settings besides the type size.

--
Berg

[HeroOfSpielburg]

Thank you to everyone who took the time to reply. As several people
noted, I should probably take some time reading up on CSS basics, so
when I copy from other stylesheets, I can at least know what is worth
copying or not. :)

For now, this will at least fix the problem of no one being able to
read my site in the short term. And next time I'll be sure to post
the URL and check the stylesheet against the validator. I'm much
obliged!