Why do H1 sizes differ in IE6/Netscape7.1/Opera7.2

[John Latter]

Hi,

I'm have just starting to learn about CSS and a problem I have at the
moment concerns font sizes where the H1 header in Opera & Netscape
appears about the same while that in IE6 is smaller. The only CSS I'm
using is:

h1 {
text-align : center;
color: #66ffcc;
font-size: 1.5em;
}

and it doesn't seem to matter if I use ems or %s

Er - a belated thought: I've just noticed that this difference between
the browsers extends to all font sizes and on this point I've only
declared a font-family - is there anyway of equalling-up the font size
between browsers? (deletes "and is this a sensible question?")

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[John Latter]

Hi,

I'm have just starting to learn about CSS and a problem I have at the
moment concerns font sizes where the H1 header in Opera & Netscape
appears about the same while that in IE6 is smaller. The only CSS I'm
using is:

h1 {
text-align : center;
color: #66ffcc;
font-size: 1.5em;
}

and it doesn't seem to matter if I use ems or %s

Er - a belated thought: I've just noticed that this difference between
the browsers extends to all font sizes and on this point I've only
declared a font-family - is there anyway of equalling-up the font size
between browsers? (deletes "and is this a sensible question?")

Er, I've solved the problem for headers (for these 3 browser versions
anyway) by declaring font-size in pixels although I thought I'd read
somwhere that this wasn't recommended (I can't remember why not - and
that's part of the problem, I read a lot and have half forgotten it
before I get to do any coding, 'spect it'll sink in eventually!).

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[Adrienne]

Hi,

I'm have just starting to learn about CSS and a problem I have at the
moment concerns font sizes where the H1 header in Opera & Netscape
appears about the same while that in IE6 is smaller. The only CSS I'm
using is:

h1 {
text-align : center;
color: #66ffcc;
font-size: 1.5em;
}

and it doesn't seem to matter if I use ems or %s

Er - a belated thought: I've just noticed that this difference between
the browsers extends to all font sizes and on this point I've only
declared a font-family - is there anyway of equalling-up the font size
between browsers? (deletes "and is this a sensible question?")

If I'm eighty years old wearing coke bottle glasses, I might have set my
system up that my default font size is 16 points.

If I'm fifteen years old, I might have set my system up for 10 points,
because I think Grandma's coke bottle font size is way too big.

With that said, IE does have an issue with ems. Use percentages instead,
and that way, Grandma will get 150% of 16 points, and Junior will get 150%
of 10 points, no matter what visual browser they are using.

 

[Toby A Inkster]

is there anyway of equalling-up the font size between browsers?

Yes:

You can control font size in Internet Explorer in the 'View' menu.

In Opera, in Preferences go to the 'Fonts' panel. Sizes for normal body
text, <h1>, <h2>, etc can be adjusted independently of each other.

In Mozilla (so I assume in Netscape 7.x) there is 'View' > 'Text Zoom'.

 

[John Latter]

If I'm eighty years old wearing coke bottle glasses, I might have set my
system up that my default font size is 16 points.

If I'm fifteen years old, I might have set my system up for 10 points,
because I think Grandma's coke bottle font size is way too big.

With that said, IE does have an issue with ems. Use percentages instead,
and that way, Grandma will get 150% of 16 points, and Junior will get 150%
of 10 points, no matter what visual browser they are using.

Okey-doke Adrienne, that means I've got to think some more about my
page layout - the header in question fits into a right hand column
only 130px wide so I guess I've got a choice between making it fit or
making the width of the column a %.

I've been playing around since I first posted and I'm 'beginning' to
get a feel for how things work and your comments have broadened my
perspective somewhat - the only trouble is, I also have a feeling that
I'm only at the beinning of the beginning!

Thanks anyway

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[John Latter]

Yes:

You can control font size in Internet Explorer in the 'View' menu.

In Opera, in Preferences go to the 'Fonts' panel. Sizes for normal body
text, <h1>, <h2>, etc can be adjusted independently of each other.

In Mozilla (so I assume in Netscape 7.x) there is 'View' > 'Text Zoom'.

That's what I did between sending the original post and getting your
reply which made me dimly aware of the point Adrienne made 'bout
everyone's settings being different. Oh well, I guess I might be on
the right track for this particular issue anyway

Or at least I hope so!

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[Mark Parnell]

I also have a feeling that
I'm only at the beinning of the beginning!

A good place to start...

 

[Greg Schmidt]

Okey-doke Adrienne, that means I've got to think some more about my
page layout - the header in question fits into a right hand column
only 130px wide so I guess I've got a choice between making it fit or
making the width of the column a %.

Does the right-hand column have to be exactly 130 pixels, or is it 130
pixel minimum (say, to fit in a graphic)? If the latter, read up on the
min-width property which might help you. If the former, well you can
still put em-sized text into pixel-sized divs, you just have to be aware
of what happens when the default font size gets very large.

 

[Mark Parnell]

read up on
the min-width property which might help you.

Except of course IE doesn't support it. :-(

 

[John Latter]

Does the right-hand column have to be exactly 130 pixels, or is it 130
pixel minimum (say, to fit in a graphic)? If the latter, read up on the
min-width property which might help you. If the former, well you can
still put em-sized text into pixel-sized divs, you just have to be aware
of what happens when the default font size gets very large.

Oops - I should have said the left hand column! Its 180px wide with a
130px image in it.

I had come across the 'min-width' property, but as Mark noted, knew it
was universally recognized (although I couldn't remember which browser
was the problem).

It seems to me that there could always be a problem using columns - if
I make it fixed width then large user font sizes could cause the text
to look yeuky (eg one word a line) or to for it to spread into the
next column. And surely the same would apply if I made the left hand
column )'pause' - yep, its definitely the left!) a percentage width
cos if the user font size is gonna be big in one column its gonna be
big in them all?

Maybe its possible to worry too much about too many unknowns?

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html

 

[John Latter]

Except of course IE doesn't support it. :-(

A technicality..

(*g*)

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html