Absolute positioned div jumps outside containing div in IE7

Question

Having trouble with a couple of display issues in IE7.

Firstly, my large text headers display too far up in Internet Explorer (all pages) Secondly, my descriptions on my Portfolio pages end up outside their containing divs.

Works great on FF/Chrome/Opera/Safari though! You'll see what I mean: http://bit.ly/a3hUD4 (I've used bitly so my dumb questions don't show up when someone googles my website).

I've googled extensively. Not sure if problem number 2 is a overflow issue, or a absolute positioning bug in IE.

Here's the CSS for the centre div with the jumbo-text titles

.column1 {
padding: 103px 10px 10px 10px;
float: left;
width: 500px;
margin: 0;
}

And for the description div on the portfolio page

.porttxtbox {
text-align: right;
background-image: url(images/porttxtBG.png);
bottom: 0;
position: absolute;
width: 100%;
padding: 0px;
margin: 0px;
}

And it's container div

.portimgbox {
    padding: 0px;
    margin: 0px;
    height: 250px;
    width: 480px;
    position: relative;
    border: 5px solid #EAEAEA;

Thanks in advance!

EDIT: Now that I notice, it's not just my jumbo page titles in column1, ALL of my columns are about 6 or 7 px higher than they are in webkit/gecko browsers. Any ideas?

Answer 1

Heading Margins

try with this

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The <p></p> Tag with attribute line-height could not be rendered well in ie 7 or min version

Removing or replacing tag with a div could solve the problem, if problem persist you can use the gif spacer.. alway works :P

Absolute Position

ops.. I forgot try to add in .porttxtbox left:0;

Is better for specification typing the orizontal rule left:0; of a position:absolute, so there is no rendering fail with some browser, see ie7 or min version.