I came across this problem, when I tried to use the leaflet markercluster plugin to display clusters in a map.
Here are two screenshots, one made in FF36 and the other in IE11
Firefox:
Internet Explorer:
Somehow it seems the border of the inner circle isn't displayed correctly.
I tried with background-clip and setting the border-color but that seemed to have no effect at all.
.circle {
width: 50px;
height: 50px;
border-radius: 25px;
background-color:rgb(181, 226, 140);
}
.circle div {
position: relative;
width: 30px;
height: 30px;
left: 10px;
top: 10px;
text-align: center;
border-radius: 15px;
background-color:rgb(111, 226, 140);
}
<div class="circle">
<div></div>
</div>
Related
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.
I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content. This is how I wish for it to be.
My issue is brought up when I re-scale the object to a size greater than the container. As shown by the image, clearly the object is larger than the container. As marked by the arrows and labels of "scrollable area", the container can scroll to these areas, but the parts labelled with "hidden" are not visible or accessible through the scroll due to their overflow.
For a practical view of my issue, here's a link to a codepen with my code:
CodePen
Snippets of my CSS code area as follows:
#container {
position: fixed;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin-left: 330px;
margin-top: 10px;
overflow: scroll;
display: block;
text-align: center;
}
#object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: rgba(255, 0, 255, 0.45);
margin-top: 40px;
border-radius: 25px;
transform: scale(3); /* This would be scale(1) on the small object */
}
This issue is holding back the development of my web app, so thanks in advance for your time and contributions.
My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:
#object2 {
position: relative;
width: 120px;
height: 120px;
display: block;
background-color: rgba(255, 0, 255, 0.45);
border-radius: 25px;
transform: scale(3);
transform-origin: 0 0;
}
Demo codepen
The title says it all, I've just discovered that IE (9 - 11) automatically applies about 50% opacity to any element's border with border-style: dotted.
The weirdest thing is, it only happens on dotted in particular, solid and dashed are fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
This appears to be due to IE anti-aliasing the dotted border. If you make the border-width bigger than 1px (say 5px) the border will appear white again.
One way to get around this would be to overlay some pseudo elements with the same dotted border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively you could try using border-image. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator) that would be able to help you generate a similar border using this method.
I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:
I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:
.projectshot a .over:hover{
position: absolute;
background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
This is the effect I wanted to achieve: http://bjorsberg.se/
The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???
Here is my JSFiddle:
http://jsfiddle.net/8fCMA/2/
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!
I would simplify the html structure if I were you, as it is not necessary.
e.g.: projectshot can look like this:
<div class="projectshot">
<a href="http://www.yahoo.com" target="_blank">
<img alt="Sushi" src="...">
</a>
</div>
and you can add the "cover" as :before pseudoelement.
Then - in css all you need to do is to add this to the "cover" element:
opacity: 0;
transition: opacity .2s;
and - on hover - change the opacity to 1:
opacity: 1;
here's the updated demo
(I've removed a lot of your html/css code just for demo purposes)
I've just made some small changes including:
Moving the hover to the .projectshot box.
Moving background-position and background-repeat to the non
hover definition.
Adding the transitions.
It works for now but you can still remove a lot of code. Even the html can be heavily reduced.
I suggest you to have a look at that too (DEMO).
.projectshot{
position: relative;
padding: 10px;
height: 150px;
margin-bottom: 30px;
display: inline-block;
}
.projectshot img{
height: 150px;
width: 200px;
border-radius: 8px;
-webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
-moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
box-shadow: 0 9px 13px rgba(0,0,0,.14);
}
.projectshot:hover .over{
background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
background-color: rgba(51, 51, 51, 0.6);
transition: all 0.5s ease-in-out;
}
.projectshot:hover {
cursor: pointer;
}
.over{
position: absolute;
border-radius: 8px;
height: 150px;
width: 200px;
box-sizing:border-box;
-moz-box-sizing:border-box;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.5s ease-in-out;
}
.inner{
background: rgba(113,122,137,.85);
border-radius: 8px;
width: 100%;
height: 100%;
display: none;
}
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
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/