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
Related
After extensive research, I have tried
background-image: url("/images/image.jpg");
../../images/image.jpg
../images/image.jpg
/images/image.jpg
./image.jpg
And the entire URL. Plus others. I don't know what I'm doing wrong.
The path is forward one directory.
This is my CSS:
nav {
background-image: url ("./images/navmenu.jpg");
width:100%;
height:200px;
margin:0;
display:block;
padding:0;
}
Remove the space after url and also remove ./ before images in the path:
background-image: url("images/navmenu.jpg");
nav {
background-image: url ("../images/navmenu.jpg");
width:100%;
height:200px;
margin:0;
display:block;
padding:0;
}
use double dots before /images this will work for you.
Try opening the page up in chrome, then inspect the nav element then look at the css that your chrome is trying to access (mouse over the url portion in the css styles tab. It should help you identify your issue.
Please check whether folder name is images or Images. Accordingly use the style -
background-image: url("images/navmenu.jpg");
or
background-image: url("Images/navmenu.jpg");
if it is happening in your website please share the url so that we can find the exact problem.
Thanks
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)
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/
Using Firebug, I finally (this has been an ongoing struggle) found the CSS that I need to edit to fix my sidebar spacing program. It's below:
#sidebar .widget {
margin-bottom: 45px;
position: relative;
}
What I want to do is edit the margin-bottom to be 5px instead of 45. However, I cannot seem to find this specific CSS anywhere. When I find it through Firebug, it's in a file called all.css, but I can only edit the style.css file through Wordpress.
I've tried changing it in the custom CSS, but that doesn't fix anything. Can someone please help me? I know nothing about CSS, and I was so excited to finally figure out what I need to change, and now I can't change it!
Check in the <head> section, if the style.css is loaded after the all.css. If not, you must provide a CSS rule that will be more precise than the one from all.css, e.g.
#sidebar div.widget {
margin-bottom: 5px;
position: relative;
}
(if the .widget is a div, of course)
Hi I am developing a simple application based upon ASP.NET MVC. I have altered the default master.css to my have my own styles. Now the only problem is that i am adding background-image property to my one of my UL->Li->A to create menus. It is working fine in firefox but the images are not showing up at all in Internet explorer (IE7/8).
Does anyone has clue what is going wrong ?
my CSS is following;
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
color:White;
}
#nav-menu li
{
/*float: left;*/
margin: 0.15em 0.15em;
display:block;
}
#nav-menu li a
{
background-image: url('/Images/leftbarlightblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
text-decoration: none;
text-align: center;
color: white;
}
#nav-menu li a:hover
{
background-image: url('./Images/leftbardarkblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:15em
}
while XHTML is
<div id="menucontainer">
<div id="nav-menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
Yes i tried with ./Images/... but it still not worked.
Following is my hierarchy of folders
Solution -> Content
Site.css
Images
logo.jpg
leftbarlightblue.jpg
->Controllers
-> Models
->Views
Home
Shared
Site.Master
your stylesheet needs to use the literal path as follows:
background-image: url('/Content/Images/leftbarlightblue.jpg');
and not
background-image: url('/Images/leftbarlightblue.jpg');
If your working with CSS a lot I really recommend getting FireFox and FireBug, it will enable you to look at your stylesheets on the fly and see exactly why certain things aren't working.
Next have you double checked that the URL is correct for the image? A quick way of checking is to get the absolute URL (browse to it in the browser to be sure, it should be something similar to http://myapp/content/images/leftbarlightblue.jpg) and place that in your code instead of your old image URL. If that loads then it is probably your relative paths are wrong (the ../ part), because I don't know your folder structure I cannot help you with what it should be.
On a seperate note background-position should have the horizontal position followed by the veritcal position.
background-position: left bottom;
I guess the display depends on the url.
Where is your master.css located?
Have you tried url('Images/leftbarlightblue.jpg') instead?
I Got the issue, the images were created using CMYK. So FF was showing them using approximate colors while Internet explorer was totally ignoring them. Changing the format solve the issue. Thanks for your help guys.
Add the XHTMLfor #nav-menu, also if you have a live link of this problem post that as well
Try starting the image paths without all the extra dot's and slashes. For example:
/images/image.jpg
Instead of
../../images/image.jpg
I'm still not sure how the files are stored on your actual webserver so you may need to add a directory or two but usually it is not wise to use dot's to tell the server how many levels up to go in the directory tree (plus a lot of people forget that you need to specify where the image is as seen from the CSS file's location not necessarily the HTML/ASP file's location)