h2 w/ image in parallel boxes?

HTML & CSS
21

Hi Val.

I’m not sure where you are with this as there’s too many changes above to follow through but I can tell you why the first header is cut short in IE6.

You need to add position:relative here:


.leafh2 h2 {
    float: right;
    width: 50%;
    background: #e5ffbf;
    margin-right: -40px; /*txtbox padng*/
    font: bold 1.2em Helvetica, sans-serif;
    color: #f00251;
    text-align:center;
   [B] position:relative;[/B]
}

Elements with negative margins will often need position:relative added or they go under the background.

What other differences were there with this line as it looks much the same as IE7 to me?

22

Hi Paul - tnx! That position:relative does the trick.

It all works perfectly now as a div :slight_smile: I’m really happy with it. It’s at (ignore that the includes don’t work):

http://www.greensmoothie.com/gs/wp-content/themes/1green/index-nowp.php

thank you Ralph and Paul! - Val

23

p.s. I’m right proud of myself for seeing the solution to get the div to work, just move the image 30% to the left!

I’m still under the ignorance-is-bliss belief that we didn’t need a table because there’s no caption under the image… That time I needed a table Paul, the image + its caption in the left-hand cell were always different sizes, each time I used the table

whereas here we just have one image with no cap that’s always the same image, so it’s size/position never changes relative to the text in right-hand cell.

I just uploaded an example to that same page, of when a table IS needed, check it out (scroll down below h2’s):

http://www.greensmoothie.com/gs/wp-content/themes/1green/index-nowp.php

best, Val