[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Close Icon Not Showing

Posted on 2014-08-26
4
Medium Priority
?
140 Views
Last Modified: 2014-08-26
I have a popup thats suppose to have a close button in the upper right.  For some reason it's not showing up.

davidschure.com/about.html

If you click on any of the photos a popup comes up.
Here is the CSS
.close {
    background-image: url('fancybox_sprite.png');
	position: absolute;
    right: -15px;
    top: -15px;
    width: 36px;
	height: 36px;
	cursor: pointer;
	/*z-index: 8040;*/
	

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.close:before {
    background-image: url('fancybox_sprite.png');
	color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}

Open in new window


The rest of it.
<div id='market'><a href="#DSBio"><img src="about/AboutDS.jpg" alt="David Schure" /></a></div>
<a href="#x" class="overlay" id="DSBio"></a>
        <div class="popup">
            <h8>About David</h8><br>
            <h9>Polo has three different levels.  High, Medium and Low Goal.<br>•&nbsp;&nbsp;High Goal polo is considered to be for teams rated twenty goals or over.<br></h9></div>

Open in new window

0
Comment
Question by:DS928
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40286026
There is no element with a close class on the page
0
 

Author Comment

by:DS928
ID: 40286040
Ok.....So where would it go, please.
0
 

Author Closing Comment

by:DS928
ID: 40286054
Nevermind found it,  Thank you!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40286058
Remove your .close CSS and add this CSS (not sure if you are supposed to be wanting an image there

.popup:after {
    background: #fff;
    content: "X";
    height: 20px;
    position: absolute;
    right: -20px;
    top: -20px;
    width: 20px;
    text-align: center;
}

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question