I want to display a part of image in circle div. I have a code, but it doesn't work in Opera.
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
}
img {
margin-left: -75px;
width: 350px;
height: 90px;
}
HTML:
<div>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>
http://jsfiddle.net/vpfEY/6/
How can I fix it?
Check border-radius support hear also check this
Looking at you code it seems working i have tested it on chrome, firefox and opera. and its working.
If you are using the older version try using
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
NOTE But this is not required for morden browsers
I am unsure why an image would not respect the border-radius property. However I was able to get it to work using a background image.
HTML
<div></div>
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}
http://jsfiddle.net/vpfEY/18/
Related
Please bear with me as I'm new to IE11 debugging.
For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue
Currently part of my webpage is displaying that
This is ok.
However, when choosing through a different property, and clicking on one of the property this is what I have
From what I can see, the CSS is not used/read correctly by IE11.
This is my CSS
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.
.floor-details-item {
min-height: 160px;
width: 100% !important;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
When going through IE11 console when inspecting the element, this is what I have
Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.
Thank you for any insight you may provide.
update :
I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following
.floor-details-item {
min-height: 160px;
/*width: 100% !important;*/
/*adding auto and initial*/
width: auto;
width: initial;
But nothing so far.
Try to add min-width: 1px;. It saved my ass many times;-)
After many wrangles plus the help of my colleague, I found where the issue was located.
It was due to the css.
.floor-details {
width: 44%;
margin-left: 5px;
height: 555px;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
border: 1px solid #eeeeee;
border-left: 20px solid #C2EFDF;
overflow-y: auto;
padding: 5px;
//display: flex;
align-items: center;
flex-direction: column;
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
//display: flex;
min-width: 1px;
IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.
I got this simple css shape that should resemble a new moon, in chrome and firefox everything looks fine, but in safari the outline of the whole circle is visible - how can I make this new moon shape work in safari as well?
Img -> Current Safari result
.circle {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}
<div class="circle"></div>
This appears to be a bug in how webkit handles partial borders with border-radius set.
Here’s a method using box-shadow instead of borders, which I believe is visually similar:
.circle-box-shadow {
height: 50px;
width: 50px;
margin-left: 10px;
box-shadow: -10px 0 0 red;
border-radius: 50%;
}
.circle-border {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}
<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>
Tested in Chrome 70.0.3538.110 and Safari 12.0.1.
Here is my HTML code:
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
</div>
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
</div>
And this is my CSS code:
.boxed {
width: 100px;
height: 100px;
border: 2px solid #3eade1;
border-radius: %50;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: table-cell;
border-spacing: 10px;
}
.boxed img {
opacity: 0;
filter: alpha(opacity=0);
}
And this is the output:
I'm trying to add some spaces between two divs, but I couldn't manage to do it by looking at the answers for older questions in here. Is there any way to achieve this?
If you must keep the display: table-cell then you can use the border to separate the <div> elements. This means to keep, or to emulate, the original border we need to use an inset box-shadow and then also clip the background so that it doesn't extend under the transparent borders (that we're using as spacers). Your original CSS is therefore amended to the following:
.boxed {
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: table-cell;
box-shadow: inset 0 0 0 2px #3eade1;
border: 5px solid transparent;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
JS Fiddle demo.
References:
background-clip.
box-shadow.
I have a different approach, normally display: table-cell value doesn't work with margins. Instead you can use display: inline-block; if you are OK with that then you can apply margin.
.boxed {
width: 100px;
height: 100px;
border: 2px solid #3eade1;
border-radius: %50;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: inline-block;
margin-left:5px;
margin-right:5px;
}
JS Fiddle DEMO
You can also check margin is compliant with which display values here.
If you want to put names underneath your pictures you can also check my second option. You can put spans and change their position as absolute and put some margins on it.
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
<span>Prince Charles</span>
</div>
span
{
position: absolute;
margin-top: 110px;
}
The result will be like this.
JS Fiddle for second option.
It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):
firefox
In Chrome and Safari the insides of the border are square for some reason:
chrome
Here is my CSS:
.header {
width: 850px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
margin-top: 20px;
}
Any ideas?
EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/
It's a known Webkit and Opera bug: https://bugs.webkit.org/show_bug.cgi?id=23166
Until it's fixed, your only way around it is using 2 elements I'm afraid...
If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.
I think this is normal Webkit behavior when clipping to the box's padding. The padding is square, i.e., not defined by the border's curves, and so the background color overlays portions of the border.
Try this instead (via a SPAN nested inside your DIV):
CSS:
body {
background-color: #999;
}
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
margin-top: 20px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
.header span
{
background-color: #F7F7F7;
display: inline-block;
width:100%;
border-radius: 20px 20px;
}
HTML:
<div class="header">
<span>DataLog</span>
</div>
Side Note: Aside from your code, I didn't bother adding all the vendor prefixes; I'll leave that to you.
Or you can just use a box-shadow and adjust the top margin. My example only includes the -web-kit versions
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-webkit-border-radius: 40px;
-webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
margin-top: 40px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
Here is a similar JSFiddle to your first example using only your original div
I have been experiencing a similar issue. It turned out that because the container inside the container that i have added with the border-radius has a background-colour, it covers the inside of the border.
To rectify this i have added a border-radius to the child object as well as it makes it look the same.
I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?
Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.