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.php?main_page=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

A Template Monster template and 13 stylesheets! :yuck:

The HTML Validator at https://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

rstevenson:

A Template Monster template and 13 stylesheets! :yuck:

The HTML Validator at https://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/templates/theme111/css/stylesheet_categories_menu.css
2 body Property behavior doesn't exist : url(includes/csshover2.htc)
URI : http://www.truwater.com.au/includes/templates/theme111/css/stylesheet_header_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!

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. :frusty:

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. :frusty::frusty:

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...

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

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.

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.

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