I'm working with SimpleModal 1.4.2. In FF and Safari, one can click on the "X" in the corner to close the dialog, but in IE 7, 8, and 9, the "X" is ineffectual. What's frustrating is that I've used SimpleModal on another website, and it's working perfectly on all browsers, which leads me to believe that I have something in my css that's messing it up.
I've tried eliminating different .divs in my code to see if I can narrow down the cause of my issue, but to no avail. Another pair of eyes and expertise would be much appreciated! Here is my CSS code:
* {
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;
}
I've modified the basic.css file that comes with SimpleModal as follows:
/* 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;}
And here is my html code:
<!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>
I'm really stuck here! Any insight would be greatly appreciated. Thanks so much!
