I don't really get what you mean by AP DIV and how the CSS relates. Can you create a sample page to show the issue?

AP DIV means absolutely positioned div (layer).
I can't upload a page but I will provide an example page as code and you can save it as HTML to test in your browser?
Sorry I can't be more efficient.

Edit: I forgot HTML is active…

If I recall correctly some browsers (esp. Explorer) will always ADD a few pixels of extra padding, even if you have defined exact values in your css.

. . .
Bert Vanderveen BNO

Hope this helps explain what I mean.

Remember the text is in a positioned DIV, not just in the body of the HTML page.
So it's about how the browser formats the text inside the DIV, not just about adding extra pixels to the body.

Hm. So I made a quick test of this issue to try and see if I could replicate the problem. Part of the problem with just looking at an image is that it is terribly hard to understand how all the elements on the page are set up and rules applied to the outer div are just as important as those applied to the p tag.

Test Page

My example here doesn't seem to have the problem you show. Can you take a look on your end and tell me if you see a problem with it? If it seems to work properly, check out the CSS rules (they are all in the header) and you should be able to figure out what is going on with your example.

Thanks for your time Aaron.

Yeah, you are right, the problem does not seem to exist in your test, which I tried in both browsers.
I am not using a p tag though, rather using a css class to style the text inside the DIV.

Could this be the problem?

I also noticed that, the two browsers demonstrate different leading/line-height.

Actually, the p tag is not responsible here (although I would use it myself since containing text is why p tags exist). Test Page 2 doesn't use p tags and still appears fine. It may be related to how you are positioning the div instead.

Remember you can use the line-height rule to set leading, but ultimately these are different browsers and their text rendering will be slightly different.

But the p tag has it's own inherent attributes, right? I think I want to avoid those.
Is bad technique to style the content of the DIV by assigning a class?
I have found the leading controlled by line-height is the same between the Safari and Firefox.

I really need to have a look and see what happens in Internet Explorer.

Thanks again for your time…

I really need to adjust to the idea of web design and stop thinking about it like print.
Nevertheless it is frustrating that basic typographic/layout ideas become impossible on the web.

The p tag does have some inherent properties — specifically applying space before and after itself. That's it. Beyond that, it applies semantic meaning to the text indicating a "paragraph" of copy, but that doesn't actually mean anything in terms of positioning.

It isn't inherently bad form to assign css to copy via a containing div — in fact it can save on file size, but I tend to prefer using p tags since then at the beginning of your css style sheet, you just say:

p {
stuff
}

and it will apply those rules to every single one on the page. I guess for me, it also helps me think, "ok, this is text because it is in a p tag."

Actually, basic typographic/layout ideas are not impossible on the web. I've seen some work that is done extremely well that follows those principles. The one I usually present is Wilson Miner's site. Figuring out how to think in terms of web development to make your print-inspired typography and layouts work is the biggest difficulty. That just takes time and practice. It isn't impossible, just different.

True, impossible was the wrong word. I don't mean to speak ill of the Wilson Miner site, but I'd really like to see text line up on a baseline or have some kind of relationship with increments of leading that is used across the whole page and transparently throughout the site. Understandably this may not be the agenda/rational/concern of this specific site, so I don't mean to criticise this site in particular.

Actually, the Wilson Miner site is pretty good.

No worries. I tend to like it for usage of grid and readability / legibility more myself.

As for baselines, I know I have seen that sort of thing done. Andy Clarke's forabeautifulweb has a good article discussing baseline shifts on the web to improve the feel of a page. Course, if you look at the homepage, his site doesn't have a consistent baseline either. I'll see if I can find a better example of consistent baselines in particular.

Interesting, I will take some time to read this.

Thanks for your help and examples today, Aaron.

No problem. Glad to have helped.

For future reference, it's best to upload your demo page to a server and give us the link if you can. It's so much faster to just muck with the markup directly than to do the back and forth explanations.

Indeed, if your text is a paragraph of text, you should be using paragraph tags. While there are default styles for most tags in most browsers, you can 'zero them out' using CSS. Just one of many samples is Yahoo's reset.css: http://developer.yahoo.com/yui/reset/

As for dealing with baseline grids, the basic premise is that all of your element's styles have to conform to fall within whatever increment you are using for the grid.

So, if you're using a 20px grid, then your header tags' line-height, padding and margin would have to add up to 20px or 40px or 60px, or etc...

I think it's quite like what aluminum is describing but try adding this to your css:

body{margin:0px; padding:0px;}
p{margin:0px; padding:0px;}

it makes sure that for both the body and the p tag no extra pixels are taken.

and also remember to add

html {margin:0xp; padding:0px;}

different browsers set different default values.

Heh. I sometimes just use

*{margin:0; padding:0}

and be done with it.

Thanks folks. Part of the problem seemed to be coming from the fact that I had selected Times rather than Times New Roman in the CSS. Times New Roman was much more stable across browsers.
It seems that there is some inevitable padding within a DIV that even CSS reset can't control. However, if I can count on this value across browsers being the same, or at least not drastically different then I can continue.

"It seems that there is some inevitable padding within a DIV that even CSS reset can’t control."

That should not be the case.

I mean, it is not padding as such, but the effect is the same.
In print, I can align the cap height to the very top of a text frame.
I can't seem to do this to the pixel in CSS/HTML.

You won't be able to do it to the pixel given that you don't have absolute control over the type. However, you can get close by using negative padding and/or tweaking the line-height. The issue is that there really isn't a 'top of letterform' object in HTML type.

Interesting, thanks, I hadn't thought of negative padding.

Thanks all!