Solved

help with form input field formatting

Posted on 2014-01-30
16
456 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

690 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