i read a ton of similar problems and test all solutions but no one works...
this is my css:
.button
{
background-image:url(../Immagini/pulsante.jpg) !important;
background-color:#004878;
padding:0.4em 1em;
text-decoration:none !important;
border-radius:5px 5px 5px 5px;
border:1px solid #C5DBEC;
font-weight:bold;
cursor:pointer;
margin-right:0.1em;
overflow:visible;
position:relative;
text-align:center;
display:inline-block;
behavior: url(../Scripts/css3Pie/PIE.php);
}
i add a simply alert in the file (even in the htc ones) and it's shown so the file is loaded.
as you can see i use the php version to avoid server problem but nothing change
i try even to remove !important in css but still it didn't work
What i miss?
EDIT
this is my folder structure:
ROOT
-->Defalut.aspx
-->Pages
-->Page.aspx
-->Scripts
-->cs3Pie
-->PIE.php
-->all other css3Pie...
-->Css
-->Style.css
From css3pie.com about behavior:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Just you absolute path
-ms-behavior: url("http://css3pie.com/pie/PIE.htc");
or path relative to html:
/* You need to use this code if your html file in <site>/index.php
And PIE-file in <site>/Scripts/css3Pie/PIE.php
Also check if your get access to PIE-file from your browser
via link like http://<site>/Scripts/css3Pie/PIE.php
*/
-ms-behavior: url("/Scripts/css3Pie/PIE.php);
> Working example on CodePen (tested in ie8)
Related
I don't get why the background image disappears when I transfer the inline CSS to external stylesheet. Here's the CSS:
.col {
margin-top:-20px;
width: 20%;
float: left;
}
.col li {
font-size:9px;
padding:10px 10px 10px 0px;
border-bottom:1px solid #f6f4e7;
line-height:15px;
}
.col li:hover {
background:#f7f3e3;
}
.sample span {
background:url(../image.jpg) no-repeat left;
padding: 10px 0;
padding-left:35px;
}
Here's the HTML:
<ul class="col">
<li class="sample"><span>anchor text</span></li>
</ul>
The CSS for col and col.li work fine when transferred to the external stylesheet. But as soon as I transfer the css for .sample span, that's when the image background disappears. Also, as far as I know, the class names are unique and I don't see a case of overriding.
Any idea why this is?
url(...) is relative to the file it is found in. So when it is in the html file, it tries to load ../image.jpg from the HTML file location. When you move it to the CSS file, if the css file is in a different folder, it may search a different folder.
Make the url either absolute or adjust it to be relative to the .css file and your code should work.
A way you can confirm this in the future btw is to hit F12 in the browser, then click the element and check the css rules. It has debugging info that includes the active rules and links to images to inspect.
I've been patient with this, it is..
aside{
width: 300px;
margin: 0 10px 10px 0;
padding: 5px;
background-image:url ("images/simple_dashed_#2X.png");
position:relative;
float: right;
height: 800px;
border: solid #002222;
color: #bab1b1;
text-align:center;
}
the images folder is in the same folder as the .html file. I did also try (".../images/simple_dashed_#2X.png") I have also checked and rechecked the name of the picture it's correct capitalization and all. It just shows nothing.
It sounds from your overall level of confusion over the problem that you are not using your Chrome developer tools properly.
You can use the Inspector to determine beyond a shadow of a doubt if the image is not loading, is simply off screen, etc.
Please watch this video where JavaScript's Batman, Paul Irish, explains:
http://www.youtube.com/watch?v=O3W1yuq-ZlE
I guarantee you will be able to solve the problem on your own after watching this video for about 20 minutes.
Image references are relative to the CSS file, not your HTML document. Can you adjust your image path accodingly?
So, if your files are laid out like:
/
page.html
/assets
/CSS
styles.css
/images
simple_dashed_#2X.png
your style should be:
background-image:url ("../../images/simple_dashed_#2X.png");
Replace
background-image:url ("images/simple_dashed_#2X.png");
with
background-image:url("images/simple_dashed_#2X.png");
Get out the space after url, and it should work again.
Js fiddle-> http://jsfiddle.net/niteshp27/XMUmq/
So when working with this site locally on my computer the hover over image works perfect. However, when I put the site up on a server then the image doesn't appear.
I'm referring to the links with the grey background image. I've provided the css specifically for the Contact us link.
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/Home.html
...
#Contact_us li:first-child a {
padding:9px 5px 15px 30px;
margin-top:25px;
background-image:url(../images/DefaultNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
text-decoration:none;
}
#Contact_us li:first-child a:hover {
padding:9px 5px 0px 15px;
margin-top:25px;
background-image:url(../images/CurrentNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
cursor:pointer;
text-decoration:none;
}
It appears that your images isn't where you think it is, I'm getting 404. It could be that you didn't upload it, or if your testing on Windows and deploying to *Nix it could be an issue with the case of the file (or directory) name.
You didn't send the image to the server:
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/images/CurrentNavBg.png
returns 404
Tip: Using webrowser with some king of inspector - for an example Chrome with build-in inspector or Firefox + Firebug is best friend of every webmaster, webdevloper, webdesigner, etc.
Edit
Try to avoid CaseMixing in all your file names and paths. This is very reason of mistakes and bugs, so using same variation of lower case is definitely better.
My favourite notation is_lower_case_underscored.jpg,
using hypens is other recommended way, however it can be reason of mistakes when creating filenames with JavaScript as the hypen can be recognized as minus operator by accident.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
hello
can someone tell me why this css does not display png in IE? many thanks
#header
{
width:1004px;
height:309px;
float: left;
margin:0px;
padding:0px;
background-image::url(../images/header.png);
background-repeat:no-repeat;
}
There is a double colon in ::url
Try this:
#header
{
width:1004px;
height:309px;
float: left;
margin:0px;
padding:0px;
background-image:url(../images/header.png);
background-repeat:no-repeat;
}
use firebug on firefox to see where the problem is, i'm assuming since you're aware of the double colon issue this may not be on your stylesheet so the problem maybe in the image file path, put in consideration where the css file is, if in sperate folder you might need to use a couple more of "../" to get back to the root where the page is and call the image in the css relatively