Weird Problem: Add To Cart Box Disappears On Scroll

[bobbyt]

OK this is a very strange problem. at least i think it is, its more then likely something very simple, that i don't know about.
I'm using zen 1.3.0.1

i added my attributes to the add to cart box on the product info page, so far everything is going fine, except this strange problem. when i use the scroll bar and move the page up and down the top of the box disappears where it says please choose. if you move the scroll bar slow its fine but if you move it fast some of the top or all of the top disappears.

here is the link
http://www.enchantedfantasys.com/ind...roducts_id=453

its an adult related site


if anyone has any clue why this is happening and how i can fix it it would be so appreciated

thanks

[kuroi]

Only happens in Internet Explorer. Looks to me like an IE Peekaboo bug. Recommend removing the superfluous background color from

#buybox {margin: 0; padding: 3px; width: 200px; text-align: center; background: #ffffff; border: 1px solid #b08694;}

[bobbyt]

thanks so much for the reply. unfortunately that didn't work. its very weird. i will keep working on it. but if anyone knows the reason and wants to clue me in it will be greatly appreciated. by chance do you or anyone else know how i can get rid of that large space between the option name and the value?

thanks muchly for your help

its very appreciated

[kuroi]

OK. We hit the wrong one. If you remove the following from your stylesheet_new and your stylesheet_original I believe that it will solve the problem.

#productAttributes {background-color: #ffffff;}

However, let's also take a look at a couple of things that you are doing that will cause you grief down the line ...

Firstly you have scattered background colors all over the place. This is unnecessary and encourages Internet Explorer to show off it's wide range of bugs. CSS is hierarchical and divs inherit properties for the divs that contain them. Therefore, if you define the background-color for your mainWrapper div to be white, then none of the divs inside it need their background-color defined unless they will be a different color.

Secondly, you have a defined a number of styles in both your stylesheet_new and your stylesheet_original. This means that any changes you make to these styles in stylesheet_new risks being overridden by stylesheet_original, unless you also make the change there. This is rather pointless and makes maintenance difficult and error-prone. I strongly recommend only defining your own styles once, preferably in stylesheet_new.

Oh yes. Before I forget. The gap between the option names and values is down to this definition in your CSS

.optionName {color: #580c84; margin: 0; font-weight: bold; padding-left: 3px; text-align: left; background: #ffffff; width: 8em;}

The cumulative effect of other styles makes these 8em equivalent to almost 100px. Try something like 4em instead (and as it is in both your stylesheets, change one and delete the whole line out of the other).

[bobbyt]

thank you so so much.

it all worked perfectly. i really appreciate all the help you have given me.

i plan on switching to a custom template in the near future so i will only have one stylesheet. i wanted to get my site up and going and most of it was already done with 1.3.0 and i didn't want to waste time. but I'm working on a custom template at the moment.

thanks so much for all the help and suggestions, it has been so helpful.