Layout and Display of Attributes

Ok, before I throw my computer out the window :censored:, can I borrow an extra pair of eyes please?

Just for example:
http://www.oldtradingpost.com/old-west-store/index.php?main_page=product_info&cPath=1_95&products_id=3949

While the attributes are left justified as I want in FireFox, they are centered in IE. I have touched on all the classes and id's surrounding the attributes section and nothing I do changes the look in IE.

Now what's really weird, is that I took the SAME template files I used to create the first site (IHM - will link in a moment) and just altered colors for this site (OTP - same client, owns several sites). And yet, in this site, the options are showing before the option name, where as here (link to follow) it's the opposite (and the way we want it).

http://www.theironhorseman.com/motorcycle-store/index.php?main_page=product_info&cPath=14_202_203_17&products_id=317

So, to recap:

OldTradingPost Zencart

1. correct justification in Firefox, not in IE
2. option name should show before option, not as shown
3. spacing between attributes looks good.
4. can't change "add to cart" text or the button look itself, no matter what I change in the CSS

Ironhorseman Zencart

1. correct justification in both browsers
2. option name shows before options - correct
3. spacing between attributes is slightly off
4. "add to cart" button looks just fine

Thanks for any insight you may have. :blush:

Would still like to have some help with this as I spent hours yesterday trying to figure out why the option layout is different on both sites and yet the template and CSS concerning that portion of the sites are the exact same.

I have #4 for OTP ok for now ...

look for following code in your css.

.back {stylesheet.css (line 735)
float:right;
font-family:arial;
font-size:11px;
text-decoration:none;
}

change float right , to float left . this should send the text to left hand side of your select .
once changed test other form elements on your site and see if this will effect how other stuff going to be aligned in your site.

Well, messing with that did change other elements of my site.
So, I created another class called options ... and changed that reference in the modules_attribues.php file .... and it did move it.

http://www.oldtradingpost.com/old-west-store/index.php?main_page=product_info&cPath=1_95&products_id=3949

It would be great if I could then:

1. right-align the option names
2. left align the drop down boxes

Might look cleaner.

Well, after some fiddling, I still can't the drop down boxes to the right of the option names, even when I got their alignment right.

<div class="wrapperAttribsOptions" style="float:left;">
<h4 class="optionName"><?php echo $options_name[$i]; ?></h4>
<div class="options"><?php echo "\n" . $options_menu[$i]; ?></div>
</div>

.options {
    float: left;
	text-align: left;
	}
	
.optionName {
   text-align: right;
   float: right;
   }

.optionName {
text-align: right;
float: right;
}

change float to left

Ok, that worked. :bigups:

I guess I can't do it in CSS, but will have to somehow make a table out of it ... so I can have the the drop downs stack neatly ...

What I have:
http://www.oldtradingpost.com/old-west-store/index.php?main_page=product_info&cPath=1_60&products_id=688

What I would like (x-cart):
https://www.oldtradingpost.com/western_store/catalog/High-Rider-Western-Leather-Gun-Belt-With-Single-Side-Holster-p-745.html

what happens if you change ..

i guess this way , do what you want with div ..

i seen some very good examples of using CSS to make your form elements looks great with out using any tables .. just pure CSS and divs.

Not 100% what I wanted, but definitely close enough and looks fairly clean.

http://www.oldtradingpost.com/old-west-store/index.php?main_page=product_info&cPath=34_307_308&products_id=3095

Thanks SO much for your help. :clap: Definitely appreciated! :blush: