I have come across this website:
http://www.fetchak.com/ie-css3/
It seems to work when I enter the URL in my IE6, then the "cat" in the picture further down has a "shadow" effect around it.
However, I follow instructions but can't get it to work.
I have a php file, which dynamically outputs images of classifieds.
These images has a class attribute attached to them: (something like this below)
$display_table.="<img src='-----' class='shadow'>";
echo $display_table;
The class shadow is in an external file which is included.
Here is the class:
.shadow{
border:none;
box-shadow: -2px 2px 4px #666;
border-radius:10px;
behavior: url(ie-css3.htc);
}
according to the website, this should work. But it doesn't...
Is it because I am applying it to an image?
Or maybe because it is a php file?
Any ideas?
Thanks
you may want to try the latest option at www.css3pie.com .
Basically, this site support several CSS3 setting on IE6-9. I tried your sample code and it works
Try adding position: relative; to your css statement. If it's anything like CSS3 PIE then you'll probably need to add this.
You might also want to check if the .htc file is being called with the correct header. This, again, is an issue that may occur with CSS3 Pie which may (or may not) apply here.
the path is relative to the HTML file
being viewed, not the CSS file it is
called from.
source by similar tool.
so giving behavior: url(ie-css3.htc); in fact you mean that you have the htc file in the same folder with the webpage. If it's not in the same folder, fix the path to be relative to the page, not the css file.
Related
I have troubleshot my client code to this one line which seems to redirect me to external site (original URL of embedded video) upon click and I want to disable it.
I went through documentation and it looks like mhp1138 has something to do with HTML5 player, but I can't find anything on it. Also how can I find the associated html file to remove the div or make the style="display: none;"? I would have also tried to update style.css file but this uses inline style which takes precedence. Don't know how to fix at this point, any suggestions?
enter image description here
I can't comment since I don't have 50 points yet, so I'll write an answer.
Have you tried to use !important on the CSS stylesheet to override the inline style? I know this is not ideal, but might be a workaround and might help you get started somewhere, at least that way you can test if you problem could be solved through style changes.
I am currently overwriting the CSS of a webgame I play to give a more pleasant user experience. The only thing that I am having difficulty with is replacing the background image correctly, as the original background image loads onto the screen before the script replaces it to a solid color. The solid color that I am replacing it with loads, but not until after the page loads.
Here is a gif of the issue I am running into.
I have tried using document.onload, .onDomContentLoaded, .ready, etc, but for some reason none of these are working. Is there any way I can prevent the background image from loading before the script is run?
window.onload will wait for all the resources to load.
However, it sounds like you should just add a background-color to the element and let the background render beneath it.
Have you tried the property as important? background-color: gray !important
I think this should prevent the image from showing up at all
Place this in an external Javascript file, and make a request for it before anything else in your head.
var myImage = new Image();
myImage.src = 'your_image_here';
What happens is that an external Javascript file blocks the rendering of the page. And the script itself will not finish till the image has been downloaded. So there won’t be any delay when you do switch the background.
You could use:
document.style.backgroundImage="url('img.png')";
I believe AmmarCSE is hinting at a possible answer, but the cause is unknown.
You should first review your HTML for the order in which your resources are loaded. The CSS is a loaded resource and can specify background colors and images. This will possibly explain the following:
If your CSS specifies colors/image resources, and the HTML loads the CSS resource prior to executing your document functions, you will continue to get this behavior.
You should review the CSS for the background image/color and change it there instead of attempting to override it with document functions.
This is an assumption of the problem. You should provide some HTML, JavaScript, and CSS in your original post to help others answer and review.
i have problem this is javascript function its dont show the image in background.
document.getElementById(showtag).className='loadings';
and this is class property in css i think the problem is in url path.loading.gif is in images folder.
.loadings
{
height:50px;
padding-left:15em;
background-image:url('images/loading.gif');
background-repeat:no-repeat;
background-position:center;
}
The problem is most likely that you have a directory structure like:
/css/style.css
/images/loading.gif
so your CSS is pointing to
/css/images/style.css
If so, add a / to the front of the URL.
You'll have to use the right path for the gif.
Now let's say your css loads from the path /style, and the image you look for is stored in the path /img/backgroundimages, then the background-image url could be url(../img/backgroundimages/loading.gif) or url(/img/backgroundimages/loading.gif). In other words, use a relative path originating from the path your css-file is stored, or use the absolute path from the server root (prefixing the url with /).
Assuming the variable showtag contains the id of an element that already exists on the page, your code should work.
So things to look at:
Does showtag have the correct value? (Check it by single-stepping the code in a debugger; in 2011, there's no excuse for not using debuggers for client-side code.)
Does the element exist when the code runs? Or is it added later? If it's added later, you will want to schedule your code to run later (by putting your script element at the end of the page, just before the closing </body> element, or by using window.onload or whatever "loaded" or "ready" event is provided by your library, if you're using one).
What happens if you manually add a div with that class to the page? Do the styles from the class get applied correctly? If not, you know you have a CSS/HTML problem, not a JavaScript problem. The developer tools in most browsers (see point 1 above) will help you figure out what the CSS problem is as well — for instance, by showing you that the image request is a 404 if the path to the image is incorrect.
I had googled for a long time to find out the solution but failed in the end.
Here comes my detail problems below:
I have a javascript code written with jQuery lib.
$('<link id="userCSS" rel="stylesheet" href="'+link+'" type="text/css" charset="utf-8">').insertAfter("title");
You can find out that we will dynamically load the CSS file from somewhere else.
And then , because the file generated by someone's server is different from person to person, there may have a random css segment like this:
body,html {
background:#000 url(http://i43.tinypic.com/xxxx.jpg) top left no-repeat;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
}
So , here comes a problem ! I hope I can trigger the onload event when background image is loaded but I had tried all ways with no hope.
Does anyone have some related experiences with this and give me a hand !? Thanks :]
No example code, but the best I can suggest is to extract the full url in parentheses, then create an image object, set the source to that url, and then bind whatever you action you want to the onload for that image. I'm not 100% it will work, but I believe that the image will only be downloaded once for both the background and your new image object, firing the event at the correct time.
You may need to also use the event.special.load plugin in case the image in the background gets downloaded before the image object is created. Because if that happens, it'll be coming from the cache which the onload event may or may not handle correctly.
Ok, I've rolled my own theme, I've made a custom jQuery UI pack (progress bar, date picker, slider) and installed it all. Seems to (mostly) work except for two things:
When my page first loads the datepicker div is visible; and
The text "Next" and "Prev" are visible in large font underneath my icons. None of the examples seem to have this problem.
Now (1) I'm currently solving by:
#ui-datepicker-div { display: none; }
in another CSS file but again none of the demos seem to need this.
What am I missing?
I fixed it using #ui-datepicker-div { display: none; }
Ok many thanks, It's Work bro, here what I've did to resolve :
write this style to file jquery-ui-1.7.1.custom.css (or anye css file that you loaded) :
#ui-datepicker-div { display: none; }
then refresh your page
make sure your javascript files are properly loaded, check for missing files or incorrect path.
make sure that your script run after the document is ready, try putting your script before and/or inside the $(document).ready(){}
try stripping out your own css to see if there's any css conflict.
post some code for us here. :)
I had a similar problem because I was using the wrong version of the stylesheet for the version of jQuery UI I was using (I'd upgraded the jQuery UI without upgrading the stylesheet). If you're using jQuery UI 1.8.17, make sure that the stylesheet being used is also version 1.8.17.
Knowing nothing else about your problem, I believe it may be other css on your page conflicting with the picker.
For me the css was not included (jquery.ui.datepicker.css). So I saw a div (ui-datepicker-div) at the bottom of the page and I got the following error with FireBug: instActive is undefined.
Please change from
instActive.inline
to
(typeof(instActive) == 'undefined' || instActive.inline)
in your jqueryui.js
For discussion on this goto->http://code.google.com/p/jquery-datepicker/issues/detail?id=285
Since no one answered the second part of the question...
Add the following two lines to your .ui-icon CSS:
text-indent: -99999px;
overflow: hidden;
That should fix "Prev" and "Next" showing up.