absolutely positioned tag not working in IE6

Question

This page http://winteradagency.com/Arvin/incentives/lenders.htm looks good in all browsers except IE6. The thing that is going wrong are the big words that need to be on top of the picture in the center that say "Deductions for Lenders". In IE6 they are going way off to the right causing the browser window to have a horizontal scroll.

I need to use 2 different instances of these words to create a faux drop shadow look. So one is over the top of the other but one pixel off in both directions.

I am using this html code:

<div id="centerInc">
  <p class="centerAlign3">Deductions for Lenders</p>
  <p class="centerAlign2">Deductions for Lenders</p>
</div><!--end center image div-->

and here is the css from styles.css on the site:

#container #centerInc {
 background-image: url(images/IncCenter.jpg);
 height: 183px;
 width: 875px;
 margin-top: 160px;
 float: left;
 font: bold 2.6em Georgia, "Times New Roman", Times, serif;
 color: #FFF;
 background-repeat: no-repeat;
 text-align: right;
 position: absolute;
}

.centerAlign2 {
 font: normal 1.15em Georgia, "Times New Roman", Times, serif;
 color: #FFF;
 position: absolute;
 width: 860px;
 margin-top: 115px;
}
.centerAlign3 {
 font: normal 1.15em Georgia, "Times New Roman", Times, serif;
 color: #000;
 position: absolute;
 width: 861px;
 margin-top: 114px;
}

Any ideas would be greatly appreciated. I am still a real rookie. thanks!

Answer 1

With position: absolute I would definitely specify x/y position (i.e. top and left), and I think I didn't see you doing that. As things stand, you're giving the browser free rein as to where to position those DIVs.

Answer 2

Clear your floats: Clearing a float container without source markup

You've got an extra </div> tag that might another problem, as well as a few other errors: [Invalid] Markup Validation of winteradagency.com/Arvin/incentives/lenders.htm - W3C Markup Validator

You might also need an IE6 specific style sheet: CSS - Conditional comments

Answer 3

Try specifying "overflow: hidden" in centerInc

I would solve this by creating a gif or jpeg. It will only be a matter of time before it does not work in ie9 or firefox 11 or new browser 0.5.