I'm try to use border-radius on a website, but firefox keeps doing this:
Firefox CSS.
Everything is good except the top left corner.
This is my css for the border-radius:
border-radius:10px 0px 0px 0px;
border:1px solid #FFF;
border-bottom:2px solid #000;
width:400px;
It works fine on any other browser but not on firefox 24.
Is there a way to fix/work around this with only css?
Try adding: the background-clip property:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
Related
Everything is great on all browsers on OS X, I come to test on windows, and it seems my webkit elements, ie gradient backgrounds and radius borders do not show up - in chrome, firefox or ie. (so it isn't a problem with chrome exclusively but perhaps Windows 7?) I should not i'm on chrome 27 and ie 10. On another windows pc with an earlier chrome and ie 8 it looks as it should.
So, I go into chrome developer mode to take a look, and when I rollover the 'element', I can actually see the webkit items as they should be under the highlighted colour. Does that make sense?
Anyone experienced this before and know what it means?
For example, the following will be invisible in all windows browsers, but when I hover over it in chrome it shows up:
.example .example1 li {
float: left;
padding: 0px 5px;
width: 120px;
height: 60px;
border: 1px solid #e6e6e6;
margin-left: 14px;
margin-bottom: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
text-align: center;
font-size: 16px;
font-weight: 500; }
Maby you need to run your code through a Prefixer, http://prefixr.com/
I am making a banner where people can upload an image.
Before the upload it you see the image. With just a standard html code
<div id="box"><img src="blah blah" /></div>
The CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.
Example:
This is Chrome and Firefox. You can see the image will fit with the screen and got a nice border-radius on the top.
This is Safari. You see that the image dont have a border-radius on the top. I dont know the problem.
For that i also tried to use:
-webkit-
But that also didnt work. Anybody know how to fix that for safari?
please Update Below css and Check .....And make necessary changes as per your requirmnet..
hope this will solve your problem
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D9D9D9;
}
Please Mark answer if your problem is solved...
This is all you need:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}
Keep it simple. :-)
I have tried PIE.htc and background-color together, but rounded-corner not working in IE8.
my css is as follows.
#main{
background-color: #CD0D00 !important;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
behavior: url(PIE.htc);
-webkit-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
box-shadow: 0 7px 10px rgba(0,0,0,0.3);
}
NB: When I remove "!important" from background-color, the color not appears but the Rounded corner working in IE8, otherwise not.
Well, using !important is known to cause problems with CSS3Pie, so that's no surprise.
As for the background-color on it's own without the !important, I'm not immediately sure why it isn't working, but a few suggestions:
Try using the shorthand background style instead -- ie background:#CD0D00;. CSS3Pie tends to prefer shorthand styles for most things.
For some background properties, CSS3Pie can't support them in the standard background style; it needs a custom -pie-background style. In theory, this only applies to advanced background properties, and shouldn't be needed for a basic background color, but it's worth trying it.
I don't have a copy of IE to hand at the moment to try it out, but hope that helps.
I have a few buttons on my webpage in different colors. I have one class for the shape of the button, and then a few classes that give them colors.
.button {
font-family:"Helvetica Neue W01 75 Bold", Helvetica, Arial, Sans-serif;
text-decoration: none;
white-space: nowrap;
color: #333;
padding: 13px 15px;
display: inline-block;
font-size: 1em;
font-weight: bold;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
a.button {
color: #333;
}
.black.button {
background-color: #dedede;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=##EFEFEF, endColorStr=##D3D3D3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#D3D3D3)";
-webkit-appearance: push-button;
}
.black.button:hover {
background: #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#E2E2E2, endColorStr=#E2E2E2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#E2E2E2)";
}
.orange.button {
background-color: #ffaa44;
background: -webkit-gradient(linear,left bottom, left top, color-stop(0.22, rgb(255,144,9)), color-stop(0.81, rgb(255,170,68)));
background: -moz-linear-gradient(center bottom, rgb(255,144,9) 22%, rgb(255,170,68) 81%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffaa44, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaa44, endColorstr=#ff9009)";
}
.orange.button:hover {
background: #ff9009;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff9009, endColorStr=#ff9009);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff9009, endColorstr=#ff9009)";
}
I use them like:
<a class="orange button" href="#">Click Me</a>
This works in Chrome and Safari but does not work in Firefox12 (and IE). All I see is a white box with 'ClickMe' (So probably the .button is applied, but not .orange)
From what I read, this is supported in Firefox. But I cannot figure what is wrong in my stylesheet.
When I do an 'Inspect Element', Firefox shows the class as a.orange.button, but in the Styles tab, it doesnot display these classes. It is picking my stylesheet as the rest of the page is displayed okay.
What am I missing here?
It seems to work if you remove invalid CSS code. I'm wondering if you have these exact lines in your original CSS code (with ... and unclosed brackets - which should cause the problem):
background: -webkit-gradient(...
border-radius:...
Cleaned up jsFiddle Demo
The problem is surely not with multiple classes. They work fine in every modern browser.
UPDATE: I found the issue based on this jsFiddle. It is this declaration:
.black.button {
background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
You have one more opening ( than needed right after -moz-linear-gradient.
Correct version (jsFiddle):
.black.button {
background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}
Try using something like the following
background: -moz-linear-gradient( top left, white, black );
-webkit-gradient is for webkit browsers -- like Chrome and Safari; Firefox is not a webkit browser.
see http://jsfiddle.net/Wfxym/
Some notes found # linear gradients and especially Cross-browser CSS gradient (details on the Firefox implementation can be found on MDN: https://developer.mozilla.org/en/CSS/linear-gradient)
I'm having trouble with the cursor in a searchbox that displays too far left in Firefox, whereas it looks fine in Chrome and Safari. The CSS uses Modernizr to display a borderradius where possible, so the issue doesn't concern IE which is served a plain square box.
Here's the HTML:
<form action="/search-results/" id="search" role="search">
<input type="search" placeholder="Search this site here" name="q" results=5 id="q" autocomplete="off" size="31"/>
</form>
The CSS is as follows:
input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
to display the placeholder and
.borderradius #search input#q {
width: 180px;
height: 20px;
font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
padding: 0;
background: #fcfcfc;
border: 1px solid #d1d1d1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
.no-borderradius #search input#q {
border: 1px solid #ccc;
background: #eee;
font: inherit;
width: 170px;
height: 20px;
padding: 0 0 0 8px
}
to style the box.
I also added this:
/* Remove default input type="search styling */
input[type="search"] {
-webkit-appearance: textfield; /* You could also use none */
}
(which I saw in this article) which has the effect of removing the 'enforced' styling of the Webkit search box—meaning it can then be made to render consistently in Mozilla with the right styling.
Adding the results=5attribute in the input tag, although it doesn't currently validate, displays a magnifying glass in Webkit.
The above code can also be checked online on my site.
The search box displays as follows:
Safari
Chrome
Firefox
Firefox doesn't display the magnifying glass, but that's fine. On the other hand, while adjusting the margin and/or padding on the box can correct the wrong (too far left) Firefox cursor display, it necessarily does so at the (unacceptable) cost of pushing it too far right in Webkit browsers. And I haven't found a way of targeting just Mozilla in this instance. Any suggestions welcome...
To be fair, Firefox isn't displaying the wrong cursor position. If you remove the invalid results attribute, you will see the cursor position is in the same place in webkit.
I am not sure what padding/margins you have tried, but the padding below looked fine in both browsers. The box-sizing: properties are used so that the input acts the same way in all browsers and doesn't make the box bigger with the extra padding.
.borderradius #search input#q{
padding: 0 0 0 6px;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}
This is complex - it seems to me that we've some way to go before native styling of the new form elements works well cross-browser. I have put together a fiddle which shows the code necessary to display your search input properly in both webkit browsers and Firefox.
This article by Trent Walton describes the various properties that affect the appearance of search inputs, and the always brilliant CSS Tricks also has some useful information.
Basically, I've over-ruled the browser's native styling using this code:
-moz-appearance: none;
-webkit-appearance: none;
I've then used the -moz-padding-start property (who knew?) to add some left padding only for Firefox.
So, although that works, it is far from ideal having to jump through those hoops. A note on #tw16's answer: -moz-box-sizing is currently used by even the most recent version of Firefox, but is likely to be replaced by the non-prefixed version in future, which will potentially break that solution. To be fair, -moz-padding-start will presumably be similarly replaced at some point in the future, though the CSS Writing Module seems more obscure (to me at least).