Iam using the following code in my file for overlay image.This works fine in firefox but not in IE6.Can anyone please suggest a solution for this??
<div id="1" onclick="document.getElementById('div1').className = 'nodis';" CLASS="nodis" style="width:100%; background:url('/gifs/overlay.png');" align="center">
Png overlays aren't supported in IE6, and you'll have to make use of other hacks* instead.
Or, you could do what Microsoft has already done: drop support for IE6.
Microsoft are pushing out IE8 as a critical security update, so even Windows users that have pirated windows copies will get automatic upgrades from IE6. And large corporations aren't an issue anymore, since very few IT departments in the world want to have unsupported 3rd party software under their responsibility.
If you're still worried that many of your users use IE6, and you want to make sure they can see the page correctly, make use of an update script such as IE6update, which will tell your users that they need a browser update to show your page correctly.
*) Thanks to deceze for the link to various hacks.
I might have misunderstood your question, but here is a solution for PNG fix using javascript: PNGFix. If this is not what you need, please correct me and give me more detailed explanation or link to your site.
Related
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)
I imagine there must be out there a website that collects information about HTML 5 feature and what browsers version started to support them.
This might be a good way to decide based on your website profile, if you can apply that HTML 5 feature without a fallback for your visitors.
Do you know such a site/resource ?
For example I want to know what browsers support the multiple upload feature for inputs and what browser version was the first.
Update
I'm not pleased with the sites suggested so I'm opening a bounty.
Suggestions so far: Html5Test, Caniuse, modernizr.com, QuirksMode
Update 2
Some people don't understand the question. I need to implement the multiple upload feature. I know from analytics what browser are they using ( I know this is not 100% correct ).
I'm willing to sacrifice some of the visitors by not offering some advance features but I need to understand how big is this procent. I'm NOT trying to DETECT in anyway the browser. It's a similar approach with other sites that dropped IE 6 support.
So please don't talk about bad practice.
Try to look at Html5Test or caniuse.
If it's server side, you can analyze user agent to find out if client's version supports HTML5. Wikipedia is your friend.
If it's client side, there's Modernizr library.
A quick search gave me this interesting result (reproduced in several blogs): http://www.findmebyip.com/litmus/
And you can may also want to take a look at this list of how to detect each feature: http://diveintohtml5.ep.io/everything.html
Here is another website, quite incomplete but verbose and "work in progress" as of March 2011, so it might be worth keeping an eye on: http://html5accessibility.com/
This one is off topic, but since I found it, I add it. CSS compatibility in IE browsers (very extensive): http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
And here you can find info specific to the gecko engine: https://developer.mozilla.org/en/HTML/HTML5
And, of course, MDC has compatibility tables for each feature, but separated in different pages, not as a table, e.g.: https://developer.mozilla.org/en/HTML/Element/input
http://www.modernizr.com/
HTML5Test.com collects the information but they don't give detailed reports for perusal.
A good reference site for some stuff is http://www.browserscope.org/ but that doesn't go into a lot of detail with HTML5 specific support
Another source of related stuff is http://w3c-test.org/html/tests/reporting/report.htm which is creating a set of HTML testing tools that can be run.
You or someone who wanted to create this information could use these tests and then store the UA String of each browser that hit the site with the results of each test.
Then you could just find the earliest version of each browser type that a feature successfully run on.
I think this information is stored in the databases of the sites mentioned but they just don't display it which sort of sucks. Maybe try emailing them and suggesting they add these reports.
Take a look at caniuse.com, it’s exactly what you are searching for.
QuirksMode is also a great resource, and there is an entry for multiple files input.
My vote is for:
http://www.findmebyip.com/litmus
Which i found via this blog:
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
You should try this website. I hope this is what you were looking for.
I need to create a page with all images and CSS in it, so it would be only one file.
I know that there is something like MHT (IE web archive), BUT there is problem. It works only in IE and Opera, not in FF. And i need my page to be working in all IEs (6+), Opera and FF. I know there is a way to encode my images in base64 and I also know, that IE 6 and 7 does not support data URLs. I've seen Dean Edward's trick for IE 6 and 7 but it works only with PHP support. And I can't use PHP, so this isn't working for me.
So, is there any way to create this kind of page? Please don't give me answers like "who is using IE6 today" or "install chrome frame". I know all this, but I need it to be working this way.
Thanks for the answer!
There is no cross-browser way to integrate all resources into one HTML file.
Your best bet is probably to serve a .MHT file for IE, and one with data: URIs for Firefox et al.
In some situations, a viable compromise may be serving a ZIP file that contains all resources, referenced using relative URLs. The user just has to unpack it, and can view it locally.
I can only think of one solution that will work in all browsers, and that is building an image from html elements, but it will be very much work to do so (per pixel or other strategy). Maybe jQuery can help a little. Also this might slow IE6 down (even more than normal...)
example: http://jsfiddle.net/huSq3/1/
I know it isn't much of a solution but I had to mention it. Now I'm thinking of it maybe you can use the canvas tag in combination of this javascript library for IE and draw the images to that via javascript.
Maybe you could use html conditional comments to decide which solution to use between MHT, data url, or any other partially supported solution...
If you are OK with the base 64 string in the image tag, then just hardcode it, then you do not need php
A design is a very important part of a web site. But making a layout cross browser compatible is very tough task.
What is the easiest way for this?
You may want to read about browser inconsistencies if you have a reason to be concerned. Other than that, I would not assume you have a problem unless you observe your pages being rendered differently across browsers. You should follow ANeves' advice and design in a browser other than IE and then test your pages as you develop.
You can use the tools located here in an article entitled "Cross-Browser Testing: A Detailed Review Of Tools And Services" to test that your pages in fact function correctly in different browsers.
The way I do it is by writing it and testing in Firefox, and each change I make I run it in IE. A lot of the times it will be different, but if you keep the changes small and isolate them then each one should be work-aroundable.
After it is completed, I check it in Safari and Chrome, and 99% of the time it's fine.
Also try to avoid tables if you can, learn to use CSS properly and it will save you a lot of time in the future.
I actually think it´s not that big of a problem. A very good starting point: CSS Mastery
Don't recrate the wheel. Try finding a website example that works in all browsers and check out it's code. It might help you out a lot.
For instance, if you want to develop just a layout (header, footer, sidebars, content, containers, menus and things like this)...I sincerely suggest you try different options available online.
For example:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://layouts.ironmyers.com/
You can find a lot of help for this online. That's only for a LAYOUT. I'm not sure about Visual Effects, I have to fight with each design every time I create a new one.
What works for me is to re-use the things that have worked for me in the past.