I'm having two problems:
My website is not forwarding from index.html on IE6 - IE9
Images are not loading on any page IE6 - IE9
For the first problem, if you go to http://www.matthallock.com/ the website cycles endlessly regardless if I link it to a file (e.g., /hamlet.html) or directly (e.g., http://www.matthallock.com/hamlet.html)
The second problem, more troublesome, is images appearing blank on Internet Explorer. Further, the problem appears to be with the jQuery, as the fixed sidebar also does not work.
I tried the degrade for the lazy load, but that doesn't solve the problem. Curiously, if you go to my blog at blog.matthallock.com, there is no issue and the styling of the sidebar appears correct.
Appearance and functionality works properly in Chrome, Safari, and Firefox.
Any help is much appreciated.
<META HTTP-EQUIV="refresh" CONTENT="0;http://www.matthallock.com/hamlet.html">
You need to specify url= before actually giving the URL, otherwise it just reloads the current page.
$("img").lazyload({
effect : "fadeIn",
/*
appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
Your browser console gives you this one for free: "Expected identifier, string or number" - IE does not like trailing commas in object definitions, and because of your multiline comment your resulting code is:
$("img").lazyload({effect:"fadeIn",});
See that extra comma? Remove it, and everything magically works.
Related
I am developing a web page that will only be available from the company's intranet. At first the client's requirements was that if needed to work with IE8 which was fine.
Our first problem was that after launching the site live so the client can test it, we realized that every employee's IE was configured to open intranet's website in compatibility mode (The way employees computer are set up) which destroyed everything visually since nothing was tested for IE7...
I managed to make it work at 95% by including this meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For the other small glitches on the page, I included a small script to detect if it was in compatibility mode and then load another css to fix those other glitches and it works perfectly, everything went back to the right place and the design is fine:
$(document).ready(function () {
try { JSON } catch (e) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='../css/compatibilityMode.css'>");
$("head").append(cssLink);
}
});
The problem now is that they need to be able to print that page so I need to make a css for print. The page is divided in sections and before every one of them I use this code to do a page break. EX :
.part2 { page-break-before: always; }
This works perfectly in Chrome and IE9+ but in compatibility mode it's ignored and the print preview is completely messed up...
I researched a lot on the web and the page-break-before property is supposed to be supported since IE4 so I do not understand why it's not working...
Also, to tell IE which styles to apply to the print version, I put my print css inside this tag :
#media print { }
According to my research online, some people say that this is not supported in IE8- since it's media queries and some says it is supported because media types were supported way before media queries and it should work...
I really don't know what to try and where to look anymore, was wondering if anyone could point me in the right direction or give me any suggestions as what to try next..
Thanks in advance!
I have a ul list with chevron bullet points effected by the following css code:
ul li::before {
content : "»";
padding-right: 0.3em;
}
This displays correctly initially; however after a while the bullet points change to ». This is fixed (for a while) by clearing the cache, but the problem will then recur, and I can't for the life of me work out why the extra character is appearing. I have tried content: "\»" and content: "\00bb", but the same problem happens.
This happens in Chrome and I think also Safari, in my local development environment as well as on the live website (http://markfisher.photo - the list in question is at the bottom under "Me elsewhere").
Further Info (Quite confusing, but if you follow you may be able to force the problem to manifest itself in Chrome):
Interestingly, looking at my live website now, even though it displays correctly on the page, upon inspecting the list, Chrome devtools says that the css is actually content: "\»". Refreshing the page with devtools open changes this, so it is then correct both on the page and in Chrome devtools. However, if I open the page (displaying correctly), open Chrome devtools (showing the extra Â) then close devtools and THEN refresh, the extra  displays on the page.
Any ideas would be much appreciated.
http://markfisher.photo/code/css/footer.css, when called directly in the browser, shows it that way already:
div.quick_links ul li::before {
content : "\»";
Switching the encoding explicitly to UTF-8 in the browser however makes it become "\»" then.
Try specifically telling the browser that this stylesheet is encoded in UTF-8, either by making the server add a charset to the Content-Type header, so that it becomes
Content-Type: text/css; charset=UTF-8
or by placing the line
#charset "utf-8";
at the very beginning of your stylesheet.
I am trying to make my web page look better in IE7. It is very frustating.
One of the problems I have found is pictured below. When following a link to a page, the rendering sometimes breaks in weird ways - below, it seems like the margins are off, and colour is missing. However, if you refresh the page, this issue clears up. If you refresh the page lots and lots of times, it doesn't break again - rendering is only bad on the first view of the page, after clicking a link or typing the URL into the address bar.
Do you have any idea why this might be? I am using css3pie to do background gradients and rounded borders, so the issue might be from here. Alternatively, is this an IE bug I don't know about?
My site renders OK in IE8, which also has to use css3pie to do gradients + borders.
EDIT:
If you zoom the page, this rendering problem fixes. Some stuff I have read seems to indicate that this is a known problem for some rendering in IE6/IE7, but I can't work out how to fix it.
I solved this problem by writing:
<!--[if lte IE 7]>
<style type="text/css">
div {
position:relative;
}
</style>
<![endif]-->
At the top of the page. I can't quite work out why this issue occurs - I think there is a bug in the rendering engine for IE7 that means that the css3 elements generated by css3pie are not given the correct margin. Another solution is to use padding instead of margin.
I can't work out why the issue would fix itself after refreshing.
Turn off the HTC file caching in Apache
LocationMatch ".*\.htc"
Header Set Cache-Control "no-cache"
/LocationMatch
I am developing a website in XHTML 1.1/CSS 3.0 and I have a problem with Internet Explorer 9. Each time I change pages from "Home" to "Features" various images flash 'white' before filling in. This 'white flash' occurs each time the page is changed. I have seen numerous stack overflow posts discussing such errors but they seem to be for older versions of IE. The site looks fine in Chrome.
Here is what I've tried so far --
ran XHTML through validator (it passes).
ran CSS Level 3 validator (it passes).
tried setting background color to black.
tried changing CSS include format to import and back again (per previous stack overflow suggestion)
moved from HTML/XHTML Transitional to XHTML Strict
commented out images to identify a specific image or div -- seems that most of them do it.
tried empty Script tag hack (for flash of uninitialized content bug in IE)
tried adding meta tags to change cache settings so browser uses cache.
tried various IE browser-specific meta tags suggested for IE6, IE7, IE8 to try to 'fix' the behavior.
Any thoughts on what I can try next?
Thank you!
The flashing could be a side effect of having multiple layers of background images, including the shadow layer which stretches to fill the viewport. I'd try disabling those effects and seeing if that helps. Who knows how that might be affecting IE drawing the page...
You might find that putting gradient.png on #innerContent instead of #content makes more sense, and in doing that, you you won't need to use multiple BG images on a single element.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.