Eliminating wrap-arounds

[ckosloff]

Thanks so much for guidance.
I won't be able to respond immediately to this post since I have to do lots of testing to get the look that I need.
Will now restore the test site to defaults and test in a local site.
Will be back to this thread if ran into trouble.
Take care.

[ckosloff]

I achieved the look I need...but only in IE
http://www.haiswigs.com/index.php?ma...3db117ef213fdb
This is how I did it.
First, I deconstructed the mod already published in the downloads section, comparing it to the original file.
I found that it is a dated version of tpl_product_info_display.php, and hacked a lot to include tables.
More importantly, it places the additional images file right after product info.
So, then I checked your suggestion and found that it is based on a newer version of the file and includes a div that wraps it all up.
So I got the latest version of the file (1.3.7.1) and started hacking away on these basis: I should use the latest version of the file, I should use CSS and not tables, I should not use deprecated tags and it should be XHTML-compliant.
So, after testing, saw that I needed to include a <br class="clearBoth /> statement in the middle of the two files.
I also modified the Admin setting for Images to show additional images per row = 1.
Lastly, I created an id in the stylesheet by which the div should float left.
It works fine in IE, but Firefox shows an ugly kludge that I cannot fix.
I attempted:
1) floating additional images to left, it works but the text stays in the middle.
2) wrapping the product info description in a table, looks great in IE but even worse than without table in FF.
3) hacking the tpl_columnar_display.php as you suggested, but worse still, because of the br statement in the middle of the two files, and disruptive of the whole page.
The only thing that I can think of, for now, is to turn text off, so I will be able to float additional images left, without the text showing in the middle and pushing the product info description to the right.
So, how did you turn text off?

[gjh42]

Testing on your site, I find that this works nicely to line up the additional images below your main image:

#productAdditionalImages .additionalImages img { 
    float: left; 
    margin-left: 20px;
    }

I eliminated the "larger image" text long ago by simply redefining it in /includes/languages/my_template/english.php:


define('TEXT_CLICK_TO_ENLARGE', 'larger image');


define('TEXT_CLICK_TO_ENLARGE', '');

When null, it is not displayed at all.

[ckosloff]

Thanks a lot for quick reply.
Yes, this style declaration will float additional images to left, and I can tweak the pixel amount.
I turned off text display, it really isn't the ideal solution for me, but we are trying to get it to work cross-browser.
Not yet there.
Something is still pushing the product info to the right, I don't think turning off text totally eliminated the problem.
Plus, the fact that it is not enclosed in a table causes it to wrap-around the images.

[gjh42]

You never applied the styling in my example above, and that is an integral part of getting the layout to function.
The image wrapper needs a width, and the text parts all need margin-left:

#additionalImageWrapper {
    float : left; 
    width:200px;
    } 
h1#productName, h2#productPrices, #freeShippingIcon, #productDescription { 
    margin-left:210px;
    } 
h3#attribsOptionsText { 
    margin-left:210px;
    } 
.wrapperAttribsOptions { 
    margin-left:210px;
    }

Adjust as you wish.

[ckosloff]

Hey Glenn,
Thanks again for the willingness to help.
I hate to give you a hard time but I have now uploaded all the style modifications you sent and still can't get the product info to the left.
I turned on text for you to see it more clearly, but it is the same with it turned off.
There is still something in the layout that is distorting the page.
Now, this only happens in Firefox, IE reacts to all this much more gracefully, so we have to target the way that browser renders this mod, IMHO.

[gjh42]

Adding

#productAttributes { clear: both;}

will keep the "Please Choose" always below the add to cart box.

Other than that, I don't see anything really wrong with the page. What do you see as problems?

You can shrink the image wrapper width and the margin, if you wish to give more room for the text.
The slight differences in the left edge of text elements are due to some default style margins or padding applied to generic elements like <p>, <label> and the like. You can eliminate those by specifying things like
#productGeneral p {margin-left: none; padding-left: none;}
to avoid messing up other pages.

Use the Firefox Web Developer extension and especially its Information > Display Element Information tool to find out exactly what tags apply to each element.

And finally, it is almost always best to design for proper operation in Firefox, and then correct for any anomalies in IE. FF follows official web standards much more closely than IE, so you won't be tailoring your fundamental design to quirks.

[gjh42]

Here is the key for controlling the additional images with their subtext:

#productAdditionalImages .additionalImages a { 
    float: left; 
    margin-left: 20px;
    }

[ckosloff]

Glenn,
I am using a laptop with a slow connection at present so unable to do much testing.
I will test in depth when I get back home, and post results here.
However there are a couple questions that you might field now:
1) "Firefox Web Developer extension and especially its Information > Display Element Information tool", is this what you used to find out what my style tags were?
2) I assume that this is the same thing as Firebug. I uninstalled this from my laptop because when tweaking the site online it was producing errors, e.g. unable to use Zen Cart's HTML editors. But I might use it on one of my local sites, where I do all the development. In fact, what you see online is like a showcase that I use to ask questions.
3) How do you look up what key does what? For example:
" #productAdditionalImages .additionalImages a {
float: left;
margin-left: 20px;
}
is the key for controlling the additional images with their subtext "
Did you find that out by using Firebug or is there something else?
I need to learn more...
Thanks.

[ckosloff]

Finally got the look I needed with the last set of instructions.
Now it is really cross-browser, except for minor differences which are unavoidable.
So this part of the ordeal is over, thank you SOOOO much.
Didn't have the time to upload yet but will do so later on.
Now, please answer the above question about Firebug and the rest.
Where did you learn so much about style?
This is very important so I will be less dependent on others answering questions.
Take your time and have a nice weekend.