I have set border-radius (and -moz-border-radius for the older browsers) to 20px, and I have it working beautifully in Safari and Firefox. Then, I open up Chrome and it's refusing to accept the defined border-radius. Any suggestions to work around this in Chrome?
See the CSS coding in action here: http://jsfiddle.net/MAYea/
Screenshot in Safari:
Screenshot in Chrome:
It's not that border-radius isn't working, it's that overflow is failing to hide the overflow.
This is actually a new bug in Chrome. I have a similar problem on my Doomsday clock even though it worked perfectly in an earlier version of Chrome.
As a workaround, you can specify the border-radius on the contained elements as well as the container.
I had a similar issue, it helped to add
z-index: 0; /* or some other value */
but also
transform: translateY(0);
seems like this is enabling some kind of different rendering (guess nothing with 3d context like we sometime do to FORCE GPU rendering...)
the reason why this works I cannot not explain, maybe somebody else can?
I have this particular problem right now, with latest Chrome v44 on OS X 10.10.5...and yes, I know that this was "fixed" and it's an old question =)...
EDIT: Found the same fix in another SO-Question, check here: link
-webkit-border-radius: is what your looking for I think?
Add the border-radius: 20px; CSS rule to both :before and :after
DEMO
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: for the Chrome
If you need it try this javascript library from here
You can use,
border-radius: 100
Instead of,
border-radius: 100px
it will do the job in IE but not in Chrome.
Related
Why (& rarr; wiithout the space) → is displayed tiny and lowered in Google Chrome Browser than the Firefox one which is displayed as it supposed to be? Anyone any idea how to fix this?
Try to use one of these:
-o- : for Opera;
-moz- : for FireFox;
-webkit- : for Chrome, Safari,...
I just name three of them because there are more. Different browser will display different things because they can not do all the Css Atribute. Let me take an example:
Hey I want to use border-radius, hmm it looks nice to Chrome but when I change to Opera, it crashed. Let's use the -o- one. Then your code from this:
.square{ border-radius: 30px; };
to this:
.square{ border-radius: 30px; -o-border-radius: 30px;};
This will help Opera know that "Hey, this guy one border-radius on my browser. But I don't have it, let's take it from Chrome. " And there you go!
I have one button.Apply the padding to this button.But is not like same size with chrome and Firefox
run the below the snippet with Firefox and chrome you could see the difference.How to rectify the problem
button{
padding:5px 15px;
}
<button>hello</button>
Firefox version 54.0
Chrome
Please Don't mark as a duplicate .i was searched and tried many of the same question answer.but its not working
Thanks,
You want to be using Normalise CSS to ensure that your CSS rules are applied equally and uniformly across all major browsers.
This will solve your issue. If the issue remains please state clearly in your question (edit) that you have used normalise and any other CSS fixes you may have tried.
i was searched and tried many of the same question answer.but its not working
Please outline exactly what you tried.
I found my answer From my way .Its a font problem .Different font family its have some default font size on chrome browser its not same with all other browser
button{
padding:5px 15px;
font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
}
<button>hello</button>
Maybe you can try this code, I hope it will work->
button {
padding:5px 15px;
-moz-padding:5px 15px;
}
Ok, so this has been annoying me now for some time and I can not figure out what is causing this. I am wondering if anyone else is having this issue or noticed this.
In my css I have the html select options styled to look similar to this
On some computers it looks like how I've styled it and on some it appears something is overriding the style and then it looks like this
Some facts so far to help determine what is causing this.
All the computers I've tested are running windows 7.
My main pc that has numerous programs installed doe not have this issue.
My laptop has this issue.
My small pc that has a clean install with very few programs has this issue, also does not have any adobe products installed.
On the PC's with the issue, if I do a refresh in firefox the issue is fixed for about 5-10 min and then comes back.
If this were a CSS issue why would refreshing firefox temporarily fix and then later come back?
This leads me to think that some background plugin or setting is getting fetched after a refresh.
Could this be some other application on windows causing this?
Can someone tell me if they can reproduce this issue and also how to fix this and what is causing it?
Here is my CSS
SELECT {
color: #555558;
font-size: 16px;
margin: 0px 0px 8px 12px;
padding: 2px 0px 2px 5px;
width: 203px;
}
html
<select>
<option> - Select a Page - </option>
<option>Home Page</option>
<option>About Us</option>
<option>Camping Tips</option>
</select>
I posted several months ago regarding this issue however now the issue is not related to the version of firefox or CSS so the answers provided are misguided. Did Firefox 48 remove ability to style the select element?
Here is a list of plugins, as stated above, default installation produces this issue.
Please try this code
/* FIREFOX FIX OF UGLY SELECT BOXES */
#supports (-moz-appearance:none) {
select
{
-moz-appearance:none !important;
background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
background-position: calc(100% - 5px) center !important;
}
}
Thanks
This appears to be a bug that appeared since the release of multi-process Firefox. More info about Electrolysis here: https://wiki.mozilla.org/Electrolysis
If you're using Firefox 48 or later, you might be using e10s already. Check about:support and look for a number higher than 0 in the "Multiprocess Windows" entry.
Chances are: the computers affected are due to Multiprocess being enabled. This issue is being tracked on Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=910022
The issue should resolve itself with the release of Firefox 54.
Ok, so the solution here is to disable -> Multiprocess Windows
type about:config in the browser
then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)
change this to FALSE then restart the browser
this will make firefox run Multiprocess Windows disabled which fixes the issue
I know this is an old thread but the behavior still exists (FF 100 on OSX).
Look at this pagination bar:
Note also the larger height of the div with the select in it :-(
What I have done to resolve this: set a border on the select and set the background color to white.
select {
border: 1px solid #ddd;
border-radius: 3px;
background-color: white;
padding: 0px;
}
Now it looks like this:
Looks the same in Chrome.
test code :
-webkit-appearance: none; /* Remove style Chrome */
-moz-appearance: none; /* Remove style FireFox */
appearance: none; /* Remove style FireFox*/
i know border-radius property wont support in IE7.
Is there any css tricks to do border-radius in IE7 browsers.
You can use CSS3 PIE to get this working.
To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:
behavior: url(path/to/PIE.htc);
In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.
NOTE:
If it's not working still then add this to your selectors:
position: relative;
z-index: 0;
There are plenty of "tricks" to get rounded corners in browsers that do not support the "border-radius" CSS property. Just do a google search for "rounded corners css". This one seems promising for instance.
Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius.
Check this http://css3pie.com/
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....
use that code for border-radius working well ....
**
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
**
and also see for border-radius http://css3pie.com/
given in detail in document
I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/