Wierd Border issue with IE

[dalar]

Hi everyone.

I've got a problem, basically I have a calendar generated via javascript, and has its own CSS style.

Today's date contains a 2px border around its cell, when hovering over any cell, the background should be light grey - this works well across all browsers.

When hovering over today's date, the background turns grey just like it and every cell should, along with this the border around todays date should also dissapear - this works too, however in IE it nudges everything around.

Ive searched the net for answers, I thought it was IE6's dreaded content box problem, but this is also happening in IE7!

In FF and other non-IE browsers its fine.

Any ideas?

* please see attached

attached within zip are:

+ html file
+ 1 js file for menu
+ 1 css file for menu
+2 images


Thank you for your help in advance!

[all4nerds]

Hello

debug on haslayout see sticky at the top of this forum

[rguy84]

Set the border gray on hover?

[dalar]

ok here we go,

you can see a live version at:

http://72.9.232.178/~dali/sitepoint/calendar.htm

Notice in firefox everything is perfect, but in IE as you rollover todays date "shown in a black border" the whole calendar jiggles!


The following is just the CSS ... I have not included the JS/HTML file that creates the menu because it isnt neccesarry to the problem. - However if you wish to run this on your local machine you will need to download the zip above which contains the js file in order to make it work.

table.calendar {
	/*font-family: Helvetica, Arial, sans-serif;*/
	font-size: 14px; /* was 0.8 by default */
	border-collapse: collapse;
	background-color: white;
	background-color: white;
	width: 158px;
	text-align: center;
	/*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/
	-moz-user-select: none;
	padding: 0;
    /*-khtml-user-select: none;*/
}
 
 
table.calendar input, table.calendar select {
	font-size: 10px; /* was 10 */
}
table.calendar td {
	border: 0;
	font-size: 10px; /* was 10 */
	text-align: center;
	padding-bottom: 0px;
}
table.calendar .mainheading {
	font-size: 1.2em;
	padding-left: 16px; /* So the month selector appears centre. */	
	padding-bottom: 0px;
	margin-bottom: 0px;
	vertical-align: bottom;
}
table.calendar .mainheading a {
	margin-left: 5px;
	margin-right: 5px;
}
table.calendar table td {
	padding-top: 5px;
	padding-bottom: 5px;
}
div.mainheading {
	margin: 2 2 0 2;
}
table.caldayheading {
	border-collapse: collapse;
	cursor: pointer;
	empty-cells: show;
}
table.caldayheading td {
	vertical-align: middle;	
	color: black;
	font-weight: bold;
	width: 19px; /*should match calendar cell's width*/
}
table.caldayheading td.wkhead {
	width: 21px;
	border-top: 0;
	border-left: 0;
	border-bottom: 0;	
}
table.calcells {
	border-collapse: collapse;
	cursor: pointer;
}
table.calcells td {
	border: solid #CCCCCC 1px;
	vertical-align: middle;		
	width: 19px;
	height: 15px; /*IE doesn't like ems*/
}
table.calcells td div {
	padding: 1px;
	margin: 0;
}
 
 
/* day cells in general */
table.calcells td.wkhead {
	background-color: white;
	text-align: center;
	width: 21px;
	color: black;
	border-top: 0;
	border-left: 0;
	border-bottom: 0;	
}
table.calcells td.wkday {
	background-color: white;
}
table.calcells td.wkend {
	background-color: white;
}
 
/* curr date */
table.calcells td.curdate {
 
	border: solid black 2px;
}
 
 
table.calcells td.cell_selected {
	background-color: #fdcf9e;
	/*font-weight: bold;*/
	color: black;
}
table.calcells td.notmnth {
	background-color: #FFFFFF;
	color: #CCCCCC;
}
table.calcells td.notallowed {
	background-color: white;
	color: #EEEEEE;
	font-style: italic;
}
 
/* the hover */
table.calcells td.hover {
	background-color: #CCCCCC;
}
 
 
 
div#dateSelector {
	border: 0;
}
#monthSelect, #yearSelect {
        display: none;
}

[dalar]

bump

[Paul O'B]

HI,

It looks a like JS issue to me where you are add .hover class but losing the .curdate class so the border disappears.

Bearing in ming I know nothing about javascript changing the code as follows seems to fix the issue.

CalCell.prototype.onmouseover = function () //replicate CSS :hover effect for non-supporting browsers <iehack>
{

    //reduce indirection:
    var cell = this.cellObj;
    var owner = cell.owner;
    
     if (cell.date.getYear() < owner.curDate.getYear()) {
        return;
    } else if (cell.date.getMonth() < owner.curDate.getMonth() &&
               cell.date.getYear() == owner.curDate.getYear()) {
        return;
    } else if ( (cell.date.getDate() < owner.curDate.getDate()) &&
                (cell.date.getMonth() == owner.curDate.getMonth()) &&
                (cell.date.getYear() == owner.curDate.getYear()) ) {
        return;
    }

    this.setAttribute('class',  this.className+=" hover");
    this.setAttribute('className',   this.className+=" hover");
    
};

It was previously:

    
    this.setAttribute('class',this.cellClass + ' hover');
    this.setAttribute('className',this.cellClass + ' hover');

However cellClass seems to be undefined but as I said I know nothing virtually nothing about javascript

[dalar]

Hello, that didnt fix the problem but thank you very much for helping me out on that, I have added the changes. - I've seen what you've seen in Firefox with the CSS debugger.

Anyways, I solved it .. in IE, is treated the general hover class (that makes all the cells grey on mouseover) as a new style completley, therefore losing its border...whilst firefox still retains its border.

It was solved by getting the Javascript to write an ID name onto the CUR_DATE cell so I could get a fix on it and apply a direct border style eg. #CurrentDayCell .... because its low level it now stays there even on hover.

Thanks a lot!