A small CSS help needed, with a Joomla Contact Form! $5 for correct help.

I am doing a website based on Joomla CMS. I need to fix up this contact form, http://pinkpayroll.com/sample-form/.
As you can see that the recaptcha box is on the left aligned. I need someone to guide me how to make it appear towards a little right, so as to appear in line with the other boxes. I cannot provide you access to the code, but someone experienced should be knowing on how to manipulate the code using firebug on firefox.

If I am able to make the correction using a helpful suggestion, I'll be glad to pay that person $5 via paypal.

 

<div style="margin-left: 150px;" id="recaptcha_widget_div" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio">

Code (markup):

EDITED

 

That really does the work by editing from the firebug. But how can I interpret this in terms of stylesheet. I tried creating the class 'recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio and gave it the style attribute. But I missed something and its not working. Can you give little more detail?

'You are just one step away from your reward.

 

You could try putting the captcha part inside of a container and making that float right.

In CSS add a class called captcha_container.

.captcha_container{}

Code (markup):

then make it float to the right like this.

.captcha_container{float:right;}

Code (markup):

Then in the html file you need to find the area where the captcha code is.

i'm guessing it's line 535 to line 540 or so

<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=6LduJL8SAAAAAPQ6F5BQe17ktXBukIh1USeziScs" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
<div class="clear"></div>
<input name='h0995' class='jfbutton' type='submit' value='Submit' style='width:70px;height:25px;' />

Code (markup):

You need to put these lines of code inside the class like so:

<div class="captcha_container">

<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=6LduJL8SAAAAAPQ6F5BQe17ktXBukIh1USeziScs" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
<div class="clear"></div>
<input name='h0995' class='jfbutton' type='submit' value='Submit' style='width:70px;height:25px;' />

</div>

Code (markup):

If this doesn't work or isn't alligned how you might like it, then you can try modifying the CSS. Try things like adding "margin-right" to the css and then play with the amount of pixels until it looks correct

.captcha_container{float:right;margin-right:16px;}

Code (markup):

That code adds a margin of 16 pixels to the right side of the container making it move to the left.

If that doesn't work then i can probably think of some other ways to try getting it to work.

 

<div style="margin-left:50px">captcha code </div>

 

I have tried all those ways, but still I am unable to find which file to edit. The website is Joomla based, and pages are dynamically generated. I tried hit and trial methods but to no avail.

The component is located at http://jforms.mosmar.com/index.php?option=com_content&view=article&id=3&Itemid=4. Can anyone download and take a look? The form style sheet is located inside the media folder of the zip file.

 

Now i understand I think the code you are looking for is in this file:

"com_jforms_0.7_rc2_rev402\administrator\components\com_jforms\plugins\elements\recaptcha\recaptchalib.php"

The code that you should be able to modify starts at line 122, only problem is if you update the plugin you will have to modify it again.