Help with Product Details CSS

[mmckimson]

I'm not exactly a CSS guru (far from it) and am trying to get the CSS of the ProductDetails panel to display the same on IE as it does in Firefox, which looks better in my opinion.

In Firefox, the Product Details looks as follows:

https://www.kneisslnorthamerica.com/images/other/proddetailsfirefox.jpg

In IE, Product Details are looking as follows:

https://www.kneisslnorthamerica.com/images/other/proddetailsIE.jpg

I'd prefer to have the product details look like the Firefox version, and if anyone can assist with the appropriate modifications to the CSS or code to fix it, it would be appreciated.

Mike

[babyREFLUX]

Hi Mike...it might help to mention which template you are using (...and has it been modified?) and also which version you are on. Probably speed up the diagnosis :)

[mmckimson]

I am using a slightly modified version of the Adventure template on 5.0.2, although the changes related more to using fixed font sizes than anything.

On a related issue (IE versus Firefox) I know that there is some Javascript code that is supposed to make sure that the display of the various product boxes that show up are consistent as to height. It works beautifully in Firefox, but in IE as the product name gets too long, the product boxes will get longer and the columnar display (say where you have 10 products showing) will get out of whack. Here's how they look in Firefox:

https://www.kneisslnorthamerica.com/images/other/catviewfire.jpg

Here is the same display in IE:

https://www.kneisslnorthamerica.com/images/other/catviewIE.jpg

As you can see, the top right product is not displaying a box of the same size, and as that continues of course you'll end up with large blank spaces where the browser can't fit in the next box. I've controlled it by shortening the product name for now, but would be interested in a permanent fix should someone figured something out.

Thanks in advance.
Mike

[jonahcoyote]

Why not just manually set the height of the boxes in the CSS? You could probably figure out a way to only target IE browsers too... Since you're using jQuery already, check this out: http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx

[mmckimson]

It was a simple CSS fix to set the product boxes to a standard size that looks the same across all browsers... the tough part is I'm not great with CSS so I have a hard time deciphering what CSS style is doing what to the element you are looking at. Thank goodness for the Firefox add in!

Anyway, I simply fixed the height as follows for the following in styles.css:

.Content .ProductList li {
padding-bottom: 5px;
min-height: 9.5em;
float:left;
margin: 10px 10px 0 0;
padding: 0;
overflow:hidden;
width: 276px;
height: 165px;

Now after I get my cart fully deployed (hopefully by 12 am tonight) I can start looking at the first issue on the ProductDetails page. Thanks for the tip.

Mike

[mmckimson]

I was able to figure out a fix for this. While probably not recommended, I simply set the length of the select boxes used in Product Details to a fixed pixel amount as opposed to a percentage width, which wasn't rendering properly in IE. The change was made in the ProductVariationListMultiple.html file located in the templates/_master/snippets directory as follows:

<select name="variation[%%GLOBAL_VariationNumber%%]" style="width: 225px; margin-bottom: 4px;">
<option value="">%%GLOBAL_VariationChooseText%%</option>
%%SNIPPET_OptionList%%
</select>

I realize this probably isn't recommended, as when I upgrade it may require me to do it again!