[Super Mario]

I am having a problem with the distance between header text and paragraph text.

I don't know how to change the distance between them. Example:

<h1>Hello world</h1>

<p>Ipsum Delorum howsum my Latin generatori </p>

The distance between them is fine in most browsers but in IE it's soooooo big. How do I set a fixed distance?

[Super Mario]

Originally Posted by Super Mario

I am having a problem with the distance between header text and paragraph text.

I don't know how to change the distance between them. Example:

<h1>Hello world</h1>

<p>Ipsum Delorum howsum my Latin generatori </p>

The distance between them is fine in most browsers but in IE it's soooooo big. How do I set a fixed distance?

Sorry I remember it now. margin etc : -whatever em;

[Millennium]

If you want to make sure that you've got it reliably, then you should explicitly set the top and bottom margins on the relevant h1 and p tags. It doesn't really matter how you set them, as long as both are set explicitly.

The reason for this is that there's no "standard" for how exactly to form the margins between paragraphs, or between paragraphs and headers by default. Some browsers do it using margin-top, while others use margin-bottom, while some split the distance between margin-top and margin-bottom. By explicitly setting both margin-top and margin-bottom, you override the defaults, and so you can decide how you want that to work. But if you don't explicitly set either one of these, then the default will take effect, and so different browsers may work differently.

This is a large part of the point of CSS: with good enough browser support, it becomes possible to define (and redefine) the entire behavior of HTML -even tables- with CSS alone. Mozilla-based browsers already do this, and KHTML/WebCore-based browsers are most of the way there. I think Opera is trying to do this too. When you do it like that, then browsers can set whatever defaults they want, but a user can override them when it's important that things work exactly one specific way.

Unfortunately, there are two points which currently get in the way of this. One, few browsers actually have complete enough support for CSS that they can get this right; Acid2 doesn't cover some of the important parts. Two, even among the browsers that actually do work for this, there are often minor bugs and problems that keep things from working quite right. Often they're easy to work around, but not always.

[madmacgames]

I usually now go as far as turning padding & margin off on everything, to neutralize the different defaults between browsers, and give myself a known starting position, i.e, the first line of my CSS has commonly become:

Code:
* { padding: 0; margin: 0; }

[registered_user]

Originally Posted by madmacgames

I usually now go as far as turning padding & margin off on everything, to neutralize the different defaults between browsers, and give myself a known starting position, i.e, the first line of my CSS has commonly become:

Code:
* { padding: 0; margin: 0; }

ditto.

it also resolves many of the Mozilla / IE discrepancies in terms of list items.

[exca1ibur]

and Forms

[Super Mario]

Originally Posted by madmacgames

I usually now go as far as turning padding & margin off on everything, to neutralize the different defaults between browsers, and give myself a known starting position, i.e, the first line of my CSS has commonly become:

Code:
* { padding: 0; margin: 0; }

Even then line height and text spacing differs on the Windows platform because it renders fonts differently to the Mac.

[registered_user]

Originally Posted by Super Mario

Even then line height and text spacing differs on the Windows platform because it renders fonts differently to the Mac.

No. Fonts are jagged and ugly on Windows, but they're the same size (and line-height) as they are on a Mac.

http://roo.clubhouse54.com/fontsizetest/
http://roo.clubhouse54.com/fontsizet...e_screenie.gif

[Super Mario]

Originally Posted by registered_user

No. Fonts are jagged and ugly on Windows, but they're the same size (and line-height) as they are on a Mac.

http://roo.clubhouse54.com/fontsizetest/
http://roo.clubhouse54.com/fontsizet...e_screenie.gif

They really are not. Correction: not all fonts render exactly the same to the pixel. My sister was getting help designing a website when she found this one out. I saw it with my own eyes last week. Navigation menu worked fine in Firefox (all browsers) on Tiger but not in Firefox or any browser on Windows.

Same goes for the layout I am doing now. I set margin-bottom to -0.75em on a text class. Looks great on the Mac, distance is still too much on Windows. Same Firefox tried on both platforms too.

[registered_user]

I'm not saying that all browsers render pages the same, I'm saying that browsers render text the same size.

Your rendering problems are more than likely related to your mark-up and style, not the way the browsers scale type.

[Super Mario]

Originally Posted by registered_user

I'm not saying that all browsers render pages the same, I'm saying that browsers render text the same size.

Your rendering problems are more than likely related to your mark-up and style, not the way the browsers scale type.

If that's true why does the same browser, same version, same engine, render the same page with the same code and fonts differently on Windows than the Mac?

[registered_user]

Perhaps you have an example in mind that you can use to demonstrate your point of view?

I showed you a few posts up that fonts render the same size in IE as they do in Mozilla as they do in Safari. I don't know what else you're looking for.

[Super Mario]

Originally Posted by registered_user

Perhaps you have an example in mind that you can use to demonstrate your point of view?

I showed you a few posts up that fonts render the same size in IE as they do in Mozilla as they do in Safari. I don't know what else you're looking for.

Ah I looked at it now. As regards to the navigation menu, it broke because of horizontal font widths not rendered the same by Windows as the Mac. The example you have is vertical height which is obviously the same because of px measurements.

And then I am talking about top and bottom margins which are giving me a little problem on Windows as they are not being rendered the same as on the Mac.

A top margin set to -.75em on Windows has much more blank space than on a Mac. I don't understand that one at all.

[Super Mario]

I am afraid it is true. Rendering is different on both platforms. The accurate one is the Mac's 72dpi of course

http://www.webreference.com/new/font/

http://www.webstyleguide.com/type/cross.html

A TrueType font can be rendered differently by a different version of an operating system or even screen resolution. For example, the same exact Truetype fonts on a Windows 95A version may flow differently than on a Windows 95C version. A Truetype font on a machine with 640x480 display may flow differently than 1024 x 768 (try this is Windows 95 with very small point sizes (4pt) and you will see type reflow).

Different versions of the Mac OS also render Truetype fonts differently. The size and spacing may only vary slightly from version to version (or resolution), but it may be enough to cause type reflow or incorrect spacing.

The Macintosh and Windows operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on the Macintosh. Thus a line of 12-point Times type on a Macintosh looks more like 14 points in Times New Roman on a Windows machine.

. I never understood why until I discovered that Windows renders fonts at 96 dots per inch (dpi), whereas the Mac OS uses the standard 72 dpi.

And for an example

This is on a Mac



This is on Windows.

[registered_user]

Going back full circle now, the * { margin: 0; padding: 0; } trick eliminates nearly all of the spacing problems associated with browser default styling.

As for your screenies up there, while it's possible that the type is declared to be the same size, and the OS is behaving out of order, I'm more inclined to believe that it has something to with the mark up and CSS. The problems could be many: inheriting relative sizes, browser defaults set differently by the user in the prefs, or it could even be a DOCTYPE issue. The sample page I linked to uses em, px, and percents to render type, and it's really pretty uniform across platforms and browsers.

[madmacgames]

What that website is talking about is point sizes. And that is true, 12pt on OS X is different than 12pt on Windows. But there are plenty of other units to use instead of points.

Originally Posted by Super Mario

A top margin set to -.75em on Windows has much more blank space than on a Mac. I don't understand that one at all.

Well I don't know if this has anything to do with your problem, but one thing I've found is to stay away from ems that go into the hundredths. Even on OS X, Safari & Firefox will often interpret them differently, so I just stick to tenths of an em, which they seem to interpret about the same.

In any case a concrete example of your problem would be helpful if you're looking for help.