Safari display

HTML & CSS
1

Hello All,

here is my code to display the picture. When i am seeing it in chrome, its good… But again in safari, edges are visible with gaps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
body {
  height:100%;

}
.profile-picture {
	border-radius: 100%;
	overflow: hidden;
	-webkit-box-sizing: content-box;
  	-moz-box-sizing: content-box;
  	box-sizing: content-box;
	
	
}
	.big-profile-picture {
		margin: 0 auto;		
		border: 5px solid #50597b;
		width: 150px;
		height: 150px; 
	}
.block {
			margin-bottom: 25px;
			background: #394264;
			border-radius: 5px; margin-top:1%;
		}
		.clear {
	clear: both;
}
</style>
</head>
    <body>
                  <div class="profile block"> <!-- PROFILE-->
                    <div class="profile-picture big-profile-picture clear">
                        <img src="css/clicks/3.jpg" width="150">
                    </div>
                </div><!--END OF PROFILE-->
            </div> <!--END OF MIDDLE CONTAINER -->
      </div> <!-- end main-container -->
    </body>
</html>

here is result :

1326×726 81.7 KB

first of opera.

2

Which Opera?

Old Opera (running Presto like what I have) doesn’t do content-box stuff. Our old webshops had

  • {box-sizing: content-box;}
    this broke everything on Opera, IE and who knows what other browsers. I removed it, all of it.

I’ve also had to explicitly override content-box for Chrome and Blink browsers which is added by the browser stylesheet to buttons, which did not allow me to correctly width and style buttons in widgets.

content-box is a shortcut for people who could never wrap their heads around the original box model. I suggest trying your images without it, and seeing if it works better (simply because, possibly the version of Opera you’re looking at does not support this… current versions of Opera should, because they’re now Blink browsers and Blink supports the content-box stuff).

3

I don’t think you validated your code before posting the example.

Not sure how your page is supposed to work, so this is a guess.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>

body {
/*    height:100%;  /* appears to be unnecessary */
}
.block {
    background:#000;
    border-radius:5px;
    margin-top:1%;
    margin-bottom:25px;
}
img {
    display:block;
    border:5px solid #f0f;
    border-radius:50%;
    background:#fff;
    margin:0 auto;
}
    </style>
</head>
<body>

        <div class="block">
            <div class="profile-picture big-profile-picture">
                <img src="http://placehold.it/150x150/" alt="description">
            </div>
        </div> <!-- .profile -->

</body>
</html>

Please identify the versions of Chrome and Safari that your are using and your operating system.

4

its also giving the same result in safari… sorry i wrote opera above, its safari

5

Please identify the versions of Chrome and Safari that your are using and your operating system.