I am trying to use CSS3Pie in my asp.net mvc 3.0 application
But in IE versions lover than 9 the border just disappeared completely.
here is my css
.box
{
margin:auto;
display:table;
text-align:center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #86b0ca;
margin:10px 0 10px 0;
behavior: url("/Scripts/htc/PIE.htc"); /*if i remove that the border not disappeared but square in old IE versions*/
}
Add position:relative to this box, then go and read the documentation!
http://css3pie.com/documentation/known-issues/ has a section explaining why you need to do this, I'm not sure why it's not in the getting started guide.
Related
I just want to know how can I add a border to the bottom of my container like this:
http://awesomescreenshot.com/0a551tq923
Assuming the border is white there and the container is above that.
I know it requires some minor CSS but can not figure that out.
Thank you.
I created a JSFiddle to show an example of what you could do. All using CSS.
I could see multiple ways of accomplishing this using the basic example I provided.
The css used for the bottom slant:
#bottom {
width: 0;
height: 0;
border-top: 20px solid black;
border-left: 500px solid transparent;
}
Edit:
Here is another example. More close to the website.
Also the website is using parallax. So it's going to be a little different then what I threw together.
you can do like :
#container {
background:url('path to image which needed as border') no-repeat center bottom;
}
With CSS3 you can do the same of the image that you like, try with:
#container {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
And if you want even the shadow try with:
-webkit-box-shadow: 0 5px 10px #303030;
I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
my round corners seems to not work in ie8 but works in ie7 if i use the :after element:
.readmore:after {
width:17px;
height:17px;
margin-left:5px;
display:inline-block;
font-family: 'bridge';
color:#e21e36;
content:'E';
text-align:center;
line-height:19px;
font-size:15px;
border: 1px solid #fff;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
behavior: url('http://fileserver/bridge/PIE.htc');
}
How can i enable this in ie8?
Any help would be appreciated.
Try using the pie syntax.
-pie-border-radius: 9px;
try loading pie relative to your CSS documents location, i.e.
behavior: url(/your/path/theme/inc/PIE.htc);
Edit:
The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour. Maybe your issue is with Serving the correct Content-Type, please see this for more info:
http://css3pie.com/documentation/known-issues/
I just noticed that my address link styled as a button does not properly show a radius in IE9 when using the CSS below:
a.btn {
background: #F00;
color:#333;
font-size:12px;
padding: 3px 4px 3px 4px;
border:1px solid #444;
border-radius:3px 3px 3px 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
cursor:default;
}
CSS example
When I remove the border:1px solid #444; then a nice curved border appears.
Is this a bug with IE? In Firefox everything works good. Anyone else seen anything like this? Seems like it only happens when border-radius is set to a low value. I know this is not very important on the scale of things but I'm interested to hear if anyone knows why the radius doesn't properly show.
It works for me.
Check it using
border-radius: 20px;
http://jsfiddle.net/6Nr2n/1/
http://prntscr.com/2djxa
I specify a box shadow for a span. The shadow only shows on the right. Something seems to cover the bottom side of the shadow. I tried resizing the span but this doesn't do it. I have this in the style specifications.
#feastsaint:hover span {
display:block;
width:385px;
height:65px;
margin-left: 120px;
border:1px solid #808080;
padding:2px;
font-size:11px;
border-radius: 5px;
box-shadow: 3px 5px 8px #888;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 5px 8px #888;
padding: 5px 5px 5px 15px;
background:#CCFFCC;
/* border:1px solid #404040;
background-color:#FFCCCF; */
color:#404040;
white-space: normal;
z-index:99;
}
What could be the problem?
NOTE: Couldn't upload the image for the box shadow.
Add some margin-bottom to your span.
#feastsaint:hover span {
....
margin-bottom: 5px; // (play with this a bit till you get the desired effect)
}
you really should post more info about your problem such as the html code your trying to affect, that said try:
change
#feastsaint:hover span
to
span#feastsaint:hover
I recently experienced some problems with Chrome on MAC. I just had to restart Chrome several times until it worked again. For me bitmaps and some images online were messed up (no vectors). Maybe just restart Chrome and look if it works. Otherwise just revise your CSS as the other answers suggest. Good Luck