Solved

help with form input field formatting

Posted on 2014-01-30
16
438 Views
Last Modified: 2014-01-30
Hi friends. I need some CSS help.

The form on this page is giving me some trouble:

1) The form itself seems to take up a lot of space on the page -- there is some kind of margin or padding around the entire form, which pushes up the "Newsletter Sign Up" text. "Newsletter Sign Up" needs to go directly above the input field.

2) The SEND button needs to go under the input field, rather than to the right of it. I don't think it is valid HTML to just insert a <br /> in there.

Here is the form: http://test2.ebwebwork.com/pages/Home.cfm

Here is the CSS and HTML:

.inputBox      {
border:none;
padding:7px;
margin:0;
clear:both;
background-color:#fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
text-transform:uppercase;
font:normal 1.1em 'Myriad Pro', 'Arimo', arial, verdana, sans-serif;
color: #f39c22;
}

<h2>Newsletter Sign Up</h2>

<form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin:0; padding:0;">

<input type="text" name="ea" size="35" value="Your Email" onFocus="this.value=''" class="inputBox" />

<input type="hidden" name="llr" value="l8ix7fdab" style="margin:0; padding:0;" />
<input type="hidden" name="m" value="1102930748267" style="margin:0; padding:0;" />
<input type="hidden" name="p" value="oi" style="margin:0; padding:0;" />
<input type="image" src="/img/SendButton.png" name="go" style="border:none;padding:0;margin:0;" />
</form>

Any ideas how I can fix this? Thank you for your help.

Eric
0
Comment
Question by:Eric Bourland
  • 8
  • 5
  • 3
16 Comments
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 188 total points
ID: 39822072
1. You have
.frontrow3-right	{
		background: #292929; /* Old browsers */
		color:#f8f8f8;
		border:none;
		float:right;
		width:40%;
		height:150px;
		line-height:150px;
}

Open in new window

Remove/comment out the line-height.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822073
Is there a need for this
<div id="ebwebwork"><a href="http://figdesign.ca/">Fig Design</a> / <a href="http://ebwebwork.com/">ebwebwork</a></div>

...as it breaks the layout since it is not contained
Remove it and you will see the page works fine apart from other elements that break the reponsiveness
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 188 total points
ID: 39822090
2. Put a padding-right of at least 20px on the .input-box class (style.css, line 400)

HTH,
Dan
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822095
Dan -- Got it. Of course. I took out the line-height and that worked.

Do you any idea how I can bump the SEND button down underneath the input field?

Cathal -- yes. I noticed that. I do need that in there -- I am trying to figure out how I can put that in without breaking the layout. This is a really good observation. Any ideas?

Thank you both very much. This really helps.

Eric
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822108
Add to the div
<div id="ebwebwork" class="col_12 column">

Remove the width in
#ebwebwork {}

You might want to specify a style for the background in #ebwebwork as well
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822162
Cathal -- great ideas. It looks better now, though I can't quite get the #ebwebwork text to align perfectly with right edge of content area. I wonder what is going on with that.

Also I am still struggling with bumping the Send button down under the input field. Any ideas?

I really appreciate your assistance.

Eric
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 188 total points
ID: 39822179
As I said above (#39822090) modify the .input-box class and add a padding-right of at least 20px.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822201
Dan -- got it. Here is .input-box now:

.inputBox      {
border:none;
padding:7px;
margin:0;
clear:both;
background-color:#fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
text-transform:uppercase;
font:normal 1.1em 'Myriad Pro', 'Arimo', arial, verdana, sans-serif;
color: #f39c22;
padding-right:20px;
}

Looks like that just made the input field wider?

Eric
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822206
Wait. I get it. It is working in Chrome. I need more padding-right. hang on. =)
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822214
Looking a lot better: http://test2.ebwebwork.com/pages/Home.cfm

I need to align the Send button perfectly with the right side of the input field. I am working on that next. I will try a few things and report back here.

Thank you both so much.

Eric
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822232
You didn't remove
width: 960px;
from
#ebwebwork {}
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822236
To your FORM add

margin: 0 10px 0 0;
text-align: right;
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822262
Cathal,

Apologies -- I am not seeing this anywhere in style,css:

You didn't remove
width: 960px;
from
#ebwebwork {}

In Dreamweaver I searched the whole site for width:960px

I don't see it. Where do you see it?

Apologies for my denseness.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 312 total points
ID: 39822296
adminStyle.css line 258
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39822307
Of course. Ugh.

I took out references to adminstyle.css and tiny.css.

That really changes and clarifies the page.

Thank you so much. I think I get it now. I will come back and close this question this evening.

Eric
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39822385
This page really shaped up: http://test2.ebwebwork.com/pages/Home.cfm

I learned a lot just now from Dan and Cathal.

Thank you both very much. Take care.

Eric
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now