Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
I'm having some issues with the alignment of my text in the checkout area. (See attached image for reference.) The text in the checkout area is all off. But the issue is that they're not off equally. For example: Country is way too high, but State, zip: is too low, and Website is fine. So I can change the css, but it doesn't help anything. (I highlighted the css that the text is pulling.) Originally, Country was aligned, and everything else was down too much (but not equally). So I added some padding to the bottom, but that just revealed that the text was aligned correctly. Any thoughts?? CGrouse attached the following image(s):  checkout-issue.jpg (194kb) downloaded 66 time(s).You cannot view/download attachments. Try to login or register. |
Thanks,
Christopher |
|
|
|
|
|
Rank: Member
Joined: 8/17/2006(UTC)
Posts: 681
|
Cristopher,
I had the same problem. AFAIK it has nothing to do with your alignments but with the validators that are set to block. Change the "errormessage" class to be inline: "display: inline;" and your alignment will be fixed.
Corneliu. |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Try vertical-align: top; on those table cells and just give your form labels enough line-height so they look right next to the form fields.
Ugh, tables. |
|
|
|
|
|
|
Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
The table cells are already set to vertical align top.
And unfortunately the "display: inline;" didn't do anything.
Any other thoughts? |
Thanks,
Christopher |
|
|
|
|
|
Rank: Member
Joined: 5/14/2005(UTC)
Posts: 398
|
the url would help us to help you, but as far as the validators go, make sure they are Display="Dynamic" (this is not css) then start to figure out the css and table issues |
|
|
|
|
|
|
Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
192.168.129.223
@BetterBuilt: Unfortunately, that didn't change anything either. |
Thanks,
Christopher |
|
|
|
|
|
Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
.errormessage {color: #FFF; background: #c00; display: block;
line-height: .3em; padding: 0 5px; font-size: .8em; }
Was what was causing to misalign. I've removed it, and it's working fine.
Thanks everyone!! |
Thanks,
Christopher |
|
|
|
|
|
Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
I removed the entire "Form Elements" section, and it's working fine, though compressed.
I'm going to go line by line and see if I can figure out what's causing the issue. |
Thanks,
Christopher |
|
|
|
|
|
Rank: Member
Joined: 6/4/2004(UTC)
Posts: 291
|
I changed the css and now "State,Zip" is too low.
/* Form Elements */
td.formlabel { width: 120px; white-space: nowrap; padding-bottom: 5px; <-------- (Changed from 30)
padding-right: 5px; }
td.formfield { text-align: left; white-space: nowrap; }
.forminput { padding: 4px 0 0 6px; height: 20px; width: 190px; color: #444;
vertical-align: middle; border: 1px solid #ccc; }
.formtextarea { padding: 4px 0 0 6px; border: 1px solid #ccc; width: 90%; }
.short { width: 25%; }
.medium { width: 50%; }
label { color: #666; font-size: 90%; }
label.required { font-weight: bold; }
select { border: 1px solid #ccc; color: #444; vertical-align: middle; }
.errormessage {color: #FFF; background: #c00; display: block; line-height: .3em; <-------------(Changed from 2)
padding: 0 5px; font-size: .8em; }
.forgot { background: #f5f5f5; padding: 5px; display: block; margin-top: 10px;
font-size: .7em; }
.aligntop { vertical-align: top; }
.buttonrow { text-align: right; padding: 5px 20px; margin: 0 0 10px 0; }
.Instructions { font-size: 80%; color: #333; }: 0 0 10px 0; } |
Thanks,
Christopher |
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.