Solved

Editing Website

Posted on 2013-06-27
13
212 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
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.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
What is wrong with this PDO Delete Query? 2 17
IP 10.0.1.2 / 255.0.0.0 61 56
check mysql insert 12 28
Fix Form size HTML 16 15
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

830 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