Проблемы с совместимостью с позиционированием CSS с IE

Question

У меня возникли проблемы с веб-сайтом клиента, который не отображается должным образом в IE. В настоящее время я использую IE 9, но есть несколько ошибок, которые все еще появляются. Ссылка: www.zenhomecleaning.com/ny/staff.html, и я использую IE 9 в Windows Vista.

Первая проблема, с которой я сталкиваюсь, заключается в том, что div не остается в нужном месте. Страница выглядит хорошо в Google Chrome, но при тестировании ее на IE 9 неправильно отображаются два div.

Контейнер DIV является "rightpanel" и вот HTML и CSS:

<div id="rightPanel"> 

      <div id="socialmedia"> 
        <div><a href="http://facebook.com/zenhomeinc" target="_blank"><span id="facebook"></span></a></div> 
        <div><a href="http://twitter.com/zenhomeinc" target="_blank"><span id="twitter"></span></a></div> 
        <div><a href="http://www.youtube.com/user/zenhometherapy/videos" target="_blank"><span id="youtube"></span></a></div> 
        <div><a href="http://www.linkedin.com/company/1593810" target="_blank"><span id="linkedin"></span></a></div> 

      </div><!-- end of #socialmedia --> 

       <br /> 
       <div id="customerlobby"><a href="http://www.customerlobby.com/reviews/5095/zen-home-cleaning/" onclick= 
       "window.open('http://www.customerlobby.com/reviews/5095/zen-home-cleaning/', 'ReviewPage', 
       'statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=540, height=575,left=570,top=200,screenX=570,screenY=200'); 
       return false;" target="_blank"><img src="https://www.customerlobby.com/ctrack-5095" border="0" style="display: none;" alt= 
       "Statistics" /><img alt="Zen Home Cleaning Customer Reviews" src="https://www.customerlobby.com/logo-serve?id=791" border="0" /></a 
       ><!--End Customer Lobby--></div> 

       <div id="phone"> 
        <h3>Contact Us Today</h3><h1>212.462.2566</h1></div>   

     </div><!-- end of #rightPanel --> 

и CSS:

#header #rightPanel { 
    width: 500px; 
    height: 185px; 
    margin: 5px 7px 0 0; 
    float: right; 
} 
    #socialmedia { 
     width: 153px; 
     height: 26px; 
     float: right; 
     margin: 10px -28px 0 0; 
     padding-right: 0; 
    } 
     #socialmedia #facebook { 
      background: url(../img/icon_facebook.jpg); 
      width: 26px; 
      height: 26px; 
      margin: 0 3px 0; 
      float: left; 
     } 
     #socialmedia #twitter { 
      background: url(../img/icon_twitter.jpg); 
      width: 26px; 
      height: 26px; 
      margin: 0 3px 0; 
      float: left; 
     } 
     #socialmedia #youtube { 
      background: url(../img/icon_youtube.jpg); 
      width: 26px; 
      height: 26px; 
      margin: 0 3px 0 3px; 
      float: left; 
     } 
     #socialmedia #linkedin { 
      background: url(../img/icon_linkedin.jpg); 
      width: 26px; 
      height: 26px; 
      float: left; 
      margin: 0 0 0 3px; 
     } 
     #rightPanel #customerlobby { 
      width: 100%; 
      height: 70px; 
      margin: 12px 0 0 0; 
      float: right; 
      text-align: right; 
     } 

    #header #phone { 
     width: 220px; 
     float: right; 
     text-align: right; 
    } 
     #header #phone h1 { 
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; 
      font-size: 22px; 
      font-weight: 600; 
      letter-spacing: .1em; 
     } 
     #header #phone h3 { 
      font-size: 14px; 
      font-weight: 400; 
      letter-spacing: .1em; 
      margin-bottom: -15px; 
     } 

Этот DIV должен быть выстроены с правом стороне меню.

И для DIV контента, вот в HTML и CSS ..

<div id="main"> 
      <div id="content"><!-- InstanceBeginEditable name="content" --> 
      <h1>Meet the Staff</h1> 

       <div id="staff"> 



        <div class="title">Management</div> 

        <div class="row-2"> 
         <div class="staffPhoto"><h4>Operations Manager</h4><a  class="various fancybox.iframe" rel="staff" href= 
         "staff/marina.html" ><img src="staff/img/marina-thumb.jpg" alt="Green Cleaning Services, Marina Gospodinova" /><p>Marina Gospodinova</p></a></div> 
         <div class="staffPhoto"><h4>Field Manager</h4><a class="various fancybox.iframe" rel="staff" href= 
         "staff/mariyana.html" ><img src="staff/img/mariyana-thumb.jpg" alt="Green Cleaning Services, Mariyana Nedelcheva" /><p>Mariyana Nedelcheva</p></a></div> 

        </div> 





        <div class="title">Client Services</div> 

        <div class="row-2"> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lucille.html" ><img src= 
        "staff/img/lucille-thumb.jpg" alt="Green Cleaning Services, Lucille Manariotis" /><p>Lucille Manariotis</p></a></div> 

        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href= 
         "staff/akia.html" ><img src="staff/img/akia-thumb.jpg" alt="Green Cleaning Services, Akia Ridley" /><p>Akia Ridley</p></a></div> 

        </div> 

        <div style="margin-bottom: -50px; "></div> 





        <div class="title">Quality Control Services</div> 
        <div class="row-4"> 

        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div> 

        <div style="margin-bottom: -50px; "></div> 

        <div class="title">Cleaning Consultants</div> 
        <div class="row-6"> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/alesha.html" ><img src="staff/img/alesha-thumb.jpg" alt="Green Cleaning Services, " /><p>Alesha</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/awilda.html" ><img src="staff/img/awilda-thumb.jpg" alt="Green Cleaning Services, " /><p>Awilda</p></a></div>      
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/beverly.html" ><img src="staff/img/beverly-thumb.jpg" alt="Green Cleaning Services, " /><p>Beverly</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/carlos.html" ><img src="staff/img/carlos-thumb.jpg" alt="Green Cleaning Services, " /><p>Carlos</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/christin.html" ><img src="staff/img/christin-thumb.jpg" alt="Green Cleaning Services, " /><p>Christin</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/crystal.html" ><img src="staff/img/crystal-thumb.jpg" alt="Green Cleaning Services, " /><p>Crystal</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/daphne.html" ><img src="staff/img/daphne-thumb.jpg" alt="Green Cleaning Services, " /><p>Daphne</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/denise.html" ><img src="staff/img/denise-thumb.jpg" alt="Green Cleaning Services, " /><p>Denise</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/francis.html" ><img src="staff/img/francis-thumb.jpg" alt="Green Cleaning Services, " /><p>Francis</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/glenda.html" ><img src="staff/img/glenda-thumb.jpg" alt="Green Cleaning Services, " /><p>Glenda</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/iris.html" ><img src="staff/img/iris-thumb.jpg" alt="Green Cleaning Services, " /><p>Iris</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ivelisse.html" ><img src="staff/img/ivelisse-thumb.jpg" alt="Green Cleaning Services, " /><p>Ivelisse</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/jovana.html" ><img src="staff/img/jovana-thumb.jpg" alt="Green Cleaning Services, " /><p>Jovana</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/kashmire.html" ><img src="staff/img/kashmire-thumb.jpg" alt="Green Cleaning Services, " /><p>Kashmire</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/leyda.html" ><img src="staff/img/leyda-thumb.jpg" alt="Green Cleaning Services, " /><p>Leyda</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/lissy.html" ><img src="staff/img/lissy-thumb.jpg" alt="Green Cleaning Services, " /><p>Lissy</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/ljumnije.html" ><img src="staff/img/ljumnije-thumb.jpg" alt="Green Cleaning Services, " /><p>Ljumnije</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/marina2.html" ><img src="staff/img/marina2-thumb.jpg" alt="Green Cleaning Services, " /><p>Marina</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mary.html" ><img src="staff/img/mary-thumb.jpg" alt="Green Cleaning Services, " /><p>Mary</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mildred.html" ><img src="staff/img/mildred-thumb.jpg" alt="Green Cleaning Services, " /><p>Mildred</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/miquel.html" ><img src="staff/img/miquel-thumb.jpg" alt="Green Cleaning Services, " /><p>Miquel</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/mirjeta.html" ><img src="staff/img/mirjeta-thumb.jpg" alt="Green Cleaning Services, " /><p>Mirjeta</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/nefertiti.html" ><img src="staff/img/nefertiti-thumb.jpg" alt="Green Cleaning Services, " /><p>Nefertiti</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/raina.html" ><img src="staff/img/raina-thumb.jpg" alt="Green Cleaning Services, " /><p>Raina</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/reina.html" ><img src="staff/img/reina-thumb.jpg" alt="Green Cleaning Services, " /><p>Reina</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/teresa.html" ><img src="staff/img/teresa-thumb.jpg" alt="Green Cleaning Services, " /><p>Teresa</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/torra.html" ><img src="staff/img/torra-thumb.jpg" alt="Green Cleaning Services, " /><p>Torra</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/vanessa.html" ><img src="staff/img/vanessa-thumb.jpg" alt="Green Cleaning Services, " /><p>Vanessa</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/victor.html" ><img src="staff/img/victor-thumb.jpg" alt="Green Cleaning Services, " /><p>Victor</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira.html" ><img src="staff/img/yahaira-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div> 
        <div class="staffPhoto"><a class="various fancybox.iframe" rel="staff" href="staff/yahaira2.html" ><img src="staff/img/yahaira2-thumb.jpg" alt="Green Cleaning Services, " /><p>Yahaira</p></a></div> 

        </div> 

        <div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div><div class="spacerXL"></div> 

       </div><!-- end of #staff"--> 
    </script><!-- InstanceEndEditable --></div> 
      <!-- end of #content --> 
     </div><!-- end of #main --> 

и CSS:

#main { 
display: block; 
width: 100%; 
max-width: 990px; 
margin: 0 auto; 
padding-top: 50px; 
} 

#main #content { 
    width: 95%; 
    max-width: 990px; 
    margin: 0 auto; 
} 

#main #content .small { 
    font-size: 11px; 
} 

    #main #content p { 
     font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
     font-size: 14px; 
     letter-spacing: .1em; 
    } 

Я попытался корректировки Див и пробовать различные стили, чтобы выровнять содержимое правильно но безрезультатно. Был бы очень признателен за любое руководство по этим двум вопросам, которые у меня есть. Большое спасибо!

Answer 1

Для начала установите правильный заголовок DOCTYPE, чтобы браузер знал, чего ожидать от HTML или XHTML.

Я рекомендовал бы это, если вы хотите поддерживать браузеры, которые не любят HTML5

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
... 

Я вижу больше проблем после того, как этот, если не пытаться быть строгим с вашим кодом.

Затем запустите страницу через HTML Validator, прежде чем пытаться исправить определенные проблемы. Когда я запускаю ваш URL через валидатор, он сообщает (среди прочего)

Line 1, Column 85: Comments seen before doctype. Internet Explorer will go into the quirks mode. 

Answer 2

Это рендеринг в режиме quirks. Я вижу <!doctype html> в начале вашего источника, но перед ним есть комментарий, который, кажется, мешает IE распознавать его. Удалите этот комментарий или переместите его ниже DOCTYPE.

Answer 3

Вы должны использовать все атрибуты в тегах, такие как align ... или код в css.

Чтобы проверить сопоставимость исследователя интернета попробовать IE Tester: http://www.my-debugbar.com/wiki/IETester/HomePage :)