SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problem with rounded corners in chrome

    hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly
    with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there .
    here's a demo of my work :
    slideshow demo work
    Any help would be highly appreciated .

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Location
    Ho Chi Minh city, Vietnam
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why your page is not displayed correctly in Chrome but code which you use to make rounded corner works in Chrome. Following is modified codes from your page. It displays same in both Chrome and FireFox.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <style>
    body {
      margin: 0px;
    }
    #block-itunes {
      position: relative;
      width: 771px;
      height: 219px;
      background: #fff;
      margin: 0 auto;
    }
    #block-itunes img {
      display: block;
      border: 0 none;
    }
    #bi-max {
      -webkit-border-bottom-left-radius: 20px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
      overflow: hidden;
      -webkit-box-shadow: 0px 2px 5px #888;
      -moz-box-shadow: 0px 2px 5px #888;
      box-shadow: 0px 2px 5px #888;
      width:550px;
      float:left;
    }
    #bi-images {
      float:left;
      width:220px;
      -webkit-border-bottom-right-radius: 20px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
      overflow: hidden;
      -webkit-box-shadow: 0px 2px 5px #888;
      -moz-box-shadow: 0px 2px 5px #888;
      box-shadow: 0px 2px 5px #888;
    }
    </style>
    </head>
    <body>
    
    <div id="block-itunes">
      <div id="bi-max">
        <img src="http://anisa.me/work/images/melanie-max.png">
      </div>
      <div id="bi-images">
        <a href="http://anisa.me/work/#beyonce">
          <img src="http://anisa.me/work/images/beyonce-min.png">
        </a>
        <a href="http://anisa.me/work/#amelie">
          <img src="http://anisa.me/work/images/amelie-min.png">
        </a>
        <a href="http://anisa.me/work/#drhouse">
          <img src="http://anisa.me/work/images/dr-house-min.png">
        </a>
      </div>
    </div>
    
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, dthoai. That works well.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •