.slideToggle and position:fixed in Chrome

Question

I'm showing and hiding some content with a menu. When the button is clicked, an unordered list and an image with a fixed position is displayed using .slideToggle(). This works, but when multiple elements shown and then hidden, the image stays fixed to where it originally displayed. Is there any way to fix this?

HTML

<div class="menuBar">
<table cellpadding="2" cellspacing="0" border="0">
    <tr>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30EntertainmentButton.png" id="entertainment"  width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceButton.png" id="choice" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceXtraButton.png" id="choiceXtra" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30ChoiceUltimateButton.png" id="choiceUltimate" width="124" height="25" /></td>
        <td style="vertical-align:middle;"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV30PremierButton.png" id="premier" width="124" height="25" /></td>
    </tr>
</table>
</div>
<div class="packages" id="ent">
<div class="pricePoint"><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3entertainment_en.png" width="190" height="439" /></div>
    <ul id="entChan">
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li>
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li>
    </ul>
</div>

<div class="packages" id="cho">
<div class="pricePoint"><img class="pricePoint" src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/DTV3choice_en.png" width="190" height="439" /></div>
<ul id="choChan">
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/AandE_logo_4.jpg" height="56" width="70" title="A&E" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">A&amp;E</span></li>
        <li><img src="http://image.iloqal.com/lib/fe60157077600275741d/m/1/ABCFamily_logo_4.jpg" height="56" width="70" title="ABC Family" /><span style="font-family:Arial, Helvetica, sans-serif; color:#959595; padding:20px; font-size:10px;">ABCF</span></li>
    </ul>
</div>

CSS

.menuBar {
    position:fixed;
    background-color:#fff;
    top:55px;
    left:0;
    z-index:11;
}
.pricePoint {
    position:fixed;
    width:190px;
    top:85px;
}

JS

$('#entertainment').click(function () {
    $("#ent").slideToggle();

});
$('#choice').click(function () {
    $("#cho").slideToggle();

});

Answer 1

Now that I tried it in chrome I see what you mean. Chrome seems to take the fixed position literally.

If you want more dynamic positions you should use floats.

Try using float:left instead. This should fix the problem.

Also, if you bring up the dev tools in chrome while on the site this seems to position the elements properly. Which is strange.