css issue on firefox, border not show correctly

Question

Hi, i got an issue on firefox, while all IE, Safari and chrome are working.

<div class="forDiv">ddd</div>
<table class="forTable"> .... </table>


.forDiv {
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
}

.forTable{
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
}

in firefox, the div is a bit smaller. how can i fix it?

Answer 1

.forDiv {
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
-moz-box-sizing: border-box;
}

.forTable{
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
-moz-box-sizing: border-box;
}

Answer 2

It's an inconsistency in how different browsers treat the width attribute - whether they include the border/padding dimensions in the width, or whether they consider them additional.

You can use the -moz-box-sizing attribute set to "border-box" to tell Mozilla-based browsers to emulate how IE does it in quirks mode (see this page for details).

Answer 3

Most likely has something to do with the margins or padding set in neighboring or containing elements. Hard to tell without the full context but also try setting the margin and padding attributes for the div and table and see what happens.

Answer 4

Ok, this appears to be the classic IE box-model inconsistency (or shall I say, bug?)

The simplest way around it is to define your div (the one containing ddd) inside a container div like this:

<div id="container">
  <div class="forDiv">ddd</div>
</div>

And define the CSS properties as follows:

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

This should give you the same size in both IE and Gecko.

Answer 5

Try overflow:hidden; i also had same problem. then i got this

link

from that i got soln. to make div's overflow:hidden and it worked fine for me.