Page looks funny in IE, looks fine in Chrome, Firefox, Safari

Question

Hi Everyone,
Any advice would be greatly appreciated. This page looks fine in Firefox, Safari, and Chrome, but the formatting gets screwed up in Internet Exploder. Since I'm on a mac, checking is rather difficult for me. Aside from fixes to the code to get this to display properly, does anyone have any advice as to how to check stuff in IE from a mac, aside from 1) buying a PC or 2) asking PC friends to take screen shots? Here's the link:
http://www.sarahegeller.com/suggested.html
Thanks,
Nick

Answer 1

Ok, that is weird.  It seems to only be altering IE 8.  I did a screenshot test of IE 7 and looked at it in 9 and it doesn't seem to be affected.
I had run your page through the validator before and only came up with unnecessary code for tracing and missing alt tags.  Here is the block of code that first seems to be affected:
<td valign="top" class="style9"><span class="style12">Astor Piazzolla (Arg.)<br />
Alberto Ginastera (Arg.)<br />
Camargo Guarnieri (Brazil)<br />
Juan Orrego-Salas (Chile)<br />
Paquito D’Rivera (Cuba)<br />
Joaquín Nin (Cuba)<br />
Carlos Chavez (Mex.)<br />
<br />
Manuel Ponce (Mex.)<br />
<br />
Silvestre Revueltas (Mex.) <br />
Ricardo Lorenz (Venezuela)<br />
Manuel de Falla (Spain)/ Arr. Kochanski<br />
Xavier Montsalvatge (Spain)</span></td>
I then look at "class='style9'" and "class="style12" right after that:
.style12 {     font-size: 8pt;
     font-family: Arial, Helvetica, sans-serif;
     line-height: 12pt;
     background-color: #FFFFFF;
     color: #000000;
     font-weight: normal;
.style9 {font-size: 9pt;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bolder;
     color: #0099FF;
     text-align: right;
This tells me that you are not very familiar with code because DW created 2 classes named "style#".  As you can see, both classes are defined, and both want different things, one is 9pt the other 8, one is normal font-weight, the other is bold, but both are defined on the same element.  I see a pattern of this throughout your page which leads to apdivs that don't seem to have a purpose and a long line of <br /> tags to insert line breaks and create spacing instead of using margins and padding.  Most here will argue that while DW is a great tool, a knowledge of HTML & CSS will always be better.  Overall, I don't see any need for anything more complex than 3 styles; one for blue header, one for bold header and one for body text.  Then insert your header 1, header 2, body text, and then put the following content inside table and repeat.
Based on what is there, in order to solve the problem efficiently, I would recommend starting at your template file (assuming you are using one, if not you should look at it for this type of layout).  Then re-layout the body content on the page with the template in tact using the suggestions above.  I would also recommend giving the below tutorial a quick read through in case some of the CSS comments I made did not make sense.
http://w3schools.com/css/