Field alignment on the Billing Information screen... need directions on how to fix

Running V1.5.1 and using the Classic Green default template

When checking out (AS A GUEST) the fields on the Billing Info screen are not aligned.

I have changed the WIDTH: in the CSS from 750px to 1024px to 100% but that did not correct field alignment.

Yet... on all my PC's the alignment is an issue but on my Smart TV it looks/aligns perfect.

Asking for guidance on what and where to adjust/change/modify the code so fields are aligned on the Billing Information screen. That seems to be the ONLY screen with an alignment issue. In fact, if you hit "Change Address" on Billing screen 2 of 3, the address info blank screen is in perfect alignment.

Wondering if it has anything to do with the BILLING ADDRESS "box" being inside of the GUEST CHECKOUT "box" ???

Thanks... Richard

http://rental.coloradospringseventcenter.com/

looks like you can either

add .fec-field {clear:both;}

or get rid of float:left; in label.inputLabel on line 119

in stylesheet.css

1st option seems best, 2nd option causes width of label to collapse

Thanks SignTorch... for both the very prompt reply and your solutions.

I went with getting rid of the float:left; because I was not sure where to place your suggested .fec-field {clear:both;} Your correct that the label width collapsed a bit.

That simple deletion really cleaned up my input screen making my site more user friendly. I have a lot of little changes still to make but it's a learning process.

Thanks again, Richard

you're welcome,

try adding these lines to the css file

.fec-field {clear:both;}
.fec-field label.inputLabel {width:120px;}

that will make all the text inputs line up vertically on the left side, which looks better

not at my PC to test it, but I think that will do it...

Again... thanks for your time.
I am a true newbe at CSS, fortunately I do know to make multiple backups of any file that I start playing with.
I inserted the code you suggested in multiple places in the appropriate CSS file but there was not any change in vertical alignment.
In the current CSS file your suggestion is located at line 191-193. Do I need to place it somewhere else or format it differently?

Thanks again, Richard

SignTorch:

you're welcome,

try adding these lines to the css file

.fec-field {clear:both;}
.fec-field label.inputLabel {width:120px;}

> 
> that will make all the text inputs line up vertically on the left side, which looks better
> 
> not at my PC to test it, but I think that will do it...

you did it right, it doesn't matter where it is in the file, except later rules take precedence, so sometimes order can have an effect

the problem is the label is not a block element, so width is being ignored, and if we add display:inline-block; to .fec-field label.inputLabel then it will use the width of 120px

.fec-field label.inputLabel {width:120px;display:inline-block;}

then add this line to right justify the red astericks

.fec-field .alert {float:right;}

Amazing.... looks GREAT. Thank you again SignTorch

Are you available for hire and interested in doing small modifications (mostly template wise) projects for me rom time to time. If so PM me.

Richard

SignTorch:

you did it right, it doesn't matter where it is in the file, except later rules take precedence, so sometimes order can have an effect

the problem is the label is not a block element, so width is being ignored, and if we add display:inline-block; to .fec-field label.inputLabel then it will use the width of 120px

.fec-field label.inputLabel {width:120px;display:inline-block;}

> 
> then add this line to right justify the red astericks
> 
> ```
.fec-field .alert {float:right;}

no, I'm not a developer, for those sorts of changes I just use the browser web developer tools to look at the CSS, and that lets you make temporary changes to see how each setting affects appearance, without messing anything up, then it shows you the CSS file name and line number to edit if you decide to keep the changes, it's really so simple and so powerful, it's worth taking a couple of hours to read up on how CSS selectors work and how to use a browser developer tool just enough to play around with CSS, then it's all downhill from there, and it's kind of fun to, once you get the hang of it you can find all kinds of ways to tweak or radically change the appearance of your web site with a few lines of CSS code.

I have played with that through FireFox, mostly clicking off lines of code or changing numbers to see effects it has on the display.... very easy and slick, now I just need to take time and read up on working with and how CSS works.

I need to add the "Company" name field to the "Billing Information" AKA: first check out screen. I am sure it can be easily done since I see that after filling in the "Billing Information" screen in step 1 and you click on "Change Address" on screen/step "2 of 3 Billing Information" that the "Company" name field is displayed ..... I need the "Company" name field to be on the first/initial screen too.

in default template

when you click Change-Address it loads either tpl_checkout_shipping_address_default.php or tpl_checkout_payment_address_default.php, depending on which page you're on

both of those call the same form template tpl_modules_checkout_new_address.php, to enter the address

which displays the Company-Name field if Configure/Customer Detais/Company is true

so both shipping and billing address forms are identical

apparently you are using Fast-Easy-Checkout and apparently that uses a different template altogether for the billing address, but it appears to use the normal template for the shipping address, which explains why the two address forms are not the same

FEC may have it's own address settings somewhere, or it may just not provide for a Company-Name field, I don't use FEC so no clue if that's it or what to do :smoke:

here's what the default billing change address looks like