Rendering Problem in IE7

Question

I have a little rendering problem with IE7 (as usual). Say there's a calendar control that looks like this:

<div class="calPager">
    <input type="submit" name="prev" value="Prev" class="pagerPrev" />
    <input type="submit" name="prev" value="Next" class="pagerNext" />
    August 2009
</div>

The CSS looks something like this:

.calPager {
    text-align: center;
    height: 30px;
    line-height: 30px;
}

input.pagerPrev, input.pagerNext {
    height: 30px;
    text-decoration: none;
    border: none;
}

input.pagerPrev {
    float: left;
    padding-left: 28px;
    background: url(../images/calPrevArrow.png) no-repeat;
}

input.pagerNext {
    float: right;
    padding-right: 28px;
    background: url(../images/calNextArrow.png) right no-repeat;
}

In IE8 and Firefox this looks fine, the buttons are floated to the left and the right and the month and year are centered. But IE7 doesn't center the text. What's going wrong here?

The interesting thing is that if you replace the input elements with links (as I did in another project) this stuff all displays just fine in IE7.

Another little issue, the IE Developer tools somehow stopped recognizing all but the first of my CSS files, so that hasn't been much help. The CSS tab seems stuck on "loading...". Anyone run into this issue too?

Answer 1

If you wrap the month and year in its own block-level tag it should work fine in ie7.

<h2>August 2009</h2>

With ie7 when you have floated elements as well as non-floated ones all on the same line it tends to have problems reading any sort of text-alignment.

I would put it in a header tag of some kind over a div because it gives it more meaning and purpose. Divs are just block level tags, header tags like h2's are block level and search engines see that they contain important information!

Answer 2

Try floating all inputs by putting them in separate containers

<div class="calPager">
   <div class="container">
       <div class="floatleft">
           <input type="submit" name="prev" value="Prev" class="pagerPrev" />
       </div>
       <div class="floatright">
           <input type="submit" name="prev" value="Next" class="pagerNext" />
       </div>
   </div>
</div>

.container{
    margin-left:auto;
    margin-right:auto;
    width: .. (if you like);
    /**/
}

.floatleft { 
    float:left;
}

.floatright {
    float:right;
}