Attribute Alignment in Product Listing

[Tig]

On the following item:

http://nboriginals.com/index.php?mai...&products_id=1

I have two textfield attributes. I know that I have to make them the same size (that I can do) so they will match, but I'm curious how to get both of them to align to the left, so they appear one right after the other.

[Tig]

Fixed the layout with the button but I'm still having a problem: How do I make it so that instead of:

( text box ) Attribute name
(larger text box) Attribute name

I get this:

Attribute Name
(text box)
Attribute Name
(larger text box)

Basically I want to left align everything, switch the postions of the attribute 'box' / name and set the 'name' on top of the 'box'

I hope that makes sense.

[gjh42]

Add to your stylesheet:

.wrapperAttribsOptions {position: relative;} 
h4.optionName {
    float: left; 
    margin-bottom: 1em;
    }
.wrapperAttribsOptions select, .wrapperAttribsOptions input {
    position: absolute; 
    top: 2.3em;
    left: 0.3em;
    }

[Tig]

Thank you! That gets them where I need them to be but it's doing a funky stair-step deal.

[gjh42]

Are you looking at it in IE? It looks perfect in Firefox.
I'll have to check IE.

Well that's really annoying! Position: absolute is supposed to make the element independent of other elements, but IE is hanging it up on something anyway.

[Tig]

Yep. IE 6.

Personally I prefer Firefox, but more people use IE than it, so I have to make sure that the design works across all browers.

Thank you for your help, by the way. I've been thread-surfing all day and my head is starting to throb over this.

[gjh42]

Increasing the margin-bottom and the top: 2.3em a bit might allow the elements to fit better.

[Tig]

Hrm.

No matter how wide I make the top and bottom margins it doesn't seem to snap the inputs to the left.

[gjh42]

Weird... Perhaps if you removed that margin-bottom and put a height on .wrapperAttribsOptions, that would clear the way.

[Tig]

Ah ha!

.wrapperAttribsOptions {position: relative; height: 5px;}

That did the trick! Thank you very much!

I had to keep the margin-bottom: 1em; in, because it crushed the elements together in FireFox.

Thank you again! You've saved me a goodly amount of mony in asprin!