Big gap between attributes being caused by add to cart button

[dinki]

Hey guys. I'm looking for a little help on modifying my product_info file so that all my attribute options are listed together. Right now, I have the color option being displayed, then under it is the size option. The size option has a large 'white space' between it and the color option. This space is equal to the size of the add to cart button which is located on the right side of the screen.

Can someone tell me what file needs to be edited to get the attributes to be grouped together?

Here's an example to make things a bit clearer:

http://www.decaldepot.net/zencart/in...roducts_id=214

Thanks...

[barco57]

#productAttributes {
float: left;
width: 70%;
}

thank kobra for it.

[kobra]

Your style sheet is far different than the default....but try finding or adding this to it and see how it looks

#productAttributes {
         float: left;
         width: 70%;
         }

edit:
Hello barco...you were just a bit faster

[barco57]

I'm a cut & paste god

[dinki]

Thanks for the speedy reply guys. I added the css code to my stylesheet.css in my template directory. I'm not so sure I've made any improvements. The space between the attributes seems acceptable in Firefox and IE under XP, but on Firefox on my Solaris workstation I'm still seeing the large gap between attributes. Maybe it's just one of those css nuiances.

[Sketchy]

You could remove the clearBoth tag inbetween the two attributes, although I'm not certain of the exact PHP file to edit for that. That'll let the air out between the two, I'm guessing that's what you want.

Also, your template stylesheets are in need of validation for simple syntax errors. Not your fault though, those errors came with the template.

[kobra]

Solaris workstation

Is that not a 'nix OS? I looked at it in FF on a linux box and it appears to be better than before.....

[dinki]

Your style sheet is far different than the default....but try finding or adding this to it and see how it looks

#productAttributes {
         float: left;
         width: 70%;
         }

edit:
Hello barco...you were just a bit faster

Hrmff.. I thought this was working out, but it seems like things are screwy if any other boxes show up after the attributes. Take a look at this:

http://www.decaldepot.net/zencart/in...products_id=79

Any idea on how I can fix this? Do I need to somehow clear the css or something? I wish I knew more about css to fix this myself and appreciate the help you guys have been giving me!

[dinki]

I've been toying with settings for this and am not having much success. Can someone tell me how I might be able to move the 'add to cart' button below all of the options? While it does look good on the right part of the screen, if it's easier and doesn't break the rest of the page, I see no reason not to move it to the left-bottom.

I know you guys don't get paid for the assistance that you give to a newbie like me, but just know that all help provided is GREATLY appreciated!

[Sketchy]

How about just positioning to the left side of the attributes instead?

If interested, make a backup of your stylesheet.css and find/modify;

/*Shopping Cart Display*/
#cartAdd { float: left; text-align: center; padding: 1em; font-weight: bold; margin-right: 2em; }

Change/add the values in red.

Looks good in Firefox, but better double check in IE though.