Right Column Shifts Up In IE7 Only!

I am having a problem with my CSS. In IE7 only my right column shifts up. IE6/8 look fine, as well as Firefox, Safari & Chrome.
Here is a live link: http://eagleridge.blueicegraphix.com

Here is an image of the issue in IE7.

The right column id is “rightColumn-Index”

HTML Code:

<!-- Right Side –>
<div id=“rightColumn-Index”>

&lt;!-- Square 1 --&gt;
&lt;div id="rightSquare6-index"&gt;
  &lt;p class="bodyText"&gt;&lt;a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/orderOnlineGraphicDown.gif',1)"&gt;&lt;img src="images/orderOnlineGraphicUp.gif" alt="Order" name="Order" width="275" height="150" border="0" id="Order" /&gt;&lt;/a&gt;&lt;/p&gt;

</div>

<!-- Square 1 –>
<div id=“rightSquare5-index”>
<p class=“bodyText”><a href=“promotion.html” target=“_blank” onmouseover=“MM_swapImage(‘Promotion’,‘’,‘images/promotionalAd1Down.gif’,1)” onmouseout=“MM_swapImgRestore()”><img src=“images/promotionalAd1Up.gif” alt=“Promotion” name=“Promotion” width=“275” height=“150” border=“0” id=“Promotion” /></a></p>
</div>

&lt;!-- Square 2 --&gt;
&lt;div id="rightSquare2-index"&gt;
&lt;a href="sinar_mas.html" onclick="MyWindow=window.open('sinar_mas.html','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=600,height=650'); return false;"&gt;&lt;img src="images/sinarMas.gif" width="275" height="115" alt="sinar mas" /&gt;&lt;/a&gt;

</div>

&lt;!-- Square 3 --&gt;
&lt;div id="rightSquare3-index"&gt;
  &lt;p class="bodyText"&gt;&lt;span style="color:#E48700"&gt;&lt;strong&gt;How to Buy&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;br /&gt;
  &lt;p&gt;
  &lt;span class="greenText"&gt;&gt;&lt;/span&gt;&lt;span class="lightGreyLinkUnderline"&gt;&lt;a href="credit_application.html"&gt; Fill out a credit application&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;span class="greenText"&gt;&gt;&lt;/span&gt; &lt;span class="lightGreyLinkUnderline"&gt;&lt;a href="http://www.eagleridgepaper.org/paperordersystem/"&gt;Log on to your account&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;span class="greenText"&gt;&gt;&lt;/span&gt; &lt;span class="lightGreyLinkUnderline"&gt;&lt;a href="account_management.html"&gt;Locate a sales rep&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;span class="greenText"&gt;&gt;&lt;/span&gt; &lt;span class="lightGreyLinkUnderline"&gt;&lt;a href="products.html"&gt;Check paper specs in your location&lt;/a&gt;&lt;/span&gt;      
  &lt;br /&gt;
  &lt;/p&gt;
  &lt;div class="textLinkUnderline"&gt;Need help? &lt;a href="customer_care.html"&gt;&lt;span style="color:#658B1C"&gt;Contact customer care.&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;!-- Square 4 --&gt;
&lt;div id="rightSquare4-index"&gt;
  &lt;p class="bodyText"&gt;Our Commitment&lt;/p&gt;&lt;br /&gt;
  &lt;p style="color:#E48700"&gt;Paper Quality&lt;/p&gt;
  &lt;p style="color:#CCC"&gt;We stand behind our paper to ensure printability, and smoothness.&lt;br /&gt;&lt;br /&gt;
  &lt;/p&gt;
  &lt;p style="color:#E48700"&gt;Customer Care&lt;/p&gt;
  &lt;p style="color:#CCC"&gt;We are here to provide world-class support for you business needs.&lt;/p&gt;&lt;br /&gt;
  &lt;p&gt;&lt;span style="color:#E48700"&gt;Sustainability&lt;/span&gt;&lt;/p&gt;
  &lt;p style="color:#CCC"&gt;We only buy wood and paper products from sustainably managed forests.&lt;/p&gt;
  &lt;p style="color:#CCC"&gt;&lt;br /&gt;

</p>
</div>
</div>

CSS Code:

@charset “UTF-8”;
#rightColumn-Index {
float: right;
height: auto;
width: 275px;
}

Wow you hit that dead on! Thanks a lot, it works perfectly now!!!

Hi,

You’ve set a height for bannerIndex that doesn’t match the content. Remove the height as it is not needed.


#bannerIndex {
[B]    /*height: 240px;*/[/B]
    width: 1000px;
/*(vertical-align: middle; doesn't apply to block elements*/
    float: none;
    clear: both;
    /*bottom: 0px; doesn't apply to non positioned elements*/
}