I used the following steps
Step1: put pie.htc in Webcontent/css/pie.htc folder
Step2:add the following codes in my .css file
border-radius: 5px 5px 5px 5px;
behavior: url(/css/PIE.htc);
Please any one help me as sap and the rounded corners working in chrome and firefox
You should use vendor-specific prefix in CSS :
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
( if you just want to work it in Firefox and Chrome )
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Related
In our app, we have a button defined as follows:
{
xtype : 'button',
text : '<span class="disk">1</span> Define Layout'
}
where disk is described like this:
.disk {
display: inline-block;
vertical-align : middle;
background-color: #FFF;
margin-right: 5px;
//margin-bottom: -7px;
padding: 12px 8px !important;
height: 25px;
overflow: hidden;
width: 25px;
border-radius: 25px;
color: #555;
line-height: 0px;
}
This works fine in ie9+, ff, and chrome. However, in ie8 all I see is squares. I am aware of the fact that border-radius is not part of the IE8 CSS spec and that there are work arounds like CSS3PIE (assume we can't use this :) ). Also, I know that Sencha Cmd (v4.0.2.67) has image slicing built into the build system, but it only seems to work on Ext components. How do I draw the disk for this particular case?
I have tried everything I can think of - including including every bpopup and jquery javascript file, even a .json file I found on one example, but can not seem to get this thing to work. I have all of the script files included in the same folder as the example I am trying to run:
bpopup (jQuery plugin), Code Example. My Non-working example here.
It is this last link that I am trying to get to work, as just a starting point. I have looked through the examples here. It shows just some of the cool things I would like to use. downloading the page and accompanying files and opening it in Dreamweaver doesn't work for me either..
Any help would be astronomically appreciated. the jfiddle examples work, I however can not see which script files they are linking to - they must be uploaded in to jfiddle somehow. I have searched other issues when trying to use bpopup on stackoverflow, I however can not find a full, non-broken (in to various pieces) solution i.e. the whole html page along with the script files linked to embedded in the head tag.
Thanks much,
Brian
You need to add jQuery.js, jquery.bpopup-0.9.4.min.js, jquery.easing.1.3.js and a style sheet. For example,
JS:
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js
http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js
StyleSheet from their site:
http://dinbror.dk/bpopup/assets/style.min.css
And this code
$(function(){
$('#pop').click(function(){
$('#popup').bPopup();
});
});
HTML:
<div id="popup" style="display: none;">
<span class="button b-close"><span>X</span></span>
If you can't get it up use<br />
<span class="logo">bPopup</span>
</div>
Works Fine (Click Popup button).
CSS: (Used in popup) with another example
#popup, .bMulti {
background-color: #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 25px 5px #999;
color: #111;
display: none;
min-width: 450px;
min-height: 250px;
padding: 25px;
}
#popup .logo {
color: #2B91AF;
font: bold 325% 'Petrona',sans;
}
.button.b-close, .button.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
.button {
background-color: #2B91AF;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
color: #FFF;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
Update : In your example (given link), you have loaded jQuery three times and most importantly, you've loaded the plugin (bPopup) more than once and at last jQuery again, so jQuery object changed. So, just load a single verion of jQuery first and then load jquery.easing.js and then load bPopup.js (min/expanded). Also load stylesheet (style.js) with styles declared for your popup div.
I have used the same code of yours and it's working fine. Here's the demo. The problem seems to be with the multiple jQuery versions you are calling. In total you need the following two files to get this working:
jquery.js
jquery.bpopup.min.js or jquery.bpopup.js
If you wish to learn more about what happens when you try to use multiple versions of jQuery and how you can actually do it, you should refer to http://api.jquery.com/jQuery.noConflict/
Other than that, you should always load jQuery prior to using any jQuery based plugin.
i tried to set border radius to a td element, but it isn't work on IE7 and IE8
i tried all possible solutions but it still not working
here's my css classs :
padding: 5 5 5 5;
background-color: gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
behavior: url(../Bin/PIE.htc);
i tried to use PIE.js and it also not working.
IE7 and IE8 don't support CSS3 rounded corners. You will need to look to other IE specific solutions if you want to emulate this.
How to create rounded corners in ie 8 and < is one method using .htc controls for IE.
I need to add that no solution to your problem I have ever found is 100% they all have drawbacks and can never have the full functionality that CSS3 offers.
How do I give Firefox rounded borders using border-radius? I am using Firefox 14 on Ubuntu.
Edit:
I have tried
-moz-border-radius
and all the other browser specific comments, none of them have worked. I had already found this after searching on Google, and that is why I asked here.
Does it make any difference if I'm using KDE? I have already added Firefox in the window-specific overrides.
My userChrome.css file starts with this:
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
Is it supposed to implemented differently? The rest of the css codes I have used work perfectly. Thanks!
THE RESULT:
I wanted to round the corners of the entire border, but apparently it's impossible. Sorry for the misunderstanding and thanks for your trouble!
Um, have you specified a selector for your property? The file you linked lacks them. Try this:
* {
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
The -moz-border-radius css property would take care of this.
Here are the browser specific border radius properties:
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
Use this.
-moz-border-radius: <radius>px;
Please use -moz-border-radius property for the border radius. For more info please visit
rounded border
I'm using this CSS:
#main{
border-radius: 50px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-radius: 50px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius: 50px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
}
It works perfectly in FF, Chrome, IE9(i think) and Safari...
But its soooo ugly in IE8 ,
There are users using IE8, i have tried the .htc file but that dont support border-bottom-right-radius and border-bottom-left-radius...
I'm looking for a JS or HTC file that does support that (or an other solution for this)
I only need it for IE8, but its great if it support IE6 and IE7 aswell!
Thank you!
You could try CSS Pie. I've not used it, so I can't vouch for it.
Overall, though: I'd let it go. The absence of rounded corners won't break the experience for users in IE8. More capable browsers get the better experience. Progressive enhancement is a beautiful thing.
border-bottom-right-radius Browser Support:
border-bottom-right-radius is supported as-is in Opera 10.
In order to get it to work in Firefox and Safari, you have to use two related properties:
-moz-border-radius-bottomright - for Firefox 3+
-webkit-border-bottom-right-radius - for Safari 2+
It should be supported by Internet Explorer 9.
border-bottom-right-radius Examples:
Create a standard rounded corner:
border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;
To create a shallower curve:
border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;
border-bottom-right-radius Special Notes:
Don't forget to set the -moz and -webkit styles as well as the basic border-bottom-right-radius so that your curves show up in most modern browsers.
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....only border-radius property work in ....
THAT IS NOT POSSIBLE TO SOLVE THAT PROBLEM USING BY CSS SO USE THAT TRICK
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8