I have a page with a google maps in it, now I'm trying to make a border radius on it. This is working in browsers like Chrome and Firefox but not working on safari.
You can find the page here: clients.steven-dejong.nl/amano/#contact
EDIT:
It's working with the address block and if I add -webkit-border-radius and -moz-border-radius it makes no sense.
The only part where my border radius isn't working is the google maps container
Border Radius to Google Map in Safari
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-transform: translateZ(0);
Use this snippet to both the map iframe and its parent div
Use the -webkit prefix and do something like below:
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px; /* Adjust as needed */
To make it work in all browsers:
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
Related
I am using this angular directive for mapbox (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map) and trying to get the border-radius to be 10px which works perfectly in Chrome and Firefox but on Safari it isn't working.
This is the CSS I am using (For some reason it only works with opacity: .99 on chrome/firefox)
.angular-mapbox-map{
opacity: .99;
border-radius: 10px;
}
Does anybody know what is going on or how to resolve this. You can play with the mapbox element in the link above using chrome dev tools or the equivalent.
I found a solution here How to make CSS3 rounded corners hide overflow in Chrome/Opera using:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(
<style>
#box {
width: 250px;
height: 250px;
background-color: #1e9ad3;
padding: 20px;
margin: 20px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url(PIE.htc);
box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
<div id="box">
Hello world!
</div>
</body>
Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.
Here's the live example: http://bbin.own.cz/box.html
The CSS3Pie documentation gives the answer.
PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:
The solid background-color as specified in the -pie-background property.
The color value of box-shadow, if the shadow has no blur.
In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.
If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.
You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.
You'll need to use custom MS settings for pre IE8
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
Havent tested this but you can google for more info. source
I was long using this to add a glow to focused fields, I accessed my page from Firefox for the first time and realized it doesn't work on it, and most likely not on explorer either.
border: 1px solid #E68D29;
outline-color: -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
I had copy pasted it from another page so I'm not quite sure how it works. What is the equivalent for Firefox or Explorer? I mean how do I make a similar glow in other browsers? Thanks
Webkit treats "outline-style: auto;" differently than other browsers. If you want to get behavior that's more similar across browsers I'd recommend you use box-shadow instead. It won't apply to older browsers (IE8 and earlier, or FF3.0 and earlier) but otherwise should be the same.
Using this code
input {
border: 1px solid #E68D29;
}
input.focus {
border-color: #439ADC;
box-shadow: 0 0 5px #439ADC; /* IE9, Chrome 10+, FF4.0+, Opera 10.9+ */
-webkit-box-shadow: 0 0 5px #439ADC; /* Saf3.0+, Chrome */
-moz-box-shadow: 0 0 5px #439ADC; /* FF3.5+ */
}
I was able to produce a result that shows cross-browser glow in IE9+, FF4+, Chrome 10+, and Safari 5+.
Option 2) You could experiment with using some combination of outline (which will show in Webkit) and box-shadow (for other browsers).
Option 3) Use a library like Formalize CSS to take care of the cross-platform input styling for you. The results are pretty impressive.
I need rounded corner with background image for or on IE6 and above
I have tried
1. DD_roundies
2. pie.htc
3. google rounded-corners
any suggestions?
Thanks
There is one CSS3 feature which you can use for rounding up corners:
.corner {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
this class u refer in whichever browser you need but it will support IE9 and FF 3.6 so on which can support CSS3.
I used rounded corner and gradient. it's working good on firefox but rounded corner not working on IE. IE rounded corner only working when I remove gradient css. Please help me.
<h2 id="user_comments">9. User Comments and Notes</h2>
h2 {
-webkit-border-radius: 8px;
-moz-border-radius:8px;
background:-moz-linear-gradient(center top , #A0ABBF, #DEDEDE, #A0ABBF) repeat scroll 0 0 #A0ABBF;
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#DEDEDE', EndColorStr='#A0ABBF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#DEDEDE', EndColorStr='#A0ABBF')"; /* IE8 */
border:2px solid #A0ABBF;
font-size:16px;
letter-spacing:1px;
margin-top:36px;
padding:0 1em;
position:relative;
}
Firefox:
IE:
IE7 and IE8 don't support border-radius.
IE9 will.
There are JavaScript hacks, most involve a heap of 1px elements absolutely positioned or use SVG.
You can also images.
I'd just leave it as is, and consider > IE8 and other browsers are getting the progressive enhancement.