arian/mootools-datepicker — Issue #92: Datepicker layout breaks in IE7 when using tables elsewhere on the site
Author: huibvg
Created: 2011-12-12 13:10:51+00:00
State: open

I noticed that in IE7 my datepicker layout is broken when opening it. It only showed the monday td's (and had a witdh of about 135 px), effectively pushing all other td's out of the container.

Thankfully I was able to find the souce of this problem

In my css, I use this declaration:
table { width: 940px }

This works correctly alongside datepicker in all browsers, EXCEPT ie7.
What happens:

- IE7 reads that all tables are 940px
- IE7 reads that the datepicker td should be 23px ( datepicker css; see below )
- IE7 overrules the td width of 23px with the accumulated width of all tables (940/7 = 135px each) -- IE7 acts as if it does not understand td width declarations

.datepicker_vista .days .day {
float: left;
text-align: center;
overflow: hidden;
width: 23px;
height: 15px;
margin: 0 1px 1px 0;
}

The fix is simple:
add this css to the datepicker stylesheet and the problem is gone.

.datepicker_vista table {
width: auto;
}

I think it would be a good thing to pull this as well.