Does anyone know what css is needed to change the border color, width and radius of a WebOS Mojo palm-group?
for labeled group
.palm-group {
background-color: white;
-webkit-border-radius: 20px;
border-width: 40px 18px 18px 18px;
-webkit-border-image: url(../images/palm-group.png) 40 18 18 18;
}
for unlabeled groups :
.palm-group.unlabeled {
border-width: 18px 18px 18px 18px;
-webkit-border-image: url(../images/palm-group-unlabeled.png) 18 18 18 18;
}
I hope this helps someone.
Related
I have a mixin that splits items of a users choosing into an inline-block grid. Users can specify how many in a row, gutter and the child element to target.
This all works fine and an example is below:
Original - SCSS
#mixin list-grid($per-row, $spacing, $selector){
margin: 0 em(-$spacing/2);
#include clearfix;
//negate the display-inline biatch
letter-spacing: -0.31em;
> #{$selector} {
width: 100% / $per-row;
font-size: 16px;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
My question is.. When i try and use margin I need to rework the calculations as previously this worked because padding is not accounted when working out widths, whereas now with margin I need to adjust the widths to account for the chosen margin.
I'm not sure how to best approach this. Any help appreciated.
New Attempt - SCSS
#mixin list-grid($per-row, $spacing, $selector){
margin: 0 em(-$spacing/2);
#include clearfix;
//negate the display-inline biatch
letter-spacing: -0.31em;
> #{$selector} {
/* not sure what to do here */
width: 100% / $per-row -$spacing;
font-size: 16px;
position: relative;
margin: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
The latest attempt ends up with a width of 8% if I do a row of 3, with 25 gutter. My math must be way off.
Working example
I have a div rotated 45 degrees, with a border image on it.
In chrome and safari, it renders fine.
In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.
Here's the simple HTML:
<div class="container">
<div class="corner">
</div>
</div>
and here's the CSS:
.container {
margin: auto;
width: 400px;
height: 400px;
background-color: black;
outline: 1px solid #333333;
position: relative;
overflow: hidden;
}
.corner {
position: absolute;
bottom: -68px;
right: -66px;
width: 86px;
height: 82px;
background-color: #F1F2F3;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
border-width: 14px 16px 28px;
-moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
and here's a JSFiddle. Look at it in firefox to see what I mean:
http://jsfiddle.net/uAF2u/
I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.
Anyone run into this before and know of a way to sort it?
Adding a translateZ seems to quick in a more accurate display and solve the issue:
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);
updated fiddle
I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.
transform: rotate(0.0005deg);
FireFox 34
This works for me.
I had a very similar issue in Firefox, in which the transforming div was having a thin border outline, I fixed it by giving the div a transparent border.
May be this can help.
I have the same problem with Firefox and Safari. 1 thin line between sibbling divs.
Try also different combinations of:
border-radius: 2px 0 0 0;
or
border-radius: 0 1px 0 0;
on problematic element.
This seems to work primarily in Firefox and a bit in Safari.
In Safari you also have to cause overlapping positioned elements.
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
i need help...
take a view here...
http://jsbin.com/ititac/10/edit
as you can see the horizontal images already centered..
but the problem are the two vertical image are not centered...
also please take note they're just not a two images.
It could be a hundreds of sample images...
Thanks hope you can help me with this...
try this css: Hope it fixes your problem:
#product_thumbs .product_thumb {
float: left;
padding: 5px;
border: 1px dashed #B52020;
margin: 0 10px 10px 0;
width: 90px;
height: 90px;
overflow: hidden;
}
#product_thumbs .product_thumb img {
width: 90px;
position: relative;
top: 25%;
left: 30%;
height: 80%;
width: 90%;
margin: -15% 0 0 -25%;
}
and here is the demo
http://jsbin.com/ititac/18/edit
hope below link will be useful:
http://www.vanseodesign.com/css/vertical-centering/
Adding the following style to my page removes the rounded corners from FireFox and Chrome. (IE didn't have rounded corners to start with). In FireFox and Chrome it also removes the padding between the editor and the border but in IE it does not. I am totally stomped as to why the padding is not being removed in IE
span.cke_skin_kama
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
border: 1px solid #D3D3D3;
padding: 0px;
}
This solved the problem
span.cke_skin_kama
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
border: 1px solid #D3D3D3;
padding: 0px !important;
}