StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPIE.htc and jQuery animation conflict?
text
Body
copied!<p>I have a series of bullets that will appear in succession. I'm using jQuery and jQuery UI in the animation of the bullets. The top bullet needs to have rounded corners which I am using CSS and PIE.htc to accomplish. This works great in all non-IE browsers as well as IE8, but in IE7, the first bullet appears with it's background about 80% to narrow and about 95% to short (or perhaps it is extremely offset to the top left).</p> <p>Interestingly, if you resize the broswer window at all, the background snaps into proper place (not the bullets are in a fixed width container so I am not resizing the bullets here). If I comment out the PIE.htc line in my CSS the bullet shows up properly, but I need the rounded corners. See <a href="http://www.keystonelearning.com/test/bullet_error.jpg" rel="nofollow">this image</a>.</p> <p>Relevant code follows</p> <p><strong>JS</strong></p> <pre><code>$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow'); </code></pre> <p><strong>CSS</strong></p> <pre><code>.bullet { display:none; color:#6e6e6e; min-height:40px; font-size:2.5em; line-height:1.5em; font-weight:normal; position:relative; padding:25px 20px; margin-top:1px; background:#eeeeee; border-bottom:1px solid #fff; } .bullet.first{ margin-top:0; -moz-border-radius:8px 8px 0 0; -webkit-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0; behavior: url(/Content/PIE.htc); } .bullet.currentBullet{ background:#d98452; color:#fff; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload