Solved

Editing Website

Posted on 2013-06-27
13
211 Views
Last Modified: 2013-07-01
Hi

I have a problem on my website & i was hoping you would help me remove it because i do not know how. My website is (www.a1telecomms.za). There is an area where a client can log into their account using a username & password combination - however i want to separate the white tick square block from the submit button as to they are too close to each other  - therefore touching, how do i separate this??

TX
0
Comment
Question by:shaunwingin
  • 5
  • 4
  • 2
  • +1
13 Comments
 
LVL 42

Assisted Solution

by:sedgwick
sedgwick earned 125 total points
ID: 39280621
look for
<input name="Submit" class="button" type="submit" value="Login" />

and add this attribute:
style="margin-left: 10px;"

so u ended up:
<input name="Submit" class="button" type="submit" value="Login" style="margin-left: 10px;"/>

Open in new window

0
 
LVL 4

Expert Comment

by:ramyajanarthanan
ID: 39280858
Unable to view the link..
0
 

Author Comment

by:shaunwingin
ID: 39280914
sedgwick - Where can i find that code??


 ramyajanarthanan - Try just tying http://a1telecomms.co.za/
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39280918
I would float the button right so it lines up with the Username and Password box. You would also need to remove the right margin for it to work properly.

You can do this within your CSS stylesheet (preferred):

#k2ModuleBox110 input.button { float:right; margin-right:0px; }

Open in new window

or inline:

<input type="submit" value="Login" class="button" name="Submit" style="float:right;margin-right:0px">

Open in new window

@ramyajanarthanan - the address is http://www.a1telecomms.co.za/
0
 

Author Comment

by:shaunwingin
ID: 39281251
ChrisStanyon - Thanks, either one of those two??
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39281273
Both will achieve the same result, but keeping your CSS in an external stylesheet is preferred. As soon as you start littering your HTML files will CSS, it becomes a maintenance nightmare!
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39281311
better use separate css, it will be easier to maintain without touching the actual html.
0
 
LVL 4

Assisted Solution

by:ramyajanarthanan
ramyajanarthanan earned 125 total points
ID: 39283724
Try this

<input class="button" type="submit" style="margin: 0 0 0 21px;" name="Submit" value="Login">

Open in new window

0
 

Author Comment

by:shaunwingin
ID: 39289802
Hi Guys,

This is my CSS Code - unfortunately i dont know which code to replace with the one you gave me. Please see code below:  TX,

/* LOGIN -----------------------------------------*/

#login-form p {
  margin-top: 5px;
}

.ct_loginHelpers {
  display: inline-block;
  margin-left: 0;
  padding-left: 21px;
  list-style: outside;
  list-style-image: url(../images/ul_arrow.png);
}

.ct_loginHelpers li {
  width: 100%;
}

.ct_loginHelpers li a {
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
}

#form-login-remember {
  display: block;
}

#form-login-remember label,
#form-login-remember input {
  float: left;
}

#form-login-remember label {
  line-height: 19px;
}

#form-login-remember input {
  clear: right;
}

#login-form .button {
  float: left;
  clear: left;
  margin-top: 10px;
  display: inline-block;
}

.login-fields {
  margin-bottom: 10px;
}

.login .button {
  margin-top: 5px !important;
}

.logout-button .button {
  margin: 0 !important;
  float: none !important;
}

.login-greeting {
  height: 25px;
  font-size: 14px;
  padding-top: 5px;
  margin-right:15px;
}

/* COMPACT VERSION FOR HEADER */

#login-form.compact,
#login-form.compact fieldset
{
  width: auto;
}

#login-form.compact p {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: left;
  display: inline-block;
}

#login-form.compact #form-login-username label,
#login-form.compact #form-login-password label,
#login-form.compact #form-login-remember,
#login-form.compact .ct_loginHelpers
{
  display: none;
}

#login-form.compact input[type="text"],
#login-form.compact input[type="password"]
{
  width: 120px;
  height: 25px;
  margin-right:5px;
  padding-left: 7px;
}

#login-form.compact .button,
#ct_headerLogin input.button
{
  margin: 0;
  float: left;
  display: inline-block;
  margin:0 !important;
  text-indent: -9999px;
  overflow: hidden;
  width: 33px;
  padding: 0;
  padding-bottom: 1px;
  background-position: right;
  background-repeat: no-repeat;
}

#ct_headerLogin .login-greeting,
#ct_headerLogin .logout-button
{
  float:left;
}

#login-form.compact .button
{
  float: none;
  clear: none;
  margin-top: 0;
}

/*-----------------*/
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39289816
Don't replace anything - just add it to the end of your CSS file:

#form-login input.button { float:right; margin-right:0px; }

Open in new window

0
 

Author Comment

by:shaunwingin
ID: 39289862
Great!

It has worked when i view via Mozilla Firefox Webrower & Internet Explorer BUT not Google Chrome - which happens to be my main browser that i use to operate. What could be the problem? I have attempted to clear cache but i can't find it - the only setting that i saw close to "clear cache" is clear browsing data - is that another wording for it??
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39289867
clear cache / browser data is the same thing.

just checked in chrome and it looks good - the same as firefox :)
0
 

Author Comment

by:shaunwingin
ID: 39289875
Nevermind - it has worked.

Thank You!!!!!!!!!!!!!
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 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