I have created a custom class for some sliders.In chrome everything is working fine.See image below:
Chrome
My problem though is that on internet explorer i get this:
Now here is my css:
input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?
The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.here's an online demo
Related
I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
I'm having trouble with borders overlapping themselves because of the different width the border-top has.
Here is an example code of my problem:
http://jsfiddle.net/u7KhX/
.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;
As you can see the purple part is not complete.
Any Ideas?
You can make the top border a perfect rectangle and still have the other borders the way you want them by using the div's ::after pseudo element.
Put the top border on the div itself and the other three borders on the pseudo-element.
For example:
.border {
width: 200px; height: 200px; border-top:5px solid #894b9d;
padding: 0 1px 1px 1px;
position:relative;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:200px; height:200px;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
See updated fiddle.
Edit:
Or if you don't want to rely on a given width and height, like this:
.border {
display:inline-block;
position:relative;
padding:.5em;
border-top:5px solid #894b9d;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:100%; height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
I've made it an inline-block, to show that it works fine with dynamic content sizes, but you can work with all kinds of widths.
more updated fiddle.
The spec is pretty vague about this, but all browsers implement it the same way:
Wherever 2 borders meet, there will always be an abrupt diagonal line.
This has been put to good use, by making triangle & other shapes in pure CSS. Check out this gallery:
The shapes of CSS, by Chris Coyer.
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/
I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work well. The first work well on other browsers.
What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype.
Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting
[for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0] as a selector won't work either.
Is it possible to create shadows like the shadow of Apple's environment-information sheets with CSS3?
(source: apple.com)
The solution doesn't have to be cross-browser compatible.
Check out the demo on this site:
http://lab.galengidman.com/css3stickynote/
They do something really similar in pure CSS with a bunch of :before and :after voodoo.
Here is the particular code they use for the shadow effects:
#stickynote:before {
content:'';
display:block;
width:90%;
height:20%;
position:absolute;
left:10px;
bottom:3px;
background-color:rgba(0,0,0,.5);
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
opacity:1;
z-index:-1;
}
#stickynote:after {
content:'';
display:block;
width:90%;
height:20%;
position:absolute;
right:10px;
bottom:3px;
background-color:rgba(0,0,0,.5);
-o-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
opacity:1;
z-index:-1;
}
Yes. See this blog post and the demo page for how it's done