Tables inside divs not the same size as divs inside divs?_问答_开发者

When I set the outside div to 100% and both the inside div and table to 100% the internal table is not the same size as the internal div. The internal table is about 2px less to the right. Anyone know why this happens?

Also on the 2nd table in IE there is a big gap between the infobar2 and the table, I have no idea why. Any helps is much appreciated

Here is the actual code:

/*-------------------------------------------Main Content---*/

#mainContent {

 float: left;

 width: 79%;



}

 /*---Top Nav---*/

 #mainContent #topNav {

  border: 1px solid #8AD12B;

  float: left;

  width: 100%;

  background: #fff;

  padding-bottom: 7px;

  margin-bottom: 10px;

 }

  #mainContent #topNav h1 {

   background: #D7EFB6;

   padding: 6px 15px;

   border-bottom: 1px solid #8AD12B;

  }

  #mainContent #topNav div {

   padding: 10px;

   width: 80%; 

   float: left;

   margin-right: 0px;

   margin-left: 8px;

   display: inline; /* for IE 6 and below */

  }

  #mainContent #topNav div.topnav1 {margin-left: 15px;}

  #mainContent #topNav div.topnav3 {width: 80%;margin: 0;}

  #mainContent #topNav div h2 {padding: 10px 0 7px;}

  #mainContent #topNav div ul {

   list-style: none;



  }

  #mainContent #topNav div ul li {

   margin-bottom: 0.40em;

   color: #7d7d7d;

   font-size: 85%;

  }

  #mainContent #topNav div ul li a {

   color: #6EA427;

   font-size: 120%;

  }



 /*---Info Bar---*/

 #mainContent #infoBar {

  background: #D7EFB6;

  border: 1px solid #8AD12B;

  float: left;

  widt开发者_如何学JAVAh: 100%;

  margin-bottom: 10px;

 }

  #mainContent #infoBar h1 {padding: 6px 15px;}

  #mainContent #infoBar h1 span {

   font-weight: normal; 

   padding-left: 78px;

   color: #666;

  }



 #mainContent #infoBar2 {

  background: #D7EFB6;

  border: 1px solid #8AD12B;
  border-bottom: 0px;

  float: left;

  width: 100%;

 }

  #mainContent #infoBar2 h1 {padding: 6px 15px;}

  #mainContent #infoBar2 h1 span {

   font-weight: normal; 

   padding-left: 78px;

   color: #666;

  } 




/*-------------------------------------------Left Nav & Right Nav---*/




  * html #mainContent table  {width: 100%;} /* Hack for IE 6 and below */

  #mainContent table  {

   background-color: #fff;
   padding: 3px 15px 10px 22px;

   margin-bottom: 10px;   
   border: 1px solid #8AD12B;
   width: 100%;

   list-style: none;



  }


  #mainContent table td {

   padding: 0px 4px 4px 10px;

   margin-bottom: 0.20em;

   color: #7d7d7d;

   font-size: 85%;

  }

  #mainContent table td a {color: #6EA427;font-size: 120%;}

</style>


<body>  <!--Main Content-->
        <div id="mainContent">
            <div id="topNav">
                <h1>Find great things.. </h1>
                <div id="topNav3">
                    Find  great things
                    <br/>
                </div>                      
            </div>          
            <div id="infoBar2">
                <h1>a</h1>  
            </div>      
            <table>
                <tr>
                    <td><a href="#">asd</a></td>
                </tr>
            </table>    

            <div id="infoBar2">
                <h1>b</h1>  
            </div>  
            <table>
                <tr>
                    <td><a href="#">bcv</a></td>
                </tr>
            </table>        </div>

<!--//Wrapper-->
</body>

Some possible remedies:

CSS Margins

the table could have a margin set that the div doesn't. Try this css:

table {
    margin: 0px;
}

EDIT: Or if your div is the one with the margin, replace table by div in the above css.

CSS Box-Model

There are differences between the different CSS box models, for example Mozilla Firefox uses by default the content-box model. This may have confusing results when applying borders to elements. I believe IE uses the border-box model by default.

To "sanitize" the box model, you can add this to your CSS:

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This sets the box model to border-box for all html elements in Mozilla and CSS3 compatible browsers.

This is happening because your "find great things.." div is inside of an extra div. In order to remedy this the table needs to go inside of another div with a style having a 1px border, float:left, width:100% and a border of 1px. Also when doing this, take the border off the table since the new div will be handling it. Take a look at what I have below and that should give you a good example.

 #mainContent #infoBartest {
      border: 1px solid #8AD12B;
      border-bottom: 0px;
      float: left;
      width: 100%;
     }

    <div id="mainContent">
       <div id="topNav">
        <h1>Find great things.. </h1>
        <div id="topNav3">
         Find  great things
         <br/>
        </div>      
       </div>   
       <div id="infoBar2">
        <h1>a</h1> 
       </div> 
   <div id="infoBartest">
    <table>
     <tr>
      <td>
      <a href="#">asd</a>
      </td>
     </tr>
    </table> 
    </div>
      </div>

check margin and padding

You also might want to check display. I've had issues in certain browsers with extra pixels being added to tables if they weren't set to.