인터넷 익스플로러 마진 CSS는 서로 옆에 두 된 div를 줄려고

Question

메신저를 해킹. 나는 파이어 폭스와 크롬을 위해 CSS를 해킹 할 수 있었지만 인터넷 익스플로러에 문제가 있었다. 나는 여기에서 보았다. 그리고 구글은 약간을 발견했다. 그러나 아직도 문제를 가지고있다.

을 heres 웹 사이트

http://colmandesigns.123abc.co.nz/dev/brittens/index.html

이를 heres 내 CSS를

http://codepad.org/Wohvhj3h

도움이 될 것이다 큰

감사

Answer 1

문제는 요소를 배치하는 방법과 관련이 있습니다. 이 구조를 사용하여 요소를 정렬하려면 앵커와 이미지 ('staffimages'내부)를 구분하고 CSS 여백을 사용하는 모든 태그 <br> 태그를 삭제해야합니다. 또한

 

    <div class="staffimages"> 
    <a href="#"> 
    <img src="images/staff.jpg" width="50" height="50" alt="Johnny" border="0"> 
    </a> 
    <br> -- delete this 
    <br> -- also delete this (and so on) 

, 내가 문제를 해결하기 위해 다른 방법이없는 경우를 제외하고는 브라우저 별 CSS 해킹을 사용하지 않는 것이 좋습니다.

아래에서 HTML 파일과 함께 사용할 CSS 스 니펫을 볼 수 있습니다.

 

    @charset "utf-8"; 
    /* CSS Document */ 

    body       {margin: 0 auto;} 

    .container      {margin:0 auto; width:1000px; height:950px; background-image:url(images/container.png);} 

    #head_back { 
    position: absolute; 
    left: 0px; 
    top: 16px; 
    width:700px; 
    right:700px; 
    height: 126px; 
    z-index: -1; 
    background-image:url(images/bgbg.png); 
    } 

    /* HEADER */ 

    .header       {width:982px; height:370px; margin-left:9px; background-image:url(images/header.jpg);} 
    .navibg       {background-image:url(images/navibg.png); width: 983px; height:56px;} 
    .logo       {margin-top:-40px;} 

    /* CONTENT TITLES */ 

    #welcome      {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;} 
    #services      {width:89px; height:22px; margin-left:-90px; padding-top:250px; float:left;} 
    #contactus      {width:89px; height:22px; padding-left:50px; padding-top:30px; float:left;} 
    #makinglifeeasy     {width:89px; height:22px; padding-left:30px; padding-top:30px; float:left;} 
    .seperator      {width:300px; float:right; padding-top:30px; padding-right:90px;} 
    #team { position: relative; margin-top: 30px; height: 19px; width: 78px; float: right; margin-right: -105px; } 

    /* NAVIGATION */ 

    .navi       {float:right; padding-right:50px; padding-top:3px;} 

    /* CONTENT */ 

    .welcomecolumn     {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;} 
    .servicescolumn     {width:500px; height:auto; float:left; padding-left:6px; padding-top:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify; color:#505050; line-height:150%;} 

    .list1       {float:left; margin-left:-20px;} 
    .list2       {float:right; padding-right:200px;} 

    /* FOOTER */ 

    .footer       {background-image:url(images/footer.png); width:982px; height:65px; margin-left:9px; margin-top:460px; color:#505050} 
    .footernavi      {font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; float:right; padding-right:60px; padding-top:27px;} 
    .footernavidetails    {font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; float:left; padding-left:308px; padding-top:27px; color:#FFFFFF; } 
    .footertext      {padding-left:40px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-top:110px; padding-bottom:5px; color:#aeaeae; text-align:center} 

    /* TEAM */ 

    .staffimages { 
     height:auto; 
     float:left; 
     margin-left:12px; 
     margin-top:15px; 
    } 

    .staffimages a { 
     display: inline-block; 
     margin-bottom: 20px; 
    } 

    .stafftext1, .stafftext2, .stafftext3, .stafftext4, .stafftext5 { 
     width:150px; 
     float:left; 
     margin-left:80px; 
     color:#505050; 
     font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-size:10px; 
     text-align:justify; 
     position:absolute; 
    } 

    .stafftext1 { 
     top:30px; 
    } 

    .stafftext2 { 
     top:100px; 
    } 

    .stafftext3 { 
     top:170px; 
    } 

    .stafftext4 { 
     top:242px; 
    } 

    .stafftext5 { 
     top:311px; 
    } 

    /* READ MORE */ 

    #readmore, #readmore2, #readmore3, #readmore4, #readmore5 { 
     width: 100px; 
     height: auto; 
     float: right; 
     position: absolute; 
     margin-left: 80px; 
    } 

    #readmore { 
     top: 66px; 
    } 

    #readmore2 { 
     top: 135px; 
    } 

    #readmore3 { 
     top: 204px; 
    } 

    #readmore4 { 
     top: 275px; 
    } 

    #readmore5 { 
     top: 345px; 
    } 

     .contactdetails 
      {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:400px; padding-left:8px; line-height:40%; color:#626262} 

     .main {color:#626262} 

     /* GOOGLE */ 

    .google     { 
     width:300px; 
     height:305px; 
     float:left; 
     margin-left:8px; 
     margin-top:12px; 
     margin-bottom:20px;}  
    /* LINKS */ 

    a.colman:link { color:#aeaeae; text-decoration:none}  /* unvisited link */ 
    a.colman:visited { color:#aeaeae; text-decoration:none} /* visited link */ 
    a.colman:hover {color:#0c3976; text-decoration:none} /* mouse over link */ 
    a.colman:active { color:#aeaeae; text-decoration:none} /* selected link */ 

    a.footerlinks:link { color:#FFFFFF;}  /* unvisited link */ 
    a.footerlinks:visited { color:#FFFFFF;} /* visited link */ 
    a.footerlinks:hover {color:#FFFFFF;} /* mouse over link */ 
    a.footerlines:active { color:#FFFFFF;} /* selected link */