I'm trying to create a header for some webpages that includes text against a graphic background. The graphic in question has left-ear and right-ear images, then some text in an ornate font in the upper center and a blank area below it. This graphic was created in Photoshop Elements and saved as a PNG file. I want:

1) the graphic to be centered on the page
2) the page title to be centered on the page, overlying the graphic, and positioned so it falls into the blank area below the text-in-graphic.

I'm trying for a generic solution here, the same header method to be used on a bunch of pages with a bunch of different text titles, so anything that uses direct positioning is not a usable solution. After some experimenting, I found a sequence of style commands that looked like it should work. The HTML is:

This looks like it should work. It does work in my HTML editor's preview and in MSIE 6.0, placing the graphic nicely centered on the page, the title text nicely centered within the graphic, and moved down by the 50-pixel margin so it appears in the blank area of the graphic. However, the exact same code fails badly in Firefox 2 and Opera 9. The header graphic is left-justified, not centered. The title text is centered horizontally within the graphic, but has a zero top margin, so it overlies the ornate text that's part of the graphic. I've tried changing every aspect of both code and styles that I can think of, and nothing has worked.

The full page is still very much under development, so I'd rather not show it. But I can give you a stripped-down page with just the header. It's enough to demonstrate the problem. Take a look at http://www.jwoolfden.com/header_test.htm, first in MSIE, then in Firefox or Opera. The way it looks in MSIE is the way I want it to look in all three browsers.

Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.

Posts: 11,189

Well, you focus on one of my favorite topics, the wolf.

But I have no way to view it in MSIE6 so guess I don’t know how you want it to look. On the other hand, you should be able to make it work in all browsers. I’ll reread your requirements and take another look but with Firefox and Safari.

As a follow-up: I'm having some trouble understanding just how centering works with CSS. I thought it worked like this: if a block element such as <div> or <p> has the text-align property set to "center," then everything in the block gets centered relative to the parent element. Then if some child block element contained a different text-align value, such as "left", the contents of that element would be aligned left within the centering. That is, if I do this:

then the result should be a block of text that is left-justified within a larger centered block, which automatically adjusts itself to match the size of the screen. In other words, it should look like an ordinary paragraph of text with large left and right margins. The same as if I had entered this:

But that isn't what I actually get. The centered-using-tables version works as I expect. The centered-using-CSS code works as I expect in Explorer, but in Firefox it left-aligns the paragraph with the page lefthand margin, as if the outer centered element wasn't there at all.

I suppose I could use percentage left and right margins to achieve the same result, but that's ugly and inelegant and defeats half my purpose, which is to learn how to write HTML/CSS code the way I used to write program code: short and sweet and simple, so anyone who looks at it can understand right away what it does and how.

So, how does centering really work? To what extent can you nest text alignment, and what's the right sequence of CSS styles to do it? Or am I better off using the ugly "percentage margins" approach?