fmz 14

I created an expandable box on this page and it renders fine, but the read more link at the bottom is positioned badly in IE7. I have tried any number of options with margins and padding to get it to position correctly but it will not budge. I just need it to sit where it is now in Firefox or Safari.

Here is the html:

<div class="blue-box">
 <div class="blue-box-mid">
  <div class="blue-box-top">
   <div class="blue-box-bot">
    <p>IT Applications &amp; Systems - consolidate and centralize. Adopt pay-as-you-go models and reject long-term recurring licensing agreements that are &quot;insurance policies&quot; rather than value focused - Software-as-a-Services (SaasS) &amp; IT-as-a-Service  (ITaaS).</p>
   <p class="link-it"><a href="services.html">See More Tips</a></p>
  </div>
</div>

Here is the css:

.blue-box-mid       { width: 581px; background: url(../images/blue-box-mid.png) repeat-y top left ; }
.blue-box-top       { width: 581px; background: url(../images/blue-box-top.png) no-repeat top left; }
.blue-box-bot       { width: 581px; background: url(../images/blue-box-bot.png) no-repeat bottom left; }
.blue-box p         { padding: 10px 10px 0 10px; }
.blue-box p.link-it { padding: 0; margin-left: 470px; }

I have an IE7 specific stylesheet but I just need some help getting the right code in it. Thanks.

1 answer

1
point
This was chosen as the best answer

The problem is that the box for the quote is too tall, so it overlaps the label. Perversely removing the width from blue-box-mid, blue-box-top and blue-box-bot fixes the issue.

Answered about 6 years ago by John Catterfeld
  • Incidentally the layout works fine without the width in FF, Chrome, Safari and IE7, IE8 and IE9, so you don't need to use your conditional stylesheet (I haven't checked IE6). John Catterfeld about 6 years ago
  • John. Works perfectly. I never would have thought. Thank you for that. Please don't worry about ie6. fmz about 6 years ago