Making IE and Mozilla display your box objects the same way

[MidiMagic]

You've had the same problem many times. You specify the size of your object on the page, or specify the amount of space it should take up. But you also specify margin, border, or padding sizes other than zero. Now your settings work on one of the two main browsers, but are messed up on the other.

It's not your fault. The two major browser companies can't agree on whether the width and heit attributes include or exclude the margin, border, and padding.

But you CAN make both browsers behave the same when displaying your page. Use the following tricks:

Put these in your CSS:

.fixbox {margin: none; border: none; padding: none; width: wwww;}
.marbox {margin: xxxx; border: yyyy; padding: zzzz;}
.cenimg {text-align: center;}
.imgcen {clear: both;}

Use wwww for the width you actually want for the contained object, or the actual space you want everything to fit in.

Use xxxx, yyyy, and zzzz for the actual margin, border, and padding styles you want around your object, but inside the total space. They can be the multiple values used for different values on each side if you want. They can be absolute or relative.

The last two styles are needed only if you want to centar an image.

To specify the exact absolute or relative size of the contained object, use the following code:

<div class="marbox">
  <div class="fixbox">
    <!-- put your object here. I used img as an example -->
    <img src="mypic.gif" alt="my picture of my hand" />
  </div>
</div>

To specify the exact absolute or relative size the entire object, including its margin, border, and padding use up, use the following code:

<div class="fixbox">
  <div class="marbox">
    <!-- put your object here. I used img as an example -->
    <img src="mypic.gif" alt="a picture of my hand" />
  </div>
</div>

To center an image inside a specified space, do the following:

<div class="fixbox">
   <div class="marbox cenimg">
     <!-- put your object here. I used img as an example -->
     <img src="mypic.gif" alt="pic of my hand" class="imgcen" />
   </div>
 </div>