CSS problem in IE8

Question

I have this problem when using CSS in IE8. If I use CSS the textfields do not display on webpage. If I do not use CSS the textfields are displayed. All I'm doing is removing the styles from the HTML into a CSS file for 3 DIV's. Anyone know why I get this weird behavior?

The below part actually works. The style for "bannerOption1Div", "bannerOption2Div" and "bannerOption3Div" and in the HTML. The textfields are displayed and aligned.

<td align=center>
  <div class="bannerWrapper">
    <div id="bannerOption1Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption1Source" id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px;  padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption2Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption2Source" id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/> 
      <font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption3Div"  width="10%" align=center style="display:none">
      <input disabled=true type="text" name="bannerOption3Source" id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
  </div>
</td>

Now all I did for "bannerOption1Div", "bannerOption2Div" and "bannerOption3Div" divs is moved their styles into a CSS class called "bannerSection" which causes problems. The textfields are not displayed!! Any help appreciated. Thanks. Oh forgot, I have a javascript listener that will display those textfields when the page is done loading. So it will remove that display:none after page is done loading. This also applies to the above HTML where it works.

Below is my CSS and the HTML.

.bannerSection{
    width: 10%;
    text-align: center;
    display: none;
}

.bannerWrapper{
    margin-left: 10px;
    float:left;
    height: 100px;
}


<td align=center>
  <div class="bannerWrapper">
    <div id="bannerOption1Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption1Source" id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px;  padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption2Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption2Source" id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/> 
      <font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
    <div id="bannerOption3Div"  class="bannerSection">
      <input disabled=true type="text" name="bannerOption3Source" id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-bottom:0px; margin-bottom:0px;"/>
      <font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
  </div>
</td>

UPDATE: ok a few answers pointed out that Javascript is the problem. I think this is true. So I switched in my Javascript the display property for the DIV from " " to "block" and the textfields now display. But still the other two styles "width:10% and text-align: center" are broken. Do I have to manually set them again in Javascript? Do they get deleted by Javascript?

fieldElement.style.display = "block";

Answer 1

My guess is your javascript is setting the style property of the elements to an empty string.
Which works when the styles are inline, but not when they are in css.

If this is the case, telling the javascript to set display: static; as the value for the style property should work.

Answer 2

You need to set a width for .bannerWrapper That should make the percentage width and text-alignments of child elements make more sense.

Also, <font> tags make the baby jesus cry.

Answer 3

you have to wrap the css code in <style></style> tags

<style type="text/css">
.bannerSection{
    width: 10%;
    text-align: center;
    display: none;
}

.bannerWrapper{
    margin-left: 10px;
    float:left;
    height: 100px;
}
</style>