CODEWITHSUNDEEP
htmlcss
birchy
birchy

Reputation: 519

extending close window icon outside modal div

I'm probably making some stupid css error. I can't get the close window icon to appear outside the modal window, it clips off at the edge.

http://jsfiddle.net/4bBx3/

<div id="sendMsgForm" class="modal">
    <div class="closeBtn" >
        <a href="#" onclick=""><img src="close-icon.png" alt="Close Form"></a>
    </div>
    (content)
</div>

.modal 
    {
    background: #EEE ;
    -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
    border:solid 1px #ccc; 
    padding: 0;
    overflow: auto;
    z-index: 1001;
    position: fixed;
    min-width: 300px;
    max-width: 400px;
    min-height: 250px;
    top: 20px;
    left: 20px;
    }

.closeBtn
    {
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    z-index: 1002;
    }

Upvotes: 0

Views: 3124

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

It's being clipped off because you have overflow: auto; set on the modal. Change it to visible.

.modal {
    overflow: visible;
}

http://jsfiddle.net/4bBx3/3/

Upvotes: 1

Related Questions