/    Sign up×
Community /Pin to ProfileBookmark

CSS Form / Image

Hello,

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

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?

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelJan 06.2008 — 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, [I]two elements[/I] (the form fields) with a [I]single element[/I] 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 "[B]height[/B]:[I]foo[/I];"?

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:

[B]House

Code[/B]


and not:

[B]House Code[/B]

The way it is written now, it wants to be like the [I]second example[/I], and it would if the DIV were a bit wider..
Copy linkTweet thisAlerts:
@CentauriJan 06.2008 — [CODE]<input src="img/hc_graphic.jpg" type="image" style=" vertical-align: bottom; padding-bottom: 0.6em">[/CODE]
Copy linkTweet thisAlerts:
@invisionauthorJan 06.2008 — 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.
×

Success!

Help @invision spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...