I'm doing a design using bordered div's, and have encountered a problem. In IE the border is included within the div's defined width. In Firefox it adds the border to the defined witdth.
This leaves me with two different sized bordered div's.
Anybody know of a fix to make them look the same in the different browsers?This could be a difference in fonts, we will need to seee the document to help.Here is an example:
some_div {
width:200px;
height:200px;
border:1px solid black;
}
In IE, this results in a bordered div 200px x 200px. In Firefox it gives me a bordered div 202px x 202px (The border-width added to the div's defined width). I need the div to have the exact same size in the different browsers.You are in 'quirks mode'. Use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) and read up on quirks and strict mode (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/quirksmode.html">http://www.quirksmode.org/css/quirksmode.html</a><!-- m -->)
This leaves me with two different sized bordered div's.
Anybody know of a fix to make them look the same in the different browsers?This could be a difference in fonts, we will need to seee the document to help.Here is an example:
some_div {
width:200px;
height:200px;
border:1px solid black;
}
In IE, this results in a bordered div 200px x 200px. In Firefox it gives me a bordered div 202px x 202px (The border-width added to the div's defined width). I need the div to have the exact same size in the different browsers.You are in 'quirks mode'. Use a valid DTD (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) and read up on quirks and strict mode (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/quirksmode.html">http://www.quirksmode.org/css/quirksmode.html</a><!-- m -->)