Results 1 to 8 of 8
  1. #1
    Join Date
    Jul 2008
    Posts
    362
    Plugin Contributions
    0

    Default input fields log in, create account, contact us etc...

    Hi All,

    I have been trying to align the text and inout fields for the above pages so they are vertically and horizontally aligned evenly.

    If you have a look at https://www.truwater.com.au/index.ph...create_account you will see that the inout boxes are on the right and the text is not aligned.

    I have read a few threads but i seem to have everything left justified but still not working as followed by what others have done.

    Any assistance will be appreciated.

    Thanks

  2. #2
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    A Template Monster template and 13 stylesheets!

    The HTML Validator at www.w3.org gives that page 29 errors and 23 warnings...

    The CSS Validator surprisingly shows only 2 errors but 310 warnings...

    First step: fix the HTML errors, then post back. Despite the use of a TM template, I'm intrigued and willing to help. But I'd prefer to work with a clean sheet, so to speak. (You can ignore the warnings reported, but the errors should be fixed if possible.)

    Rob
    Last edited by rstevenson; 7 Jan 2009 at 02:31 AM.

  3. #3
    Join Date
    Jul 2008
    Posts
    362
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    Quote Originally Posted by rstevenson View Post
    A Template Monster template and 13 stylesheets!

    The HTML Validator at www.w3.org gives that page 29 errors and 23 warnings...

    The CSS Validator surprisingly shows only 2 errors but 310 warnings...

    First step: fix the HTML errors, then post back. Despite the use of a TM template, I'm intrigued and willing to help. But I'd prefer to work with a clean sheet, so to speak. (You can ignore the warnings reported, but the errors should be fixed if possible.)

    Rob
    Well the 2 css errors are the following:

    URI : http://www.truwater.com.au/includes/...ories_menu.css
    2 body Property behavior doesn't exist : url(includes/csshover2.htc)
    URI : http://www.truwater.com.au/includes/...eader_menu.css
    2 body Property behavior doesn't exist : url(includes/csshover.htc)

    I have read in previous threads that this can be ignored?

    Im pretty new to html etc and im looking at the html errors and i just dont know where to begin.....

    Any advice would be great!

  4. #4
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    The first several HTML errors say "character "&" is the first character of a delimiter but occurred as data.". You can ignore those for now.

    So starting after those ones, we have...
    A few more ampersand-related errors in the livehelp code section. You can ignore those too. I have the same problem with my SSL cert code. Seems other people are not very concerned about the code they provide for us to use.

    Some font tag errors and a <br> that should be <br />to make it compatible with XHTML, which is what Zen Cart is written in.

    Some more ampersand problems.

    A closing tag for a link that seems to be orphaned. This may be caused by the cascade of erros above it, or it may really be orphaned. Worth checking this one.

    A whole lot more ampersand problems.

    Then a closing div tag and a closing td tag which may also be orphaned.

    None of the above is fatal, but any part of it may cause difficult-to-diagnose problems. Seeing as how this is a TM template and it has been customized, it's hard to know where to start to fix it.

    Let's ignore all that and work on the alignment problem. Next post...

  5. #5
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    Okay, let's see what's there now.

    You say you want to align them vertically and horizontally?

    Vertically: this will be a problem if you mean you want the text of the label to be on the same baseline as the text entered into the box, since you have different text sizes applied to these elements. But maybe getting the baseline of the label to align with the bottom of the box will be sufficient. If so, adjust bottom padding on the .inputlabel element to force the labels into the correct vertical position.

    Horizontally: since you don't like what's there, I assume you want the labels to be right-aligned not too far from the left edge of the boxes? I would simply apply a text-align: right: to the .inputlabel element in your stylesheet, and maybe adjust the right padding to open up a little space.

    One problem with both of the above suggestions is that other parts of the site may be affected by these changes, in which case you'd need to use a page-specific stylesheet containing just those fixes. (Instructions in the readme file in the css folder.)

    The other problem is that there may be conflicting styles in some of those 13 stylesheets you're using. Why are there so many? Can't you consolidate and clean out redundancies for many of them?

    Rob

  6. #6
    Join Date
    Jul 2008
    Posts
    362
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    In regards to aligning the fields how do i remove the gap between the text and the input fields so that the actual input labels are pulled to the left side instead of the right isntead of moving the text.

  7. #7
    Join Date
    Jul 2008
    Posts
    362
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    OK i seem to have fixed the problem i noticed i had a stylesheet for the rewards module which i uninstalled so i removed the stylesheet and now everything is back to normal.

    In terms of the stylsheets if i knew how to clean them up and merge them i would but im still learning... If you have something i can read then ill be greatful to learn how to do this.

  8. #8
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: input fields log in, create account, contact us etc...

    You don't really need to understand CSS in any depth to clean up the stylesheets. Just look for duplicates in the many sheets and combine those duplicate styles into one definition in one sheet. A tedious process, true, but doable with just a text editor and lots of patience.

    As for learning CSS, start at the w3.org site and Google from there. There's lots of resources on-line.

    Rob

 

 

Similar Threads

  1. Create account boxes lenght (input fields)
    By antoniobb in forum General Questions
    Replies: 1
    Last Post: 24 Sep 2012, 03:01 PM
  2. v150 Change display-width of account input fields
    By mi16chap in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 8 May 2012, 12:41 PM
  3. Contact us page - input fields how to align?
    By ekele in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 2 Jan 2011, 01:25 PM
  4. Create Account - modify existing fields or add extra fields?
    By sopretty in forum General Questions
    Replies: 4
    Last Post: 30 Jul 2010, 08:26 PM
  5. Custom Contact Form - New Input Fields
    By Nima in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 3 Jun 2010, 11:45 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR