This question already has answers here:
Remove Default round border of <select> element in Mac OS Browser:Chrome
(4 answers)
Closed 6 years ago.
I have a select box which have a CSS property:
border: 1px;
This works well at Chrome but I have a problem with Safari. It is not fit to its container:
When I set CSS to:
border: 0px;
Problem is fixed:
However when border is set to 0 border totally disappears at Chrome.
How can I fix that problem? (setting that property only for Safari or any other ways).
This post shows how you can target different browsers:
-webkit-border-radius: 0; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 0; /* Firefox 1-3.6 */
border-radius: 0; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
Related
Hey i was using google chrome to write html, css, JS. CSS frame work i will use Bootstrap.
so i was tested on Chrome my code design how i am expect it works perfect and fine, when it comes to another browsers like Firefox and Opera, Internet Explorer, Safari it was not much expectedly work.
Like Box shadow and linear gradient some other.
i saw some CSS have -webkit, -o, -moz etc...
What are those means? and how i can learn them?
Kindly please tell how i can able to target css for particular browser like Opera and Firefox and safari.
-moz #media(min-width: 320px) and (max-width: 767px) {
/*
Here i would like to target only firefox
*/
}
Some css properties are named depending on which browser is being used so we add what is called a prefix so its compatible with all of them. Let's see box shadow:
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
There are autoprefixers also!
Is there a cross browser CSS attribute for curved corners on HTML tables?
Something like:
border-radius: 10px;
Every example I've found online resembles the follwoing:
-moz-border-radius: 5px !important;
Which I don't think is cross browser...
TRY THIS>>>>
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
And this website really helps you in this situation: http://css-tricks.com/almanac/properties/b/border-radius/
This question already has answers here:
Support for "border-radius" in IE
(11 answers)
Closed 8 years ago.
How to use border-radius in IE.(All Browsers)
because firefox,chrome support border-radius but how to use for IE?
you need try this:
.my-block {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
/* Для плохих IE */
behavior: url(border-radius.htc); /*IE border-radius */
}
Fortunately, IE can be quite beautiful to win his own means. One of my favorite solutions using VML and behaviour - curved-corner. To use merge border-radius.htc, we add next to CSS and use the following code: Spent time
I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.
I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only
border-radius:5px;
behavior: url("PIE.htc");
position: relative;
to make it work in every browser. It's not working only in IE if I remove position attribute even with PIE.htc.I used moz, webkit for border box, maybe so workin with FF, Opera etc.
Use border-radius
Because IE doesn't support border-radius, you can use CSS3 PIE. Thats where the PIE.htc came from.
You can set the CSS declaration for the rounded corners for all browsers, and use an HTC for old versions of Internet Explorer.
Working example for the div with rounded corners with no position set!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
margin: 40px;
width: 100px;
line-height: 1.1em;
float: left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
color: #fff;
background-color: pink;
border: 1px solid red;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:
Use the border-radius CSS property to create rounded borders:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.
Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc, I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.
See also: MDN: border-radius.