SimpleModal1.4.2を使用しています。FFおよびSafariでは、隅にある[X]をクリックしてダイアログを閉じることができますが、IE 7、8、および9では、[X]は無効です。イライラするのは、私が別のWebサイトでSimpleModalを使用したことです。これはすべてのブラウザーで完全に機能しているため、CSSに何かが混乱していると思います。
コード内のさまざまな.divを削除して、問題の原因を絞り込むことができるかどうかを確認しようとしましたが、役に立ちませんでした。もう一組の目と専門知識をいただければ幸いです。これが私のCSSコードです：
* {
margin: 0;
}
html {
width: 100%;
background-image:url(../images/bg-pixel.jpg);
background-repeat: repeat;
height: 100%;
z-index: -5;
}
body {
background-image:url(../images/vert-gradient.jpg);
background-repeat: repeat-x;
min-width: 900px;
min-height: 775px;
width: 100%;
height: 100%;
z-index: -4;
position: relative;
}
#DDLogo {
padding-top: 104px;
height:530px;
margin-left: 25px;
position: relative;
}
#headWrapper {
height:86px;
width:100%;
margin: 0 auto;
position: absolute;
}
.pageTitle {
padding-top: 48px;
height: 38px;
position: absolute;
float: right;
display: inline;
right: 30px;
width: 400px;
}
.logo {
padding-top: 0px;
width: 252px;
float: left;
height: 86px;
position: absolute;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1.7em;
position: relative;
overflow-y: hidden;
}
.DDrawing {
width:100%;
height: auto !important;
height: 100%;
background-image: url(../images/davinci-drawing.jpg);
background-repeat:repeat-x;
filter: alpha(opacity=5);
-moz-opacity: 0.05;
-khtml-opacity: 0.05;
opacity: 0.05;
z-index: -1;
position:absolute;
overflow:hidden;
}
img {
border: none;
}
/* Content Pages */
#ContentArea {
width: 1200px;
height: 405px;
margin-top: 87px;
position: absolute;
}
.nonHeaderPadding {
float: left;
padding-top: 35px;
width: 1000px;
height: 2px;
clear: both;
}
.oneColumn {
padding-left: 65px;
padding-right: 30px;
float: left;
width: 600px;
}
.SideImage {
margin-left: 775px;
padding-top: 125px;
position: absolute;
z-index: 3;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}
/* Text */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
line-height: 125%;
color: #333333;
letter-spacing: 1px;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration:underline;
letter-spacing: 1px;
line-height: 125%;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #333333;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.750em;
color: #000;
text-decoration: underline;
letter-spacing: 1px;
line-height: 125%;
}
/* Menu */
div#NavContainer ul {
margin-top: 493px;
margin-left: -50px;
height: 36px;
width: 1000px;
text-align: left;
position:absolute;
}
div#NavContainer ul li {
display: inline;
list-style-type: none;
}
div#NavContainer ul li a {
text-decoration: none;
padding: 0;
border: none;
}
div#NavContainer ul li a:hover {
text-decoration: none;
padding: 0;
border: none;
}
img.nav {
border: none;
}
/* Footer */
#Footer, .push {
height: 1.7em;
clear:both;
}
p.Footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 8.5px;
color: #999999;
padding-left: 10px;
}
SimpleModalに付属するbasic.cssファイルを次のように変更しました。
/* Overlay */
#simplemodal-overlay {background-color:#333333; cursor:wait;}
/* Container */
#simplemodal-container {height:35%; width:40%; color:#fff; overflow:auto; background-color:#fff; border:#333333 thin inset;}
#simplemodal-container .simplemodal-data {padding:50px;}
#simplemodal-container a {color:#000000;}
#simplemodal-container a.modalCloseImg {background:url(../images/x.png) no-repeat; width:18px; height:18px; display:inline; z-index:3200; position:absolute; top:25px; right:25px; cursor:pointer;}
<!--[if lt IE 7]>
#simplemodal-container a.modalCloseImg {
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/x.png', sizingMethod='scale'
);
}
<!--[endif]-->
#simplemodal-container h2 {color:#333333;}
そしてここに私のhtmlコードがあります：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/davincid2.css" type="text/css" media="all" />
<link type="text/css" href="css/basic2.css" rel="stylesheet" media="screen" />
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type="text/css" href="css/basic_ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/rollover.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>DaVinci Digital | Innovative, Complete IT Solutions</title>
</head>
<body id="ourclients">
<div class="wrapper">
<div id="DDLogo">
<div id="headWrapper">
<div class="logo">
<a href="index.html"><img src="images/Davincid-logo.gif" align="left" alt="DaVinci Digital" /></a>
</div>
<div class="pageTitle">
<img src="images/titles/ourclients.jpg" alt="Your Team" height="38" align="right"/>
</div>
</div>
<div id="NavContainer" align="left">
<ul>
<li><a href="who-we-are.html"><img class="nav" src="images/menu/whoweare_up.jpg" alt="Who We Are" /></a></li>
<li><a href="what-we-do.html"><img class="nav" src="images/menu/whatwedo_up.jpg" alt="What We do" /></a></li>
<li><a href="your-team.html"><img class="nav" src="images/menu/yourteam_up.jpg" alt="Your Team" /></a></li>
<li><a href="our-clients.html"><img class="nav" src="images/menu/ourclients_down.jpg" alt="Our Clients" /></a></li>
<li><a href="helpdesk.html"><img class="nav" src="images/menu/davincihelpdesk_up.jpg" alt="DaVinci Helpdesk" /></a></li>
<li><a href="contact.html"><img class="nav" src="images/menu/contact_up.jpg" alt="Contact" /></a></li>
</ul>
</div>
<div class="SideImage"><img src="images/ourclients-image.gif" alt="Our Clients" />
</div>
<div id="ContentArea">
<div class="nonHeaderPadding">
<div class="oneColumn">
<a href="#" onclick="$('<div></div>').load('testimonial-greenhammer.html').modal();" class="basic">Green Hammer testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-agi.html').modal();" class="basic">Advanced Gastroenterology, PLLC / Advanced Endoscopy Center, PLLC testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-camphoward.html').modal();" class="basic">Camp Howard testimonial</a>
<p> </p>
<a href="#" onclick="$('<div></div>').load('testimonial-strait.html').modal();" class="basic">Strait Orthopedic Specialists, PS testimonial</a>
<p> </p>
</div>
</div>
</div>
</div>
<div class="DDrawing">
<img src="images/davinci-drawing.jpg" alt="DaVinci" />
</div>
</div>
<div id="Footer">
<p class="Footer">©2012 DaVinci Digital All Rights Reserved.</p>
<p class="Footer"> </p>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic3.js'></script>
</body>
</html>
私は本当にここで立ち往生しています！任意の洞察をいただければ幸いです。本当にありがとう！