DIV style - IE vs. Mozilla

[drmaves]

I'm having trouble with styles I've applied to a <div>. It seems to work differently between browsers (IE vs. Mozilla) and I can't figure out why. The <div> draws a gray line under the <h2>. In Mozilla the line is snug up against the <h2>, which is what I expect; however, in IE there is additional space between the two. I can't seem to control the spacing in IE. Any ideas on why?

Here's the html code:

<h2>Announcements</h2>
<div class="headdivider"></div>

Here's the CSS code:

h2 {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0pt;
}

.headdivider {
margin-top: 0pt;
margin-bottom: 6pt;
border-bottom: #bdbabd 2px solid;
width: 540px;
}

[FloppyCopy]

Are you using the div to create an underline effect? Why don't you just use 'text-decoration: underline;' in your h2's style?

You've probably got a reason for doing it that way. I've had troubles between IE and Mozilla before - IE just isn't up-to-date with how things work.

[createErrorMsg]

You've zeroed out the appropriate margins, but IE may be applying a default padding, as well. try zeroing the padding on both elements.

If FloppyCopy is right, and your intent here is to provide an underline on the text that also extends beyond the text to the width specified, you don't need an extra div to do it. While text-decoration: underline will not extend beyond the text, a border-bottom on the <h2> itself will, and is more likely to display uniformly across browser (or at least will be eaasier to fix since you'd only be dealing with ONE element's default margins and padding).

cEM

[drmaves]

I tried zeroing out the padding but that didn't do it.
Adding border-bottom to the h2 tag worked fine. I then used padding-bottom to adjust the spacing between the text and the line. Thanks to both of you for your help.

[kaled]

I'm no expert, but I think pt applies only to fonts. Margins, borders and padding, etc. should be specified with px.

A 12pt font is larger than a 12px font. The explanation is rather complex and not really relevant.

Kaled.

[drmaves]

Kaled, you brought up an issue that I had never really thought about so I went to the W3C specifications to see what I could learn.

As I read the specs it seems that <length>, which margins, borders and padding use, can be set with any of the following em, ex, px, in, cm, mm, pt, or pc.

I did try setting all the measurements to pixels but that had no effect on my problem.

Even though they all work, I am going to try and be more consistent in what I use for <length>.

Thanks.

[kaled]

Well, I was right about one thing, I'm no expert.

Sorry about the wild goose chase.

Kaled.

[createErrorMsg]

can be set with any of the following em, ex, px, in, cm, mm, pt, or pc

While any of those measurement values can be used to specify lengths, that doesn't mean that they SHOULD be.

The primary difference between PT and PX (other than the fact that they provide different sizes) is this: PT is a measurement derived from print media, and is 'best' used in that medium. PX is a screen media size, based on the details of how web pages are displayed (in pixels) and is therefor considered a more 'screen appropriate' measurement.

Ultimately, it probably doesn't matter, and like Kaled, I'm no expert, but I believe the 'accepted best practice' is to reserve PT sizing for print media stylesheets and use PX (or a relative sizing unit, like EM) on screen.

cEM