can't get images properly spaced

Hi!

On this page: http://www.topsecurityinc.com/alarm-monitoring.asp
I have three images in the middle of the page.
I can't seem to figure out how to get all three images centered horizontally.
The last two images are too close together.
I calculated from the left border there should be 61 pixels margin then the first image, then 61 pixels then the second image then 61 pixels then the third image and then 61 pixels to the right border..
Any corrections to the divisions would be appreciated.
TIA
TrueBlueAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
I don't think there is room for 61px all the way across, but how about this solution?
...

<div style="width: 100%;">

  <div style="float: left; margin-left: 48px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: right; margin-right: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

...

Open in new window

Tom BeckCommented:
This is little better. I just noticed why it did not work for you the first time. margin-left was spelled with two "t"s.
<div style="width: 100%;">

  <div style="float: left; margin-left: 47px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: left; margin-left: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

Open in new window

Tom BeckCommented:
Still does not work either way in IE compatibility mode though. Were you aware of this?
TrueBlueAuthor Commented:
tommyBoy,
Thanks for pointing the typo out. :)
Any idea why IE compatibility mode does not like the boxes?
Tom BeckCommented:
Easy fix (I hope).

Change these two rules from float:right to float:left.


.BoxbottomRightCorner{background:url(../web/images/Box_Bottom_Right_Corner.gif) no-repeat right bottom;float:left;}
.BoxtopRightCorner{background:url(../web/images/Box_Top_Right_Corner.gif) no-repeat right top;float:left;}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.