pie.htc not fixing css3 issues - html

I have the PIE.HTC in the root directory and trying to make rounded corners work in Internet Explorer
This is my CSS
#credits-earned
{
border-style:solid;
border-width:2px;
border-color:#EDEDED;
width:170px;
height:60px;
margin-bottom:10px;
font-weight: bold;
border-radius:8px;
behavior: url (PIE.htc);
}
The HTML this is trying to take effect on is:
<div id="credits-earned">
You need to earn X<br> more credits today to avoid losing credits
</div>
However the rounded corners are not working in IE.
Any help be appreciated.

when including a resource in a external css file the URL is relative to the css file.
if you want to include something from a different directory you could use a relative path (example behavior:url('../PIE.htc')) or use a absolute path (example behavior:url('/PIE.htc'))
for more on path's in stylesheets - Using relative URL in CSS file, what location is it relative to?

Apart from the proper path for pie.htc to work, give:
#credits-earned
{ position: relative;
}

Related

Large space under my slick.js slider

I'm trying to implement a slider for a website that's meant to have deconstructed background images with super imposed text. However, loading the text into the slider creates a big white space, which I'm looking to get rid of. The HTML says its an issue in the .slick-track style.
here's a js fiddle link: https://jsfiddle.net/bwu778/7dyhgzgf/
css:
#container1{
position: relative;
}
#image{
position:absolute;
}
#text1{
z-index:100;
position:absolute;
color:#4D2E82;
left:22%;
font-weight:bold;
margin-top:12%;
padding-bottom: 2em;
}
#text2{
z-index:99;
position:absolute;
background-color: #FFFFFF;
color:#4D2E82;
left:25%;
margin-top:20%;
}
Thanks!
I pasted your fiddle into my localserver and got a white space as well. Upon further inspection, it seems there are numerous issues. To name a few things to check:
make sure you install the slick-theme.css locally since your link
reference is listed as such <link rel="stylesheet" type="text/css"
href="slick/slick-theme.css"/>
The initializer function on their website is erroneous
The encoding messages are on their end, which they are probably aware
of because utf-8 is sprinkled liberally in one document
use the actual jquery cdn files or add the http to the ones from
their website in case you copied them directly
Not sure how imperative it is for you to continue with Slick but judging from the syntax and the 645 open issues, I recommend perusing the closed issues for some answers

File did not find error in CSS, but background image is not displaying

I have created an external stylesheet named new.css. It is linked in new.html, but the problem is, the image is not displaying. I have put all my three files new.html, new.css, and banner_bg.png in the same mobile assets folder.
I'm new in Cascading Style Sheets, so please guys help me out how to do this. Thank you.
Here's my code in JSFiddle.
You have absolute path for the image in the CSS.
Use relative path instead:
background-image: url("banner_bg.png");
Your div is absolutely positioned and has no content in it, which means its dimensions are 0x0. You will need to add some height and width (you might want to add them in %).
height: 200px;
width: 700px;
If for some reason you want to use the absolute path, you would do it like this (not recommended, as it will work for you, but nobody else):
background-image: url("file:///E:/Assignment Work/SWP/Assets/mobile assets/banner_bg.png");
You need to remove
position: absolute
and specify some height to check (as #pol suggested)
.top
{
height: 500px;
background-image:url("https://www.hello.com/img_/hello_logo_hero.png"); // Change with this your RELATIVE path
}
Please try this
.top
{
background-image:url("https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/usertesting.jpg");
width:100%;
height:500px;
display:block;
}

Local CSS background-image not displaying

I'm trying to display a local background-image in CSS. It's in the same folder as index.html and it's not displaying.
.image {
width:100px;
background-image: url('PIC1.jpg');
}
Any help is appreciated.
It is not appearing because you didn't give any height to the div see this http://jsfiddle.net/ce1j6k7k/2/ you can remove the height to see the difference
HTML
<div id="image"></div>
CSS
#image{
width:300px;
height:300px;
background-image:url('http://placekitten.com/300/301');
}
Resources specified in CSS are resolved relative to the path of the CSS file, not the page referencing the CSS file. PIC1.jpg must be located in the same directory/folder as the CSS file itself.
There is no way in CSS to do what you think it does - and that's a good thing, because I can't think of any possible use-case. Imagine having these pages all referencing style.css:
/index.html
/products/fish.html
/user/account/orderHistory
...if style.css referenced "foo.jpg" then foo.jpg would have to be replicated at /foo.jpg, /products/foo.jpg and /user/account/foo.jpg.
I can think of 3 possible problems.
First, the image path. for example if this is your image's real path:
D:\Projects\MyProject\Content\Images\PIC1.jpg
you should do this in your code:
background-image: url('~\Content\Images\PIC1.jpg');
Second, is that the width that you've set in the code doesn't match the image's coordinates. In that case, you can either change the code or re-size the image.
And finally, the image might not be loaded on the page and by refreshing it few times it might be shown.

background-image for a div showing in IE but not in chrome

here i am developing a project using VS2010 ultimate and was building some views when i came across this problem. i am defining background-image for some div classes like .jpg,.png but they are being visible only in IE6 and not on chrome
here is the div class
<div class="log_pad">
and here its style
.log_pad
{
background-image: url('~/App_Data/images/login_pallete.png') no-repeat;
width: 478px;
height: 397px;
margin: 0px;
padding: 0px;
overflow:hidden;
float: left;
}
Probably has to do with your url path for background-image. What's with the ~/ at the beginning?
background-image CSS url path is relative to the location of the css file, so if your css file is in the base directory and your image is in subfolder App_Data/images you should type it like that, not with the ~/ at the beginning (I'm not sure about the ~ but a / at the start of a relative file path returns you to the root directory). If your css is in a sibling folder to App_Data/ like css/ you would write it as url(../App_Data/images/login_pallete.png). I would recommend trying to write it as a true relative path to the CSS file rather than starting at the root as a way of troubleshooting.
See this article for more info. If that is not the issue, it is due to something else you did not post here.

Why is CSS3 PIE not working on sub pages when using absolute path in the CSS file?

I have the following class:
a.greenbutton, input.greenbutton {
/*background: url("../image/button.png") repeat-x scroll left top transparent;*/
behavior: url("/css3pie/PIE.php");
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px 7px 7px 7px;
cursor: pointer;
display: inline-block;
line-height: 11px;
padding: 6px 12px;
text-decoration: none;
background-color: green;
color: white;
position:relative;
z-index: 0;
}
the PIE.php file is located in /root/css3pie/
You can take a look here:
http://trashtalk.dk/
and to see the difference:
http://trashtalk.dk/Apple/iPhone
you can even download the file from:
http://trashtalk.dk/css3pie/PIE.php
what am i doing wrong?
you are not using an absolute path, you are using a relative path. To answer your question, I need to know where - in relation to your root folder - is your css file located.
Because...if it's , say, root/styles/ or whatever, then your pie rule needs two dots '..' before the /csspie stuff.
In other words, instead of:
behavior: url("/css3pie/PIE.php");
you need:
behavior: url("../css3pie/PIE.php");
but this is just guess work, I need to know where your css file/folder is located first.
Ok, refer to this page:
http://css3pie.com/documentation/known-issues/
The behavior URL
IE interprets the URL for the behavior property relative to the source
HTML document, rather than relative to the CSS file like every other
CSS property. This makes invoking the PIE behavior inconvenient,
because the URL has to either be:
Absolute from the domain root — this makes the CSS not easily moveable
between directories — or, Relative to the HTML document — this makes
the CSS not easily reusable between different HTML files. URLs in
PIE-interpreted CSS properties
PIE does not parse the CSS stylesheets (to do so would be unacceptably
slow); it lets IE handle the parsing, selector querying, cascading,
etc. and then simply asks it for the resulting property values. This
means that when PIE gets a property value, it has no knowledge of the
context from which that value originated.
As a result, for properties which contain URL values (such as
border-image or -pie-background), PIE cannot resolve those URLs
relative to the CSS file in which they appear. It resolves them
instead relative to the JavaScript execution context, which is the
location of the source HTML document.
CheersG
UPDATE:
Make sure you have methodically tried, one by one, all of these:
behavior: url("../css3pie/PIE.php");
behavior: url("/../css3pie/PIE.php");
behavior: url("http://trashtalk.dk/css3pie/PIE.php");
UHMMM...where is the css3 pie rule in your css? I don't see it, you know, something like -pie-background or whatever.