• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 201
  • Last Modified:

text pushing images

Hi!
The text on this page: http://www.topsecurityinc.com/alarm-monitoring.asp
starting with "Depending ..." is supposed to be below the three images not next to them.
I tried a new division and then a page break but it still does not work in IE9.
Any specific corrections would be appreciated.
0
TrueBlue
Asked:
TrueBlue
  • 4
  • 3
  • 2
2 Solutions
 
Tom BeckCommented:
I think you just need to add a pixel or two to each div holding the images until the text drops down below.
0
 
jonahzonaCommented:
Right after your p class of main 2, you have a div wrapping all 3 images.

Currently, it says: <div style="width: 100%;">

Change it to <div style="width: 100%; float: left;">

and you'll be golden!
0
 
jonahzonaCommented:
Here is a screenshot with the above code applied.


ee1.jpg
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jonahzonaCommented:
It does look like you will have to adjust margins for those pics. They aren't quite centered.
0
 
jonahzonaCommented:
I changed the margin-left on those three pic divs to the following in order from left to right:

49px

78px

78px;

Looks good then.
0
 
TrueBlueAuthor Commented:
tommyBoy,

Any idea why the division that contains a top margin setting that I put around the "Depending ..." text works in the compatibility mode but not in IE9?
TIA
0
 
Tom BeckCommented:
Rather that put a top margin on the "Depending..." text, incorporate @jonazona's first suggestion of putting a foat:left in the image row wrapper <div style="width:100%...

But, in addition to that, give the div a height. 175px seems to work well and gives you the space you are seeing in compatibility mode between the image row and the main8 header.

The whole section with the three images and main8 header under it now looks like the snippet below.

Also, the first div's margin-left has to be less than the other two on the image row to compensate for default padding. I have it at 45px while the other two are 50px.

One last thing. There is an extra </div> at the very bottom of the page.
<div style="width:100%;float:left;height:175px;">

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

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

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

               </div>

          </div>

      </div>

   </div>

  </div>

</div>   


  <div style="margin-top:0px;">

   <p class="main8"><span>Depending on the system &amp; service you have, home / business security monitoring can offer the benefits of:</span></p>

</div>

Open in new window

0
 
TrueBlueAuthor Commented:
tommyBoy,
I went with your original suggestion for the margins of the boxes:
49px 78px 78px;  
I added the float:left and the height and changed to margin-top to zero, but the text is still too close to the images. I have uploaded the changes.
Any ideas?
TIA

0
 
Tom BeckCommented:
49px 78px 78px; was @jonahzona's suggestion, but that works fine.

To get more gap, just increase the div height for the image row container. You have it at 178px, try 188px;

<div style="width:100%;float:left;height:188px;">

...

</div>
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now