text offsetting below div

Question

this should be simple to fix--but it's not because of IE7, or at least, IE8 compatibility mode.

The text "IAN MARTIN" and "wedding photojournalism" should be tucked neatly inside the divs #lefty, #righty, and #left and #right. Instead, it's hanging out the bottom half of those divs.

It's easily fixed by having the h1 and h2 top position be around -20px, but then in IE7--the text pops up out of the top of the divs...

What to do? This does not appear to be a Cufon issue--I turned it off to test...

Could the jquery animation be messing me up? Again I don't think so, but I'm no expert...

Here's my page: http://ianmartinphotography.com/test-site/index-cufon-02.html

And the CSS for h1 and h2:

h1 {position: absolute; letter-spacing: 4px;  color: #79868e; font-family: helvetica;   font-size: 38px;}

h2 {position: absolute; letter-spacing: 4px;  color: #969696; font-family: helvetica; font-size: 38px;}

Thank you for your thoughts!

Answer 1

Add the following CSS to h1 and h2:

margin:7px 0 0 0;

Works well like that here.

Answer 2

Your problem is that you're telling #left to be 50px tall and then putting something inside it that needs 100px (38+31+31) of height, the result is that the content overflows its parent's box. You need to make the parent, #left, tall enough to fully contain its child <h2>.

However, if you set #left to have height: 100px then you'll have to reposition the "about", "testimonials", ... links to be another 50px down and you'll have to add another 50px to the height of .field. You'll probably have to adjust a few other height and top values as well.

You could also rework the HTML and CSS so that you don't need to absolutely position everything. Simply stacking three <div>s on top of each other would give you the same layout while being less brittle; then some wrapper <div>s and margin settings to get it horizontally centered and offset from the top of the page.