I made a button in Firefox and it works great, but in Chrome after clicking the button the text is not moving, therefore there is no button effect on click. I want to fix this for Chrome but still not mess up the code for Firefox.
Demo
.btn{
background:-moz-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
background:-webkit-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
border:1px solid rgba(70,140,60,0.8);
border-radius:3px;
height:30px;width:80px;
font-family:Corbel;font-weight:bold;font-size:16px;color:#FFF;
text-shadow:rgba(3,3,3,0.8) 1px 1px 2px;
padding-bottom:3px; /*bad*/
padding:0px 0px 2px 0px; /*good*/
}
.btn:hover{cursor:pointer;}
.btn:active{
background:#509339;
padding:2px 0px 3px 1px; /*bad*/
padding:0px 0px 0px 2px; /*good*/
}
The problem was that Chrome is not reacting to padding-left: 1px; I changed it to 2px and everything works fine for both Chrome and Firefox.
The user agent stylesheet for Chrome has padding: 2px 6px 3px 6px for buttons. So, your top padding is not changing at all when you set it to 2px.
You probably want to explicitly override the padding for the unpressed button so that you get the same effect regardless of browser settings.
On my version of chrome (v26), the background does change, the text does not move. Might I suggest that you remove the -bottom from the padding on the btn class:
padding:3px;
That way you'll see a movement and you'll be able to adjust it
Related
I'm applying border-radius for a few elements on my page, and in order to make it work on IE 6-8, I'm using PIE.
Check it out
So as you can see, corners without values (or with values very different from each other) for border-radius, effect gets this weird.
Here's my code:
.cotacao {
-webkit-border-radius: 1px 20px 1px 20px;
-moz-border-radius: 1px 20px 1px 20px;
border-radius: 1px 20px 1px 20px;
border: 10px solid #fff;
}
And specific code for IE
.cotacao {
behavior:url(/Assets/css/common/PIE.htc);
position: relative !important;
}
What's going on? Is this bug related to the border thickness? And, if it is, is there a known workaround?
Thanks!
This is a bug in the PIE 1.0 code. See https://github.com/lojjic/PIE/issues/11
It's fixed in the 2.0 beta if you're willing to try that.
So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.
It happens on chrome, ie, and Firefox, can't test any others.
border-style:solid; will override the inset style. Which is what you asked.
border:none will remove the border all together.
border-width:1px will set it up to be kind of like before the background change.
border:1px solid #cccccc is more specific and applies all three, width, style and color.
Example: https://jsbin.com/quleh/2/edit?html,output
This is the solution for mobile safari:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
as per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
and as suggested here: Remove textarea inner shadow on Mobile Safari (iPhone)
None of the solution are working currently.
Here is my solution. You can add prefixes.
box-shadow: inset 0px 0px 0px 0px red;
Add border: none or border: 0 to remove border at all, or border: 1px solid #ccc to make border thin and flat.
To remove ghost padding in Firefox, you can use ::-moz-focus-inner:
::-moz-focus-inner {
border: 0;
padding: 0;
}
See live demo.
Set border: 1px solid black to make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: none to remove any inset shadow applied to it.
Try this
outline: none;
live demo https://codepen.io/wenpingguo/pen/KQgbXq
All browsers, including Safari (+ mobile):
input[type=text] {
/* Remove */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Optional */
border: solid;
box-shadow: none;
/*etc.*/
}
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0; and you're done.
here is a small snippet that might be cool to try out:
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-style removes the inner shadow.
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
<input type="text"/>
If you look at the main navigation menu on this page you see that I'm using a drop shadow on a:hover, however, in IE9 the shadow is buggy - it doesn't always show, and often remains after the hover is no longer active. I want to either fix it, or get rid of the shadow only in IE.
my css is:
#menu a {
color:#fff;
padding-top:10px;
padding-right:10px;
padding-left:10px;
text-decoration:none;
}
#menu a:hover {
background:#e58f56;
border-top: 0px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #bbb2b1;
border-right: 0;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
-webkit-box-shadow: #888 4px 4px 4px;
-moz-box-shadow: #888 4px 4px 4px;
box-shadow: #888 4px 4px 4px;
}
Any ideas?
I just dropped your code above into a js fiddle and it worked fine in IE9! Must be something to do with the 'pie' fix your calling in. Maybe try remove it and have a check.
The effect you are attempting is definitely 'do able' in IE9.. Don't give up:)!
Are you sure the shadow isn't showing at all? IE9's implementation of box-shadow renders the blur at about half the distance that other browsers do (I actually posted a question about that here). For low values, it's possible that IE9's rendering is so slight that you don't notice it. Just as a test, try making the blur radius much larger to see if it shows up in IE9.
If you dont see the DropShadow, it's probably that your IE9 is in Compatibility View Mode. Try to set explicitly in your page the compatibiltiy with IE9 with some code like:
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=11" />
In the header of your page, before calling any Css.
I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with:
Graphics Page
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.
This worked for me in Chrome and Safari.
Image is top level.
div.someclass with radius 5px and div.someclass img with radius 4px.
That seems to make the corners look cleaner in Chrome and Safari.
.someclass {
...
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
.someclass img {
...
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.
I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.
.gallery a img {
...
position:relative;
left: 2px;
}
This solution may work if you set different radius values for image and the link.
I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers
ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!
Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);
Box shadow supported from IE 9 onwards.
CSS3pie is a tool that lets you use some css3 properties in IE.
What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.
As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows.
In that site there's also a very similar effect, you should be able to adapt it for your needs.
This should work in all browsers:
.allSidesShadow {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
/* For IE 5.5 - 7 */
/* for IE4 - IE7 */
filter:
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
-ms-filter: "
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
";
}
As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.
The answer posted by Sekar, needs a little editing,
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
this doesnot work on IE(I checked on IE8).
box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.
I cant see your picture now, but for all side shadows I use the below code:
box-shadow: 0 0 5px 0 #000;
Instead of the 5px use your size.
You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.
You can do this with three divs, assuming they are all the same (fixed) width:
<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>
.top{
background:url('top.png');
height:20px;
width:800px;
}
.middle{
background:url('middle.png') repeat-y;
width:800px;
}
.bottom{
background:url('bottom.png');
height:20px;
width:800px;
}
Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.
You can place the following code in the div in order to drop shadows on all four sides.
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);