Flexible Attributes addon support

[gjh42]

It's behaving just as it ought to, given your styling. If you want 17 to start a new line, you need to add the clear: left; to it:

#wAttrib-17 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}

[gjh42]

A note for those interested: There is a changed file for v1.3.9 that relates to Flexible Attributes, as described in another thread. I copy the info here.

The only change for v1.3.9 is two lines in /includes/modules/attributes.php (around line 400) where
ereg_replace('txt_',
is replaced by
preg_replace('/txt_/',
for PHP5.3 compatibility.

If your server is still running PHP5.2.x, you can use the existing mod as is; for future-proofing, you can make those two edits to the mod version of the file. I will update the mod with the new file, but can't say how long it will be until it is available in Free Addons.

[Bonkycat]

No luck. Either way they get squirrelly. I can only guess it has something to do with some other conflicting css somewhere.

The best case for now is this

[gjh42]

There was another rule that needed to be changed in exactly the same way, as I mentioned in post 30. Modifying these rules as shown gives a neat-looking result.

#wAttrib-15 {float: left; clear: left; margin: 0 2.0em 2.0em 0;}
#wAttrib-16 {float: left; margin: 0 2.0em 0em 0;}
#wAttrib-17 {float: left; clear: left; margin: 0 2.0em 2.0em 0;} 
#wAttrib-18 {float: left; margin: 0 0 2.0em 0;}

If you want something different, you can alter to taste.

[Bonkycat]

Thanks for continuing to offer your expertise. I should have been more clear in my last post.

I added both changes exactly as you suggested, and just to make sure I didn't factor into the issue, I changed it again using the block of css you provided with copy and paste.

Here is the result

Not only do some squish, but after the first three, they jump out of order. This is why I assumed there was something else conflicting.

[gjh42]

I'm not sure what you mean by "squishing". They all look similarly spaced; if you want the line or element spacing a bit larger, that can be done in the stylesheet. They are also in numerical order of id. If you want something else, you can set the sort order in Option Name Manager.

When I posted, you did not have the changes to #wAttrib-15 in effect.

I am seeing it now in IE8 (my computer is not letting Firefox open right now), but it looked fine in Firefox when I tested it.

[Bonkycat]

You are right, when you posted I had already put it back. The sort order in the option name is already applied. Since it looks good to you I am confused. Here is what I am seeing in the attached image

[Dave Mc]

You are right, when you posted I had already put it back. The sort order in the option name is already applied. Since it looks good to you I am confused. Here is what I am seeing in the attached image

I have just installed the Flexible Attributes mod and think it is great - thankyou. My website is not quite finished but am wandering if somebody that knows CSS can help me out. The page I am having problems with is here:

http://www.umbrellas4life.com/index....products_id=89

And my stylesheet looks like this:

/**
* Additional CSS Stylesheet
*
* @copyright Copyright 2009 Glenn Herbert
* @copyright Portions Copyright 2003-2006 Zen Cart Development Team
* @license http://www.gnu.org/licenses/ GNU Public License V3.0
* @version $Id: stylesheet_flexible_attributes.css $
* for Flexible Attributes by Glenn Herbert (gjh42) 20091228
*/
/*example stylesheet for a set of product attributes
These are samples of the kinds of styling you may want to apply to various kinds of elements.
Adjust as required. Comment out any that are not useful to you.
For attributes of a single product, you can save this file as p_##.css where ## is the product id.
*/
/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-1 {float: left; margin-left: 1.3em; margin-right: 3.0em;}
#wAttrib-1 h4 {display: none;}
#wAttrib-15 {float: left; margin-right: 3.0em;}/*this will sit beside #wAttrib-1*/
#wAttrib-15 h4 {display: none;}
#wAttrib-18 {float: left; margin-right: 3.0em;}/*this will sit beside #wAttrib-15*/
#wAttrib-18 h4 {display: none;}
#wAttrib-19 {float: left;}/*this will sit beside #wAttrib-18*/
#wAttrib-19 h4 {display: none;}
#wAttrib-20 {clear: left; float: left; margin-left: 1.3em; margin-right: 3.0em;}/*this will sit on a new line*/
#wAttrib-20 h4 {display: none;}
#wAttrib-21 {float: left; margin-right: 3.0em;}/*this will sit beside #wAttrib-20*/
#wAttrib-21 h4 {display: none;}
#wAttrib-22 {float: left; margin-right: 3.0em;}/*this will sit beside #wAttrib-21*/
#wAttrib-22 h4 {display: none;}
#wAttrib-23 {float: left;}/*this will sit beside #wAttrib-22*/
#wAttrib-23 h4 {display: none;}
#wAttrib-3 {clear: left; float: left; margin-left: 0.95em; margin-top: 3.0em;}/*this will sit on a new line*/
#wAttrib-13 {clear: left; float: left; margin-left: 0.85em;}/*this will sit on a new line*/
#wAttrib-14 {clear: left; float: left; margin-left: 0.85em; margin-right: 5.0em;}/*this will sit on a new line*/
#wAttrib-17 {float: right; margin-right: 1.1em;}/*this will sit beside #wAttrib-14*/
#wAttrib-56 h3 {font-size: 1.0em; font-weight: normal;}/*make comments above attribute like standard text*/
#wAttrib-57 .attribsOptions {display: none;}/*for a read-only attribute to hide all but comments*/
#wAttrib-24 h4 {display: none;}
#wAttrib-25 h4 {display: none;}
#wAttrib-26 h4 {display: none;}
#wAttrib-27 h4 {display: none;}
#wAttrib-28 h4 {display: none;}
#wAttrib-29 h4 {display: none;}
#wAttrib-30 h4 {display: none;}
#wAttrib-31 h4 {display: none;}

#wAttrib-24 {clear: left; float: left; margin-left: 1.3em; margin-right: 9.2em;}
#wAttrib-25 {float: left; margin-right: 9.2em;}
#wAttrib-26 {float: left; margin-right: 9.2em;}
#wAttrib-27 {float: left;}
#wAttrib-28 {clear: left; float: left; margin-left: 1.3em; margin-right: 9.2em;}
#wAttrib-29 {float: left; margin-right: 9.2em;}
#wAttrib-30 {float: left; margin-right: 9.2em;}
#wAttrib-31 {float: left;}

My problem is that it all looks aligned and neat in IE8 but in previous versions of IE and Firefox, my attributes, controlled by this CSS become unaligned. I know very little about stylesheets ... Am I missing something out or using 'em's when I should be using 'px's? Any help would be greatly appreciated.

[gjh42]

Which attributes become unaligned, and by how much? All I see in Firefox is that #wAttrib-19 and #wAttrib-27 are off by two pixels (as are -23 and -31). You appear to have reconfigured your stylesheet since posting, so I can't address what you saw then.
You now have

#wAttrib-24 {clear: left; float: left; margin-left: 1.3em; margin-right: 5.0em;}/*this will sit on a new line*/
#wAttrib-25 {float: left; margin-right: 5.0em;}/*this will sit beside #wAttrib-24*/
#wAttrib-26 {float: left; margin-right: 4.85em;}/*this will sit beside #wAttrib-25*/
#wAttrib-27 {float: left;}/*this will sit beside #wAttrib-26*/

which would account for the two px - is this to correct something in IE?


Also, you have a few style properties repeated for every attribute. Instead of specifying them for every id, you could be much more efficient and specify them for .wrapperAttribsOptions {} or .wrapperAttribsOptions h4 {} once; this will apply to all #wAttrib- elements.

[gjh42]

Bonkycat - I don't know why you are seeing such a strange layout. I also see it correctly in Firefox now, with rows of three metals, two stones and two stones. Could it have been some sort of cache problem? Do you still have the problem?