Changing layout of forms, specifically the contact_us page form.

I do not like the way the forms are laid out on the site. I have tried and tried to mess with both the stylesheet as well as the tpl_contact_us_default.php file.

Will someone please tell me how to change the layout of the forms? The layout of the forms all look like: (click link) http://photo-calendars.com/zencart/index.php?main_page=login

I am "recreating" an exisiting OSCommerce site into a ZenCart site. The customer does not like the way the forms are not aligned nicely. It looks so much nicer when it's lined up more like this: (click link) https://www.photo-calendars.com/shop/create_account.php

Please help! Thanks.

Looks like you've figured this out? Your Zen Cart form fields are all aligned now, even more so than the osC fields. Would you like to share the method that worked for you? (One stylesheet rule can do it.)

That's some weird stuff you've done with the template, wrapping it in layer after layer of tables to get some extra header content. I'd think it would have been considerably easier to have just added a div or two in tpl_header.php, and use the existing structure to do the styling.

The```
label.inputLabel {
float:left;
width:9em;
}

I'm sure you're right that there is an easier way to do it, but I am trying to recreate their shop to look exactly like it does now and I am not as familiar with <div>. If you want to show me one of my pages made as <div>'s instead of tables so I can use it as a guide then I'll do that. Otherwise I have to do it this way because this has to be done VERY quickly.

Anyway about the code, when I look at the site using explorer 8, the page layout looks like the field titles are centered in a column and the fields are centered in another column. (not sure it's columns, but that's the way it looks.)

When I view it using firefox, everything looks like I want it.

Suggestions? Not sure what code IE8 doesn't like and therefore not formatting the page correctly.

Thanks, Pam

Specifying the browser which was displaying incorrectly would have been a good start. Unfortunately I can't use IE8 (or 7) on my computer, so I can't see or test the problem. You might try adding text-align: left; as this is not explicit in the lowest-level styling yet:```
label.inputLabel {
float:left;
width:9em;
text-align: left;
}

Thank you, that helped the label column, but not the input fields. Can you help me figure it out? I would have mentioned the different browsers, but until I was told it was looking right, I didn't know. That made me decide to look at other browsers to see if was looking right there.

I'm sure it's simple, but since I am a tables person, I'm just trying to figure out how to align things and do the classes in CSS instead of in the file. The code looks like:

<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME; ?></label>

<label class="inputLabel" for="email-address"><?php echo ENTRY_EMAIL; ?></label>

I've tried putting <align="left"> in several different places, but the layout doesn't change. Please help if you can.

Thanks.

I suggest you look at https://www.w3schools.com for good information on using CSS. Also, using Firefox and its Web Developer and Firebug extensions can help you with testing CSS styling.

WOW! thank you. That did exactly what I wanted! I will look at w3schools and try to learn from it. I appreciate the help!! You're a god-send! Thanks.

I will also try using Firefox more. Most of my customers like to use Explorer, so when I design it to look right on firefox, will it do okay on explorer?

Firefox adheres more to standards than IE, so if something looks right in Firefox, it is probably coded correctly. If it then doesn't work in IE, it is probably due to a known IE bug which has a known fix.
If something works in IE but not in Firefox, it may mean that there is a coding error which is being covered by IE in attempting to be "foolproof" while FF does what you are telling it to do.

I am now using Firefox and have downloaded the web developers addon. I am viewing the CSS information and still can't figure one particular thing out. I'm sure it's simple, but I'm still having a few problems. In admin, I removed the weight and stock from the product page. When I did that, the first option moved up, but the others did not.

Also, a second problem is that the checkmark and radio buttons do not align with the rest of the options and none of them line up with the rest of the page.

I am attaching an image so you can see what I mean. I really appreciate your help!!

One clarification....

I want the options to line up with the rest of the page or at least with the drop-down options.

I was able to line up the options, but only by removing the padding on the dropdown options, not by figuring out how to move checkboxes and radio buttons over, which is what I really need it to look like.

#productAttributes {margin-left: 1.0em;}/*match left margin w/ rest of page*/

#productAttributes .clearBoth {clear: left;}/*stop from dropping below #cartAdd*/

h4.optionName {width: 11em; clear: left;} /*align input fields*/

label.attribsSelect {margin: 0; padding: 0;}/*strip extra margin/padding*/

.wrapperAttribsOptions input {position: relative; bottom: -0.4em;}/*move checkboxes/radiobuttons to align w/ text*/

Try adding these one at a time to learn exactly what each one does!

Thank you againa for all your help. The modifications to the site are coming along and I have used W3schools aLOT while trying to learn stylesheets instead of formatting the individual pages via HTML coding.

Once again, Thanks!