Styling CSS Elements in a pre-made Form

I asked this question yesterday, but I don't think I phrased it correctly.

I have a form at http://azwm.com/arizona-mortgage-application/

VERY IMPORTANT: I do not have access to the form code or the HTML. All I can do is manipulate the style sheet. In order to manipulate the style sheet, I need to "view source" to try and figure out which element I should target.

I am trying to position the progress bar flush against the top of the form. I think I should / can move it around using this:

body  #gform_wrapper_3 .gform_body .gfield_html .gfield_no_follows_desc
          {
      padding-top:0px;
      margin-top:-10px !important;
      position:relative;
      top:0px;
      left:0px;        
          }

However, I can't make it flush against the top of the form. Or at least, I can't figure it out.

Also, I want to position the CONTINUE button. I think I should be doing something like this:

body #gform_wrapper_3 .gform_body .gform_footer .gform_next_button_3

      {      
            position:relative;             
            left:50px;
            padding-left:50px;
         }

But that doesn't do anything at all.

I will post all of the code here. I am sorry that it is so messy. I'll fix it later, when I learn what the heck I am doing.

Thank you in advance!

 
*----------- STYLING FOR LONG MORTGAGE APP BEGINS HERE ----------------*/

 
/*---------background and container of the form---------*/

body #gform_wrapper_3 

	{	
	padding-top:0px !important;
	padding-right:0px;
	padding-bottom:0px;
	background-color: gray;
	border-radius:1.6em;
	position: relative;
	left:5px;
	top:-5px;
	}

body #gform_wrapper_3 .gform_body 

	{
	border:1px solid red; 
	background-color:#ccc;
	position: relative; 
	width: 620px; 
	left:0px;
	border-radius:1.6em;

	}

	

/*----- position progress bar (a.k.a. HTML field) -------*/

body  #gform_wrapper_3 .gform_body .gfield_html .gfield_no_follows_desc
    	{ 
	padding-top:0px;
	margin-top:-10px !important; 
	position:relative;
	top:0px;
	left:0px;  	
    	}


/*------------ continue button ------------*/

body #gform_wrapper_3 .gform_body .gform_footer .gform_next_button_3

	{	
		position:relative; 		
		left:50px; 
		padding-left:50px;
         }


/*------------------standard field label---------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_label 

	{
	padding-left:50px;	
	color:#476977;
	font-size: 14px;
	font-family: helvetica, arial;
	font-weight: bold;
	position:relative;
	}




/*-----------drop down menus---------------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield select 
	{	

	border:1px;
	font-family: verdana, helvetica, arial;
	color: #17454d;	
	font-size: 12px;
	position:relative;
	left:50px;
	width:200px;
	
	}
			



/*------------------text fields--------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield input[type=text] 

	{	
	padding-left:50px;
	border:2px solid #476977;
	width:200px;
	font: 12px Trebuchet MS, verdana, helvetica, arial, sans-serif;
	/*--------margin-right: relative-------*/
	position: right top;		
	}


/*-----------------Radio List Items------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_radio li 

	{
	position:relative;
	left:50px;
	font-size:14px;
	color:#476977; 
	font-family:verdana, sans-serif;

	}

/*----------------Radio Buttons---------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_radio 

	{
	color:white;
	position:relative;
	left:50px;
	}


/*--------- description for input fields --------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_description {
position:relative;
	left:50px;

}





/*---------------previous Buttons---------------*/

body #gform_wrapper_3 .gform_body .gform_page_footer .gform_previous_button {display:none; }

Open in new window

mikegeorge2Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
SSupremeConnect With a Mentor Commented:
Ok. add this rule
#field_3_50 { margin-top: 0;}

Try to add it somewhere at the end of .css file, to make sure that it will overlap previous rule.
0
 
SSupremeCommented:
Could you please sketch so we can see how do you want it to look?
0
 
mikegeorge2Author Commented:
I just want the button that says "continue" to be lined up with the form labels and input boxes.

So... I want the continue button (which is an image) to be styled 50px from the left.

And I want the progress bar to stay right where it's at, from the left, but moved up about 10 pixels so that it is flush with the top of the form.

Thanks!
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Jason C. LevineNo oneCommented:
I think it might be over-defining the CSS declaration and that's why it doesn't work as you expected.  Try adding a simpler declaration:

.gform_image_button {
    margin-left: 50px;
}
0
 
mikegeorge2Author Commented:
That wasn't it Jason1178. Thank you for trying. It didn't do anything though.
0
 
SSupremeCommented:
Create this rule for "continue":
#gform_next_button_3_47 {
    margin-left: 40px;
}

and remove this one:
.gform_wrapper .gfield_html.gfield_no_follows_desc {
    margin-top: 10px;
}
from: forms.....RC3.10 (line 339)
0
 
mikegeorge2Author Commented:
Thank you! That fixed the continue button, which is great...

http://azwm.com/arizona-mortgage-application/

But I still can't get the "progress bar" or "steps" to be flush against the top of the form. That hasn't moved. I need to specifically style the progress bar. It will be something like:

#gform ??? field_3_50

I am so confused!

Thank you again.

0
 
mikegeorge2Author Commented:
Thank you!
0
 
mikegeorge2Author Commented:
I  very much appreciate it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.