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.
Related
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
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.
I do not understand why in this simple code my .slot or .card classes seems to have a bigger margin/distance to their border at the bottom than at the top.
Thanks in advance,
JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/
<div id="hand">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
</div>
<div id="playfield">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
<div class="slot" id="slot3"></div>
<div class="slot" id="slot4"></div>
</div>
The CSS:
#hand{
text-align: center;
width: 320px;
border: solid black 3px;
padding: 5px;
}
.card{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 5px 0px 5px;
}
#playfield{
width: 320px;
text-align: center;
border: solid black 3px;
padding: 5px;
}
.slot{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 5px 0px 5px;
}
Thanks in advance!
If you are not comfortable with making the font-size:0 then here is a solution that i personally prefer.
Display:inline-block is tricky and has strange issues with margins. What i personally do is, i use float instead of inline-block. See this :
.card{
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 10px;
float:left;
}
.slot{
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 8px;
float:left;
}
What i did is, i added float:left to your .slot and .card and then created a new class .cls(clear:both) and applied that in the div structure. See if this helps.
http://jsfiddle.net/LgeAf/3/
Inline-block elements are tricky - because they are not treated as block elements when it comes to positioning them in the document flow. Their positions and spacings are influenced by CSS properties that control text, like line-height, word-spacing, letter-spacing and font-sizes.
If you set font-size in the parent containers, #card and #playfield, to 0, you will remove the extra bottom margin. See fiddle - http://jsfiddle.net/teddyrised/GwqcV/
#hand, #playfield {
font-size: 0;
}
The drawback of this method is that you will have to redeclare the font-size in the child elements if you are using relative font sizes, like ems.
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/
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.