I have an issue here, I'm working on a project which is properly working in firefox and chrome.
Now I'm testing in IE. I thought with all the advertising about IE9, it would look great, or at least not break anything.
I have several problems though :
I use some png images. And even if the images are showing, I have a little red cross above it. And I really don't understand why ... you can see it here : http://www.hostingpics.net/viewer.php?id=173809Sanstitre.png
In the same pic, you can see that the property background-repeat : repeat-x is not working. The funny thing about this, is that at the beginning it is working, and when the page finishes to load, it screw everything : http://hpics.li/feebab4
Does anyone have an idea what can be the cause of that ?
Thanks
EDIT : Oh also, sometimes IE9 is adding some stuff in the inline of my images like :
style="width: 171px; height: 52px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://localhost/Sites/promenadeSteCatherine/wp-content/themes/promenadeSteCatherine/img/menuGauche/titre_projet1.png', sizingMethod='scale');" alt="projet" src="x.gif"
It might be a problem with a plugin I'm using in wordpress, but I don't see which one, here is the plugins I'm using :
Advanced Custom Fields
Contact form
tinyMCE
user role editor
wp-slidinglogindashboardpanel
Both properties are fully supported by IE9+. Are you using any png 'fixes' for IE6, like JavaScript replacement or DX filters? They could be interefering.
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
In IE10, border is not getting displayed on page load, it displays only after I hover over that particular section. Its looking fine in IE9 and Firefox, the issue persists only in IE10.
Unfortunately I couldn't share code as its a restricted internal dev environment.
If anyone of you came across such scenario, please share the solution. Thanks in advance!
If you are familiar css then you might also know that the issue you have mentioned "displays only after I hover" will occur only when you have put something like the following in css
#a : hover
{
border:5px solid white;
}
If you haven't mentioned such thing in your Stylesheet or inside html tags then what #MarioErmando said would be the issue. Try using F12 Developer tools in IE to check.
Recently published project in beta stage. Was testing it with new browsers for a while.
I fixed all bugs including background-size, some main css3 properties on IE8.
The only issue on IE8 is following:
To quickly recreate the situation please enter to the website http://goo.gl/rlmelu and click on, for example, birthday. Then enter number of participiants, for example 30 and select some date. Then click "next".
That's how Firefox 26.0, Chrome shows result:
http://joxi.ru/3w7gUv3JTJDfEIXmJqM
And thats how IE8:
http://joxi.ru/Eg_gUv3JTJB-EJupfnA
Please don't tell me to not to use IE8.
What am I doing wrong? How to fix it?
First Problem : The Choose Button
The Problem is CSS PIE. Two possibilities:
Disable PIE
In iefixes.css, disable PIE for .btn
Set to important
Set the Background to important (But think about: Is !important bad for performance?):
.btn-warning{
background-color: #f0ad4e !important;
}
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
.idioma_es #logosFooter, .idioma_es #logosFooter li a {
background: url(../nImg/microsites/logos/logos_footer.png) no-repeat scroll left top transparent;
behavior: url(../../nJs/iepngfix.htc);
}
Result in Firefox:
Result in Internet Explorer 6 (Based on IE Tester for Windows):
the path of the .htc file is correct !
Any idea what i'm missing?
Don't test this with IETester. It's not completely reliable.
You should use a virtual machine, but you can quickly test a page with http://ipinfo.info/netrenderer/.
After Googling a little, I might have been a little unfair to IETester (though I still don't trust it).
http://www.my-debugbar.com/wiki/IETester/HomePage
Known problems and limitations :
CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
You can try PIE - http://css3pie.com, that is working in IE6 too.
IE6 does not support the alpha channel for background images apart from in specific circumstances. There is no general fix, as there is for foreground images.
Look here: http://24ways.org/2007/supersleight-transparent-png-in-ie6
Check the first bit of text under 'The pitfalls' heading