Im trying to demo CSS3PIE and it wont work in IE at all.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link href="test.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="title"></div>
<div id="sub_title"></div>
<div id="main_area">
<div id="date_area"></div>
</div>
</body>
</html>
css:
body{
margin: 0 auto;
}
#title{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: white;
}
#sub_title{
margin: 0 auto;
width: 100%;
height: 25px;
background-color: green;
}
#date_area{
width: 310px;
height: 250px;
border: 1px solid #4A4949;
padding: 60px 0;
text-align: center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: #707070 2px 2px 4px;
-moz-box-shadow: #707070 2px 2px 4px;
box-shadow: #707070 2px 2px 4px;
background: #EBEBEB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
background: linear-gradient(#EDEBEB, #C9C7C8);
-pie-background: linear-gradient(#EDEBEB, #C9C7C8);
behavior: url(/PIE.htc);
}
The result is just a block with a border, no gradient/shadow etc
Any help/solution would be much appreciated.
The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);
Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:
AddType text/x-component .htc
Hope this helps.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?
CSS3 PIE - Giving IE border-radius support not working?
The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour.
adding: AddType text/x-component .htc - to the .htaccess file worked like a charm for me.
The shorthand CSS property let's you control what corners to round or not.
border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */
Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps
Make sure you have the latest beta release. If the HTC file still causes issues, try the JS implementation.
Related
I have created some 3D spheres with figure html elements and css-styling that I cannot get to display in a print-view. I am trying in both IE9 as well as Chrome v45. What can I do to get these to print? I hope the answer is not to change the element to something other than figure as this would require numerous other changes.
I have
-- checked "print background colors an images" in IE print dialogue and I've checked "background graphics" in Chrome print dialogue.
-- tried adding -webkit-print-color-adjust: exact; to a number of places in the css, including figure{}, .sphere{} and .red{}
-- tried adding a print-backgrounds chrome extension, which I later learned was obsolete anyway.
HTML:
<figure class="red sphere"></figure>
CSS for Chrome:
.sphere {
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 5px auto auto auto;
}
.red {
background: radial-gradient(circle at 10px 10px, red, #000);
}
CSS for IE9:
.sphere {
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 5px auto auto auto;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=40, style=2);
}
.red {
background: red;
}
Thanks!
When linking your stylesheet make sure to have media=all in the link.
It should look something like this:
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
or set up a specific print stylesheet like so:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Funny thing, after nearly 3 years I was finally asked (again) to create a print view for the MVC application in question here. So I googled my question (again) and thought 'this person is asking just what I'm after!'. Yep, turns out it was my own question (and still unanswered) ...
Gained from my own experience, and searching other code I'd written since first asking my question, here is the answer, ...
#media print
{
.red {
background: radial-gradient(circle at 10px 10px, red, #000) !important;
}
.yellow {
background: radial-gradient(circle at 10px 10px, yellow, #000) !important;
}
.green {
background: radial-gradient(circle at 10px 10px, #00af00, #000) !important;
}
}
Yep, I just had to re-describe the background color characteristics (and include !important) in the #media print section of the css file. Why? Idk. It's a direct copy/paste (plus !important) of the general css section. But it worked!
Cheers!
I currently have the following code:
<html>
<head>
<style>
.gr {
color: "#ffffff";
background: "#00ff00";
border-radius: 8px 0 0 15px;
}
.or {
color: "#00ff00";
background: "#ffa500";
border-radius: 0 15px 8px 0;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
But the classes aren't having any effect at all. It remains this way even if I call an external stylesheet. But, if I do <span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px"> then it works. Can anyone help me with this?
you need to take away the quotes around the hex codes.
and change background to background-color (EDIT: I guess technically you don't need to it's more of a preference really)
fiddle here:
http://jsfiddle.net/zy8yq6rj/
You need remove the quotes in your css.
.gr {
color: #ffffff;
background: #00ff00;
border-radius: 8px 0 0 15px;
}
.or {
color: #00ff00;
background: #ffa500;
border-radius: 0 15px 8px 0;
}
Working jsfiddle here http://jsfiddle.net/u36k17v6/1/
It seems you have another CSS file that is overriding your config.
When you make a style="" inside a DOM object, it is the most important rule to follow. There you have a little explanation about that things.
Then add to your CSS code !important to make them the first to check:
<html>
<head>
<style>
.gr {
color: #ffffff !important;
background: #00ff00 !important;
border-radius: 8px 0 0 15px !important;
}
.or {
color: #00ff00 !important;
background: #ffa500 !important;
border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
You can check the rules applying to the DOM object, for example in chrome, clickng second button on mouse over the desired object to check, and choose Inspect Element. On the Styles panel you´ll be able to see the rules aplying to this object, and the file they are coming from.
Hope it helps!!
Regards!
EDIT
I did´nt realize about the "" in the color and background !! Sorry!! Anyways I´m living the answer here. Thanks a lot to #deebs for the semicolon must go after the !important advice. will check better next time!!
When specifying a color in CSS, you need to use the background-color tag.
Also, you don't need to add quotations when specifying a HEX code.
So, your code should be:
<html>
<head>
<style>
.gr {
color: #ffffff; !important
background-color: #00ff00; !important
border-radius: 8px 0 0 15px; !important
}
.or {
color: #00ff00; !important
background-color: #ffa500; !important
border-radius: 0 15px 8px 0; !important
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
Welcome to the world of CSS!
Here's some light reading for you:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
Also, as a go-to reference for all things CSS, I go to the MDN:
https://developer.mozilla.org/en-US/
I found out that using PIE.htc will hellp to resolve the problem with IE7-8 when using box shadow.
I did exactly as they are explaining on the official website: http://css3pie.com/
But I can't get it to work on IE7 and IE8:
this is my code:
.shadow {
behavior: url(PIE.htc);
width: 200px;
height: 200px;
border: 1px solid #696;
text-align: center;
-webkit-box-shadow: #666 0px 0px 5px;
-moz-box-shadow: #666 0px 0px 5px;
box-shadow: #666 0px 0px 5px;
background: #EEFF99;
}
<div class="shadow">
Example
</div>
Just put your PIE.htc file in the same directory where you have put your html and hopefully it will work.
behavior: url(PIE.htc);
according to Documentation
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Reference Images: Image1
Image 2
Give .shadow{ position: relative}
For PIE to work properly, give it a position through CSS.
I was initially going for an image with a black border, along with rounded corners. However, rather than having both a rounded image and a rounded border, on Webkit I ended up with a rectangular image and a rounded border. The rectangular image seemed to overlap parts of the border at the corners, making for a slightly weird looking result. On firefox and opera I've come up with the result I had wanted but I was wondering how I would achieve the same effect on webkit. Here's some code you can run to see what I'm talking about. Thanks in advance for the help!
<!doctype html>
<html>
<head>
<title> Testing Website </title>
<style type="text/css">
img {
height: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
</head>
<body>
<img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">
</body>
</html>
Use box-shadow: http://jsfiddle.net/UQ2kt/
You could try a jQuery plugin. Gives a lot of options. http://jquery.malsup.com/corner/
Try;
img{
height: 500px;
width: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
display:block;
}
can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.