CSS tweaks for browser compat

jonleighton · Apr 8, 2009 · b860654 · b860654
1 parent 14b513f
commit b860654
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/date_input.css b/date_input.css
@@ -23,6 +23,11 @@
   z-index: 99999;
   display: none;
 }
+  .date_selector .nav {
+    overflow: hidden;
+    width: 17.5em; /* 7 * 2.5em */
+    padding: 0 4px; /* Compensates for cell borders */
+  }
   .date_selector .month_nav, .date_selector .year_nav {
     margin: 0 0 3px 0;
     padding: 0;
@@ -33,10 +38,12 @@
   .date_selector .month_nav {
     float: left;
     width: 55%;
+    margin-left: -4px; /* Counter balances the padding of .nav */
   }
   .date_selector .year_nav {
     float: right;
     width: 35%;
+    margin-right: -4px; /* Counter balances the padding of .nav */
   }
   .date_selector .month_name, .date_selector .year_name {
     font-weight: bold;

diff --git a/jquery.date_input.js b/jquery.date_input.js
@@ -37,13 +37,15 @@ DateInput.prototype = {
     $(".prev", yearNav).click(this.bindToObj(function() { this.moveMonthBy(-12); }));
     $(".next", yearNav).click(this.bindToObj(function() { this.moveMonthBy(12); }));
 
+    var nav = $('<div class="nav"></div>').append(monthNav, yearNav);
+
     var tableShell = "<table><thead><tr>";
     $(this.adjustDays(this.short_day_names)).each(function() {
       tableShell += "<th>" + this + "</th>";
     });
     tableShell += "</tr></thead><tbody></tbody></table>";
 
-    this.dateSelector = this.rootLayers = $('<div class="date_selector"></div>').append(monthNav, yearNav, tableShell).insertAfter(this.input);
+    this.dateSelector = this.rootLayers = $('<div class="date_selector"></div>').append(nav, tableShell).insertAfter(this.input);
 
     // The ieframe is a hack which works around an IE <= 6 bug where absolutely positioned elements
     // appear behind select boxes. Putting an iframe over the top of the select box prevents this.