• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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