I have a dynamically created HTML page through Javascript. The page runs perfect in IE7 mode but when the same CSS is used in IE8 mode it will not show any borders and I am trying to create a Highlight function which will not work in IE8 also. Any help would be great.
THE JAVASCRIPT WHICH CHANGES THE CSS FOR THE BORDERS TO MAKE THE ROW HIGHLIGHT IS:
/**
* Initializes the right click action for this row.
* @param person - The person associated to this row.
*/
this.initializeRightClick = function(personId, encounterId) {
var row = $(PersonTable.table.children()[0].rows[this.index]);
var index = this.index;
row.mousedown(function(event) {
switch (event.button) {
case 2:
clearPersonTableHighlights();
var thisRow = $(PersonTable.table.children()[0].rows[index]);
thisRow.children().css("border-bottom", "1px solid #3380EF");
var previousRow = PersonTable.table.children()[0].rows[index - 1];
if(index > 0) {
$(previousRow).children().css("border-bottom", "1px solid #3380EF");
}
else {
thisRow.children().css("border-top", "1px solid #3380EF");
}
thisRow.css("background-color", "#E6EEF7");
RightClickMenu.display(event, personId, encounterId);
event.stopPropagation();
break;
}
});
}
THE CSS WHICH IS AFFECTED IS:
It tries to change the css of all the children of one row, there are nine children :
.person-table-location{width:100px; border: 1px solid white; border-right:1px solid #DCDCDC; border-bottom:1px solid #FFFFFF; position:relative;}
.person-table-person{border:1px solid white; border-right:1px solid #DCDCDC; border-bottom:1px solid #FFFFFF; position:relative;}
The First screen shot is IE8 for any row except for the last row. The second screen shot is the last row The Third screen shot is IE7 mode and that is what I want.
Any help would be great
