Styling Main Product Page

[dkervin]

This is my first post, so let me say hello to everyone and thank all the posters who have helped me along so far.

I have been trying to style the main product page by modifying the stylesheet and tpl_product_info_display.php but I can't seem to get it right. What I have done is move around the elements in tpl_product_info_display.php and added a div, to make the main image, the additional images, and the name and info show up in three columns. I am also using a flash image swapper - swap_images_via_mouseover_or_click_v1-3-9f.

The problems are these large gaps I can't get rid of. One about 30px wide between the main image and the additional images, and one about 250px wide between the additional images and the name and other info. Here is the code (I deleted the code between the comments)

<div style="float:left;">
<!--bof Main Product Image -->
<!--eof Main Product Image-->

<!--bof Additional Product Images -->
<!--eof Additional Product Images -->
</div>

<!--bof Product Name-->
<!--eof Product Name-->

<!--bof Product Price block -->
<!--eof Product Price block -->

<!--bof Product description -->
<!--eof Product description -->

<!--bof Attributes Module -->
<!--eof Attributes Module -->

And this is the css:

#productMainImage {padding:0; float:left; margin:0;}
/*#productMainImage {text-align: center; }*/
#productAdditionalImages {margin:0;}
#productAdditionalImages .additionalImages {padding:0; margin:0; vertical-align: top; text-align: center;}
#productAdditionalImages a {text-decoration:none;}

As you can see, I have been trying set the margins and padding to 0 but I still have these large gaps. I have a picture of the problem here http://i1238.photobucket.com/albums/...site-image.png

If anyone can point me in the right direction, I would greatly appreciate it. Please let me know if I need to post more information. Thanks!

[kobra]

Your pic is nice but what is needed is a link to your site/page
If you do not want it to be picked up by the SE's, insert ONE space into it as in
http: //www.zen-cart.com/

[dkervin]

Good idea. Here it is http: //cosmic-kip.com/cosmic-store/index.php?main_page=product_info&cPath=3_6&products_id=177

[kobra]

What I have done is move around the elements in tpl_product_info_display.php and added a div, to make the main image, the additional images, and the name and info show up in three columns.

I do see evidence of 3 columns at all??
So no gaps...

[dkervin]

Maybe 3 columns wasn't the correct way to describe it. The gap I want to get rid of is between the additional images and the product name and price. Its about 250px wide, and I don't know where it is coming from.

[kobra]

Its about 250px wide

Can't find it
What browser & version are you using?
This is what I see

[dkervin]

Thanks for the replies, kobra. I should have checked this out in different browsers, I am still just a beginner. I actually was checking different browsers in the beginning, but I stopped because I never saw any differences. Now that I am editing a little deeper, I guess that is a must from here on out. So this is definitely a browser issue.

The original image in my first post was from IE8. I checked it in Firefox and Chrome and both results were like yours. That is what I am working toward, although the additional images went below the main image instead of right next to it.

I am not too far off from the default template, so I guess I will start again from the default, but check different browsers after every edit to see when the problem occurs. I suspect it's the floats or the image swapper I put in.

I suppose I should also read up on the differences between the browsers and the work-arounds as well. Yikes!