私の日付ピッカーは他のすべてのブラウザーで正常に動作しますが、ie-8 ではテキスト ボックスをクリックすると日付ピッカーが表示されますが、スタイルはありません。
これは私のjspページです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@page import="pojo.AppointmentDetails"%>
<%@page import="pojo.MiniProvider"%>
<%@page import="pojo.MiniFacility"%>
<%@page import="pojo.Patient"%>
<%@page import="pojo.AppoinmentTimedetails"%>
<%@page import="pojo.AppointmentTypes"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GMQ Physician Associates</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.22.custom.css" />
<!-- <![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/basicnifo.js"></script>
<script type="text/javascript" src="js/datepicker2.js"></script>
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script src="js/jquery.validate.js"></script>
<!--<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
-->
</head>
<%
AppoinmentTimedetails appoinmentTimedetails=null;
Patient patient=new Patient();
patient.setsState("");
AppointmentDetails []appointmentDetails=null;
MiniProvider [] miniProviders=null;
MiniFacility[]miniFacilities =null;
AppointmentTypes []appointmentTypes=null;
miniFacilities=(MiniFacility[])request.getAttribute("miniFacilities");
if(miniFacilities==null){
miniFacilities=new MiniFacility[1];
miniFacilities[0]=new MiniFacility();
miniFacilities[0].setiFacilityId(0);
miniFacilities[0].setsFacilityName("");
}
miniProviders=(MiniProvider[])request.getAttribute("miniProviders");
if(miniProviders==null){
miniProviders=new MiniProvider[1];
miniProviders[0]=new MiniProvider();
miniProviders[0].setiProviderId(0);
miniProviders[0].setsProviderName("");
}
appointmentDetails=(AppointmentDetails[])request.getAttribute("appointmentDetails");
if(appointmentDetails==null){
appointmentDetails=new AppointmentDetails[1];
appointmentDetails[0]=new AppointmentDetails();
appointmentDetails[0].setsStatus("");
appointmentDetails[0].setsFacilityName("");
appointmentDetails[0].setsProviderName("");
appointmentDetails[0].setsStartTime("");
}
appointmentTypes=(AppointmentTypes[])request.getAttribute("appointmentTypes");
if(appointmentTypes==null){
appointmentTypes=new AppointmentTypes[1];
appointmentTypes[0]=new AppointmentTypes();
appointmentTypes[0].setiAppointmentTypesId(0);
appointmentTypes[0].setsCaption("");
}
/*appoinmentTimedetails=(AppoinmentTimedetails)request.getAttribute("appoinmentTimedetails");
if(appoinmentTimedetails==null){
appoinmentTimedetails=new AppoinmentTimedetails();
appoinmentTimedetails.setsLocation("");
appoinmentTimedetails.setsProvider("");
appoinmentTimedetails.setsVisitType("");
}*/
%>
<body>
<div id="main">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><img src="images/logo.jpg" width="385" height="97" alt="logo" /></td>
<td width="50%"><img src="images/people.jpg" width="327" height="97" class="m1" /></td>
</tr>
<tr>
<td colspan="2"><div class="m2">
<a href="#"><div id="home" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'home')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'home')">HOME</div></a>
<a href="#"><div id="service" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'service')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'service')">SERVICES</div></a>
<a href="#"><div id="provider" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'provider')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'provider')">PROVIDER</div></a>
<a href="#"><div id="register" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'register')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'register')">REGISTRATION</div></a>
<a href="#"><div id="faq" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'faq')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'faq')">FAQ</div></a>
<a href="#"><div id="contact" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'contact')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'contact')">CONTACT</div></a>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
<tr>
<td valign="top" class="m3">
<div class="m3a">Quick Menu</div>
<div class="m9">
<a href="Basic_info?action=basic"><div id="basic" style="background:url(images/basic-info-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/basic-info-bt2.png', 'basic')" onMouseOut="changeBgImage('images/basic-info-bt1.png', 'basic')">Basic Info</div></a>
<a href="Basic_info?action=appoinments:"><div id="app" style="background:url(images/appointments-bt2.png) no-repeat;" class="leftnav">Appointments</div></a>
<a href="newMessage.jsp">
<div id="newmess" style="background:url(images/new-message-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/new-message-bt2.png', 'newmess')" onMouseOut="changeBgImage('images/new-message-bt1.png', 'newmess')">New Message</div></a>
<a href="Basic_info?action=inbox:"><div id="inbox" style="background:url(images/inbox-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/inbox-bt2.png', 'inbox')" onMouseOut="changeBgImage('images/inbox-bt1.png', 'inbox')">Inbox</div></a>
<a href="Basic_info?action=outbox:"><div id="outbox" style="background:url(images/outbox-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/outbox-bt2.png', 'outbox')" onMouseOut="changeBgImage('images/outbox-bt1.png', 'outbox')">Outbox</div></a>
<a href="Basic_info?action=health-summary:"><div id="health" style="background:url(images/health-summary-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/health-summary-bt2.png', 'health')" onMouseOut="changeBgImage('images/health-summary-bt1.png', 'health')">Health Summary</div></a>
<a href="Basic_info?action=clinical-summary:"><div id="clinical" style="background:url(images/clinical-summary-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/clinical-summary-bt2.png', 'clinical')" onMouseOut="changeBgImage('images/clinical-summary-bt1.png', 'clinical')">Clinical Summary</div></a>
<a href="Basic_info?action=employer-guarantor:"><div id="gurantor" style="background:url(images/employer-gurantor-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/employer-gurantor-bt2.png', 'gurantor')" onMouseOut="changeBgImage('images/employer-gurantor-bt1.png', 'gurantor')">Employer Guarantor</div></a>
<a href="Basic_info?action=insurance:"><div id="insurance" style="background:url(images/insurance-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/insurance-bt2.png', 'insurance')" onMouseOut="changeBgImage('images/insurance-bt1.png', 'insurance')">Insurance</div></a>
<a href="Basic_info?action=patienthistory:"><div id="history" style="background:url(images/patient-history-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/patient-history-bt2.png', 'history')" onMouseOut="changeBgImage('images/patient-history-bt1.png', 'history')">Patient History</div></a>
<a href="Basic_info?action=logout:"><div id="logout" style="background:url(images/logout-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/logout-bt2.png', 'logout')" onMouseOut="changeBgImage('images/logout-bt1.png', 'logout')">Logout</div></a>
</div>
<div class="m8"> </div>
</td>
<td valign="top" class="m4">
<div class="m4a">Appointments</div>
<div class="m6">
<form action="#" method="post" name="reg" id="reg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="m12"><table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td style="width:15%;">Location</td>
<td style="width:35%;"><select name="Location" id="Location" class="drop2">
<option value="0">-Select-</option>
<% for(int i=0;i<miniFacilities.length;i++){%>
<option value="<%=miniFacilities[i].getiFacilityId()%>"<%if(patient.getsState().equals(miniFacilities[i].getiFacilityId())){out.println("selected='selected'");} %>><%=miniFacilities[i].getsFacilityName()%></option><% }%>
</select></td>
<td style="width:15%;">Provider</td>
<td width="25%" style="width:35%;"><select name="Provider" id="Provider" class="drop2">
<option value="">-Select-</option>
<% for(int i=0;i<miniProviders.length;i++){%>
<option value="<%=miniProviders[i].getiProviderId()%>"<%if(patient.getsState().equals(miniProviders[i].getiProviderId())){out.println("selected='selected'");} %>><%=miniProviders[i].getsProviderName()%></option><% }%>
</select><br><span id="username_warning" style="color:red"></span></br></td>
</tr>
<tr>
<td>Appointment Date Format</td>
<td ><span style="width:35%;">
<select name="Appointment" id="Appointment" class="drop2" >
<option value="0" selected="selected">-Select-</option>
<option value="Earliest available date" >Earliest available date</option>
<option value="Allow me to pick a Date" >Allow me to pick a Date</option>
</select>
</span></td>
<td id="AppointmentDate">Appointment Date</td>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="date" id="date" tabindex="1" class="m10 autocompletehealth" value="" /></td>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="button" name="button" id="button" value="SEARCH" class="bt-press" onclick=""onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" />
</td>
</tr>
<table id="divId" >
</table>
<tr >
<td></td>
<td valign="top" style="width:15%;"><br />
</td>
</tr>
</table></div></td>
</tr>
<input type="hidden" name="page" value="appoinments2" class="m10" />
<input type="hidden" name="value" value="" class="m10" id="value"/>
</table>
</form>
</div><!--
<div class="m7"> <br />
</div>
-->
</td>
</tr>
</table>
<!--<div class="foot">GMQ Physician Associates, 100-C, Foley, AL 3655 TEL: (456)789-2343 FAX: (456)789-2343</div>
-->
</div>
<script>
var count=0;
$(document).ready(function(){
//$("#date").hide();
//$("#AppointmentDate").hide();
// alert("");
$( "#date" ).datepicker({ minDate: 0 , dateFormat: "mm-dd-yy"});
});
$("#Appointment").change(function() {
// alert($(this).val());
// $("#date").removeAttr("disabled");
// $( "#Appointment" ).datepicker({ minDate: 0 , dateFormat: "yy-mm-dd"});
$('#Appointment').live('change', function() {
// alert($(this).val());
if ($(this).val() == "Allow me to pick a Date") {
$("#mm").show();
// $("#date").show();
// $("#AppointmentDate").show();
$("#date").datepicker({showOn:'both',dateFormat: "mm-dd-yy"}).focus();
}
if ($(this).val() == "Earliest available date") {
$("#mm").hide();
// $("#date").hide();
// $("#AppointmentDate").hide();
}
});
});
$('#next').live('click', function() {
//alert("next");
$("#username_warning").empty();
if($('#Provider').val()=="") {
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
if(count<1)
{
//alert(count+"less");
count=1;
}
else
{
count=count+1;
//alert(count+"grater");
}
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$('#back').live('click', function() {
//alert("aaaa");
$("#username_warning").empty();
if($('#Provider').val()=="") {
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
if(count<=1)
{
//alert(count+"less");
count=1;
}
else
{
count=count-1;
//alert(count+"grater");
}
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$("#button").click(function() {
$("#username_warning").empty();
if($('#Provider').val()=="") {
//alert("aaaa");
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
count=count+1;
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$('#date').change(function(){
//alert("change") ;
$('#value').val("0");
count=0;
//alert($('#value').val()+"change");
});
var select=false;
$("#appoinmentdate").live('click', function() {
// alert("inside");
select=true;
});
$("#reg").live('submit', function() {
//alert("true0");
if(select== true){
//alert("true");
}
else{
//$("#ps").attr("style=", "display: block;");
return false;
}
});
</script>
</body>
</html>
ie8 で動作している可能性のあるスタイルを取得するにはどうすればよいですか