Headings

#1

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

Can someone summarize the rules of how heading margins, paddings and
sizing are handled? Or point me at a resource. It's a bit too general to
get anything useful out of Google. Seems like I should know this, but I
don't.

Jeff

#2

In article <ktGdne8TyvpPofXUnZ2dnUVZ_jWdnZ2d (AT) earthlink (DOT) com>,
Jeff <dont_bug_me (AT) all (DOT) uk> wrote:

Quote:

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

Can someone summarize the rules of how heading margins, paddings and
sizing are handled? Or point me at a resource. It's a bit too general to
get anything useful out of Google. Seems like I should know this, but I
don't.

I would suggest *not* to try to memorize every browser default
difference. So you should not really "know this" at all. This is a
really good reason to design with leeway to not have your designs broken
by a few browser variations. If you are particularly worried about it,
there is always the strategy of * {margin: 0; padding: 0; line-height:
200;} The very last to make you very careful indeed of supplying a
comprehensive alternative stylesheet!

But here is a simple bit of markup for you so that you can alter the
main factors that influence exactly where a heading text is placed in
the normal scheme of things. Let us zero margins for body to get started
without distractions in top left:

<http://dorayme.netweaver.com.au/alt/heading.html>

Remove the CSS to see the defaults in each browser.

Obviously the font-size is a factor, the line-height is another, margin
is yet another. I mention these because these are the main factors and
each browser has defaults for these. Generally, they are about 1.2em for
line-height (unlike in the url). Perhaps about 0.7em for top and bottom
margin.

Perhaps *you* can do the experiments and tell us in a nice table what
you have found. I supply the base URL and the grid. <g>

--
dorayme

#3

dorayme wrote:

Quote:

In article <ktGdne8TyvpPofXUnZ2dnUVZ_jWdnZ2d (AT) earthlink (DOT) com>,
Jeff <dont_bug_me (AT) all (DOT) uk> wrote:

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

Can someone summarize the rules of how heading margins, paddings and
sizing are handled? Or point me at a resource. It's a bit too general to
get anything useful out of Google. Seems like I should know this, but I
don't.

I would suggest *not* to try to memorize every browser default
difference.

Well, I was happily htmling away in Firefox, with no heading properties
being set other than color. Then, of course, the client looked at it in IE!

So you should not really "know this" at all. This is a

Quote:

really good reason to design with leeway to not have your designs broken
by a few browser variations.

You know the only times this is really critical is at the top of a
column. Invariably you want all your content to start at the same level
in each column. A wildcard first child would be nice.

If you are particularly worried about it,

Quote:

there is always the strategy of * {margin: 0; padding: 0; line-height:
200;} The very last to make you very careful indeed of supplying a
comprehensive alternative stylesheet!

But here is a simple bit of markup for you so that you can alter the
main factors that influence exactly where a heading text is placed in
the normal scheme of things. Let us zero margins for body to get started
without distractions in top left:

http://dorayme.netweaver.com.au/alt/heading.html

Remove the CSS to see the defaults in each browser.

Obviously the font-size is a factor, the line-height is another, margin
is yet another. I mention these because these are the main factors and
each browser has defaults for these. Generally, they are about 1.2em for
line-height (unlike in the url). Perhaps about 0.7em for top and bottom
margin.

Perhaps *you* can do the experiments and tell us in a nice table what
you have found. I supply the base URL and the grid. <g

That's a nice grid!

I wonder what else can go in the margin/padding/sizing test bed. I
suppose the thing to do would be to mock it all up and send it over to
Browser shots. Might as well toss in lists.

Jeff

Quote:

#4

In article <DMOdnfLXbdG8yPXUnZ2dnUVZ_qLinZ2d (AT) earthlink (DOT) com>,
Jeff <dont_bug_me (AT) all (DOT) uk> wrote:

Quote:

dorayme wrote:
In article <ktGdne8TyvpPofXUnZ2dnUVZ_jWdnZ2d (AT) earthlink (DOT) com>,
Jeff <dont_bug_me (AT) all (DOT) uk> wrote:

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

Can someone summarize the rules of how heading margins, paddings and
sizing are handled? Or point me at a resource. It's a bit too general to
get anything useful out of Google. Seems like I should know this, but I
don't.

I would suggest *not* to try to memorize every browser default
difference.

Well, I was happily htmling away in Firefox, with no heading properties
being set other than color. Then, of course, the client looked at it in IE!

I understand. IE does do things a little different. I suggest that if it
bothers you that the defaults in IE are causing trouble for you and
clients (and I do understand this, it can cause all sorts of trouble in
various contexts), use a separate stylesheet for IE by means of
conditional comments in the head of the HTML doc. Like:



And in ie6, have:

h1 {margin-top: ...; margin-bottom: ...; ...}

based on the effect you want.

But with IE you have to actually look! You cannot even trust it to be
consistent from your memory! <g>

--
dorayme

#5

dorayme wrote:

Quote:

I understand. IE does do things a little different. I suggest that if
it bothers you that the defaults in IE are causing trouble for you and
clients (and I do understand this, it can cause all sorts of trouble
in various contexts), use a separate stylesheet for IE by means of
conditional comments in the head of the HTML doc. Like:

dorayme. Really. Don't.
Conditional comments just to make a header look pixel perfect in more than
one browser?

OP: Live with the difference. You will *never* get your page to look exactly
the same in the many browsers out there.

#6

On 2009-01-10, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <ktGdne8TyvpPofXUnZ2dnUVZ_jWdnZ2d (AT) earthlink (DOT) com>,
Jeff <dont_bug_me (AT) all (DOT) uk> wrote:

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

Can someone summarize the rules of how heading margins, paddings and
sizing are handled? Or point me at a resource. It's a bit too general to
get anything useful out of Google. Seems like I should know this, but I
don't.

I would suggest *not* to try to memorize every browser default
difference. So you should not really "know this" at all. This is a
really good reason to design with leeway to not have your designs broken
by a few browser variations. If you are particularly worried about it,
there is always the strategy of * {margin: 0; padding: 0; line-height:
200;} The very last to make you very careful indeed of supplying a
comprehensive alternative stylesheet!

But here is a simple bit of markup for you so that you can alter the
main factors that influence exactly where a heading text is placed in
the normal scheme of things. Let us zero margins for body to get started
without distractions in top left:

http://dorayme.netweaver.com.au/alt/heading.html

Remove the CSS to see the defaults in each browser.

Obviously the font-size is a factor, the line-height is another, margin
is yet another. I mention these because these are the main factors and
each browser has defaults for these. Generally, they are about 1.2em for
line-height (unlike in the url). Perhaps about 0.7em for top and bottom
margin.

I think most browser default stylesheets just leave line-height as
normal on headings.

That means the actual line height you get is usually somewhere between
1.0 and 1.2 the font size, but that depends on the *font*, not just on
the browser.

Most browsers interpret line-height: normal as "use the line-height the
font itself recommends". The CSS spec is ambivalent-- they try to stay
out of the nitty gritty of fonts.

Most fonts contain a bit of "metadata" including a "line gap" or
"leading", which is what the browser uses for line-height: normal. Note
that the font's leading is completely ignored for all other values of
line-height, which are either absolute values or multiples of some
font-size.

Really line-height: 2 should have meant "twice whatever normal is" if
you ask me but whaddayagonnado.

#7

On 10 Jan, 06:14, Jeff <dont_bug... (AT) all (DOT) uk> wrote:

Quote:

I've come to realize that IE has a different way of handling headings
than everyone else. But I don't really understand what that is.

http://brainjar.com/css/positioning/

#8

rf wrote:

Quote:

dorayme wrote:

I understand. IE does do things a little different. I suggest that if
it bothers you that the defaults in IE are causing trouble for you and
clients (and I do understand this, it can cause all sorts of trouble
in various contexts), use a separate stylesheet for IE by means of
conditional comments in the head of the HTML doc. Like:

dorayme. Really. Don't.
Conditional comments just to make a header look pixel perfect in more than
one browser?

OP: Live with the difference. You will *never* get your page to look exactly
the same in the many browsers out there.

You can't just live with the difference if your client doesn't like

that he is seeing something different.. In my case, we had set a default
line-height for that "column". It came as a surprise when I looked at
this in IE and the larger heading size in IE had cause the heading to
wrap and *overlap*. Overlapping text is widely considered broken! And it
started at a different vertical position. Just as in a newspaper, if you
have several columns and each column starts at a slightly different
height, this will be looked at askew.

I look at it this way, since I need to earn a living. Satisfy the
client, but do it in a way that doesn't degrade poorly. YMMV.

Jeff

Quote:

#9

Jeff wrote:

Quote:

In my case, we had set a
default line-height for that "column". It came as a surprise when I
looked at this in IE and the larger heading size in IE had cause the
heading to wrap and *overlap*.

Obscure your question is. No URL you gave. Impossible to see your real
problem is. Great confusion you create.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#10

Jeff wrote:

Quote:

I've come to realize that IE has a different way of handling headings
than everyone else.

And that surprises you?

IE seems to collapse top margins when it
shouldn't.

Quote:

Well, I was happily htmling away in Firefox, with no heading properties
being set other than color. Then, of course, the client looked at it in IE!

Don't bother with an IE-specific stylesheet - it's not necessary. If you
want consistency across browsers, the best thing to do is to explicitly
set margin-top on your heading elements. Even IE should honor that.

--
Berg