How to align 2 lines of text with 1 image?

Pulling out my hair on this one, need it to work for FF and IE..

Currently it looks like this:




I want it to look like this:





My HTML:

<div id="step2">
                <p><h2><img src="images/arrowOrangeStep2.gif" /> Step 2: Place the website</h2></p>
</div>

HTML:

My CSS:

p {
	padding: 20px 0 0 0;
}

h2 {text-align:left;
	color:#071F3D;
	font:19px Arial;
	line-height:24px;
}

img {
	border:0;
	vertical-align: middle;
}

#step2 {}

HTML:

Thanks!

 

Rochow ninja to the rescue, thanks champ!

 

SuPrAiCeR69,

It’s not 2 lines, it’s only 1 line -- heading h2 --, try next code.

html code

<div id="img"><img src="images/arrowOrangeStep1.gif" width="" height="" /></div>
<h2>Step 2: Place the web site</h2>

Code (markup):

css code

#img {
    float:left;
    margin-right: 10px;
    padding-top: 20px;
}

h2 {
    color:#071F3D;
    font:19px Arial;
    line-height:24px;
}

Code (markup):