Home/ Questions/Q 567275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:03:57+00:00

Consider the following <div style=width:150px;border:50px solid black>Test</div> If this is output onto a page

  • 0

Consider the following

<div style="width:150px;border:50px solid black">Test</div>

If this is output onto a page that IE8 renders in strict mode (or if you load into Firefox etc) then the inside of the div (the white area where test is) will be 150px wide but the div in total will be 50 + 150 + 50 = 250px wide (accounting for the border)

If this is rendered in Quirks mode then it will only be 50 + 50 + 50 = 150px wide.

The difference is in Quirks the width includes any border as explained here

If you are putting a html fragment onto a page and you do not know ahead of time which mode will be used are there any reliable hacks (css/javascript or otherwise) that will ensure that the div has the same overall dimensions in both Strict/Quirks mode on all major browsers (IE6/7/8, Firefox, Opera, Chrome)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I’ve got it cracked (tested on IE 6/7/8 quirks and strict mode and FF3.5)

    Quriks/Strict mode differ on the width of a div only if there are padding/borders involved.

    So make an outer div to set the width, then an inner div with the border.

    The inner div is constrained be the width of the outer div – and both quirks/strict modes will render the same size.

    i.e.

    <div style="width:150px;border:50px solid black">Test</div>

    becomes

    <div style="width:150px;">
   <div style="border:50px solid black">Test</div>
</div>
    • 0