Solved

help with form input field formatting

Posted on 2014-01-30
16
447 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
16 Comments
 
LVL 35

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 35

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 35

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
 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 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