• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Editing Website

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
shaunwingin
Asked:
shaunwingin
  • 5
  • 4
  • 2
  • +1
4 Solutions
 
Meir RivkinFull stack Software EngineerCommented:
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
 
ramyajanarthananCommented:
Unable to view the link..
0
 
shaunwinginAuthor Commented:
sedgwick - Where can i find that code??


 ramyajanarthanan - Try just tying http://a1telecomms.co.za/
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Chris StanyonCommented:
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
 
shaunwinginAuthor Commented:
ChrisStanyon - Thanks, either one of those two??
0
 
Chris StanyonCommented:
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
 
Meir RivkinFull stack Software EngineerCommented:
better use separate css, it will be easier to maintain without touching the actual html.
0
 
ramyajanarthananCommented:
Try this

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

Open in new window

0
 
shaunwinginAuthor Commented:
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
 
Chris StanyonCommented:
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
 
shaunwinginAuthor Commented:
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
 
Chris StanyonCommented:
clear cache / browser data is the same thing.

just checked in chrome and it looks good - the same as firefox :)
0
 
shaunwinginAuthor Commented:
Nevermind - it has worked.

Thank You!!!!!!!!!!!!!
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.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now