CSS Form / Image

[invision]

Hello,

I have a page: http://www.michaelmcg.co.uk/hp/

And basically need the green graphic(hc-graphic.jpg) to have it's 'top' inline with the top of the input field.

I've tried a number of ways but can't seem to fix it.

Any ideas from some pro's?

[WebJoel]

I have no idea what you're after here, but the text "house code" is one container. It is contrained so as to 'line-wrap' to a second line. There is a flaw in your design. It will be difficult to adjust cross-browser, two elements (the form fields) with a single element that is 'line-wrapped'. Your use of "line-height" won't guarantee that, as the font-size will be different x-browser. "line height" is meant for "<p>", not "<div>". You cannot "line-height" anything except text. Maybe you meant to use "height:foo;"?
Better perhaps to not use a DIV container to contain just 'the text'. Use two "<p>! </p>"s maybe, and style those, the two of them, if this is intended to be:

House
Code

and not:

House Code

The way it is written now, it wants to be like the second example, and it would if the DIV were a bit wider..

[Centauri]

<input src="img/hc_graphic.jpg" type="image" style=" vertical-align: bottom; padding-bottom: 0.6em">

[invision]

Many thanks once more Centauri, you have come to the rescue and I salute you.

WebJoel - thanks for the help, really appreciate it. The 'House Code' going onto two lines occurs as I cut down the CSS in my stylesheet to make it easier to answer this, so I removed the body font part.