Div slips on another div with internet explorer only

Question

In the videos playlist at the bottom, video description (background black) needs to go 20 pixels down. You will understand it better if you view the website with Firefox.

http://pangeaadvisors.org/default.asp

I also included a screenshot: http://pangeaadvisors.org/SS.jpeg

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing {  background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }

Answer 1

IE6/7 has issues with mixing floats and absolute positioning. Try removing the position:absolute from #content #videos .playlist .entries .description p

Answer 2

Your link is broken, the correct url should be http://pangeaadvisors.org/SS.jpg

• In Firefox 3.5 I see it exactly the same as your screenshot of IE (20 pixels raised).
• In IE6 I see it aligned to the base but with 20px on the left
• and IE7 the same as IE6 but with some glitch in the scrolling.

In firefox the first 2 items are miss-placed, but the 3rd item in the playlist is displayed correctly. The factor effects this is the length of the title. Longer title display fine, shorter with the 20px gap, the line-height pushes the time-stamp down.

If you add another div inside the "video" wrapping around the title and define a height and width on this with overflow:hidden, it should standardize and stop the issue of some blocks being different heights to others.

With this done you can then use a couple of CSS hacks to write rules for any misbehaving browsers by using

position:relative;
top:XXpx

A little down-and-dirty but should work just fine. Can't be more specific since I can't actually re-create your problem in my browsers.

Answer 3

None of the suggestion above worked. I solved it with margin-left:-20px. Hate internet explorer!