CODEWITHSUNDEEP
cssrounded-corners
user1559940
user1559940

Reputation:

CSS Rounding Works in Safari but not Chrome

I'm having an issue with some CSS I'm working on. The expected content is to be a containing box with four rounded corners that everything falls into. It works in Safari on the Mac, but not in Chrome or in iOS. In those browsers, the corners are squared for the .posttype and the image. I can't seem to figure out what is causing the issue. Any help will be great.

CSS:

.row { margin-bottom: 50px; }
.box { background: #eee; }
.shadow { -moz-box-shadow: 0px 3px 3px 0px #666; -webkit-box-shadow: 0px 3px 3px 0px #666; box-shadow: 0px 3px 3px 0px #666; }
.rounded { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: block; overflow: hidden; }
.posttype {
    float: right;
    position: relative;
    width: 150px;
    height: 150px;
    text-transform: uppercase;
    margin: -85px -85px 4px 4px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform:rotate(45deg);
    overflow: hidden;
}
.posttype > p { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    text-align: center;
    font-size: 24px;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    color: #fff;
    opacity: 0.3;
}
.meta {
    width: 110%;
    margin: 5px -8px -8px -8px;
    padding: 5px;
    background-color: rgba(255,255,255,0.8);
    box-shadow: inset -5px 1px 5px #555;
    font-size: 10pt;
    color: #555;
}
.photo { position: relative; }
.photo > p { padding: 0 8px; }
.photo > .meta { padding-left: 16px; padding-bottom: 16px; }
.photo > img, .photo > a > img { width: 100%; margin-bottom: 10px; }
.photo > .posttype { position: absolute; top: 0; right: 0; margin: -75px -75px 4px 4px; }

HTML:

<div class="row">
    <div class="span7 box rounded shadow photo">
        <img src="photo.jpg" alt="Alt" width="500">
        <div class="posttype"><p>photo</p></div>
        <p>This is a great picture.</p>
        <hr class="clear">
        <div class="meta">
            <ul>
                <li class="date"><i class="icon-time"></i> <a href="#" title="date">7/29/12</a></li>
                <li class="comments"><i class="icon-comment"></i> 3 Comments</li>
            </ul>
            <hr class="spacer">
            <ul class="tags">
                <li class="tags"><i class="icon-tags"></i></li>
                <li class="tag"><a href="#" title="Tag1">Tag1</a></li>
                <li class="tag"><a href="#" title="Tag2">Tag2</a></li>
            </ul>
        </div>
    </div>
</div>

Live demo: Tinkerbin

Upvotes: 4

Views: 326

Answers (1)

Raisch
Raisch

Reputation: 821

The round borders are behind the image, add a padding-top look at this http://tinkerbin.com/fLyD5Cuf

Upvotes: 2

Related Questions