Close Icon Not Showing

Posted on 2014-08-26
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.

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

Question by:DS928
    LVL 58

    Accepted Solution

    There is no element with a close class on the page

    Author Comment

    Ok.....So where would it go, please.

    Author Closing Comment

    Nevermind found it,  Thank you!
    LVL 58

    Expert Comment

    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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now