This is very strange. I'm the main developer of www.inspirastudios.com.mx. I use cufon font replacement for the main navigation menu. I develop in Linux, so I use Internet Explorer in wine to test my site. The problem I'm getting is that cufon substitution is not working in my IE7 version. It works OK for other IE>7 versions and in any modern standard compliant browser. The strange thing is that, using some online testing sites, like http://ipinfo.info/netrenderer/ and http://browsershots.org the site looks OK, while in some others (like http://www.thumbalizr.com) it doesn't. What the hell is going on?
The issue with online testing sites is that you don't know how they're set up. I'm betting that some of those sites use IE7 straight, while others might be using IE8/9 with the render mode forced to IE7, or some other similar chicanery. Never trust those sites if you actually care about your results.
Now, on to the results of your personal testing. In IE-over-Wine, I've had a lot of weird stuff happen and I'm not convinced that it's truly comparable to actual Internet Explorer. This goes double if you're using IES4Linux or similar, because you (again) really have no idea what's been done to it to make it run. Always use a virtual machine (or actual Windows machine) if you possibly can.
I can confirm, though, that cufon appears to be functioning properly in IE7 as far as my copy of IE7 is concerned. :)
I am using HTML 5.
I have included following line to cufon code:
<script type="text/javascript">Cufon.replace('.mid_body h1');</script>
the <h1>tag doesn't get cufon font
but when I convert it to:
<script type="text/javascript">Cufon.replace('h1');</script>
it works!
Related
I am working on a Wordpress site (a modified 2012 theme) for a client that is rendering incorrectly in IE8. Everything looks great in IE9+, as well as current versions of Chrome, FF, Safari, etc. I have looked around at some of the suggestions posted to fix the problem but I'm not quite sure where mine begins. The whole page is considerably broken. If anyone can provide me with some clues it would be a huge help. Thanks!
My Site
Edit: I'm noticing some of my styles are not being applied, specifically to top-nav and my footer. Others appear to have most if not all styles mostly intact. I've read that media-queries are not supported in IE8, but I don't see how that could be related. I am also reading that only 31 stylesheets can be applied, but I don't believe I am using nearly that many.
I had a project a while back where I have built an intranet and was nearly finished with the strap when I realized that most of the users rely on IE8; it was a shocking experience, can tell you that. That just as a preamble, so I know what your into.
I have wasted a lot of time so to safe yours (maybe), here what I would look for and probably do:
Install IE8 if you haven't already. There's a lot of tools which can help you with that like IE Tester as well as an integration installation from Microsoft directly to switch between versions
Eradicate the current errors first before you start working on the specific IE8 issues (as #markratledge already mentioned)
If you want to have HTML5 elements working as well then I recommend the HTML5.js Enabling Script
You have definitely too many HTTP Referrers (even for modern browsers), in IE8 (especially on a slower machine) it's sometimes deadly (Your page may load fast, however the rendering time is extremely long (+/- 6-20 seconds))
Combine and minify CSS and JScripts
There are a lot of services around the net where you put in your raw data and it compiles you a minified version, or server-side like Minify for PHP5
Move most scripts to the bottom to counterfeit rendering issues in IE8
Make a unique .css only for IE8 or use hacks, if really needed in your main, however you prefer (quick'n'dirty solution though)
IE8 and the X-UA-Compatible situation
How IE8 Determines Document Mode
I'm not too sure, but I think Mootools and jQuery together may create a conflict in older IE's (assumption)
Fix your code errors, in particular the JS call above the doctype. Anything above the doctype throws IE into quirks mode
Especially IE8 will get really hard on you for little mistakes inside the code, I have even seen script-includes not working because of being positioned lower than another in the code (while any other browser doesn't really care). It will take you at least a good bunch of hours to fix/erase all those errors and to make it compatible for IE8< users.
Beware that most clients (at least from my experience) don't (want to) understand browser compatibility issues like this one (It has to work!) or if really needed then make them understand that some features may be jeopardized/incomplete in the specific browser, herein.
There's plenty more you can do, but that depends on the deadline/timespan you have.
Fix your code errors, in particular the JS call above the doctype. Anything above the doctype throws IE into quirks mode
See [Invalid] Markup Validation of delindesign.com excellence - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Start fixing the code errors and revalidate.
My web applications are designed in IE6 compatibility mode. Now I need to migrate to IE8, but most of my web pages are not in good allignment in IE8 browser. First I tried the compatibility view in IE8(the button near the address bar), but of no use. Then as per somebodies suggestion I have added the meta tag '' in the section of every html pages, but still it is not working. I am using Windows XP professional OS version 2002 with service pack3 and IIS version 5.1. I am not sure I can migrate to IE8 with this system configuration. Moreover I am a beginner in this session. Could somebody please explain how can I acheive this?
Thanks in advance,
Lakshmi.
A good place to start would be to open up the pages in a tool like visual studio and look at the list of violations listed. Go down the list and start fixing things that are deprecated or wrong. Notepad++ has an "HTML Tidy" feature that will reformat and correct some common mistakes. However, many of the problems that you are going to encounter are not trivial - as in the entire paradigm followed is probably wrong. Converting a site is, unfortunately not the type of thing that we can do by running the pages through a wizard. I would start by creating a new MasterPage (or global template for whatever framework) that uses CSS for formatting and layout. Then you can migrate blocks of text into the new "skeleton". Some of the CSS template sites offer really nice free templates. Hope this helps.
If this helps you, the new IE 9 has developer tools (F12) which allow you to use either the IE7, IE8 or IE9 rendering engines to view any page.
As a best practise, when making any content for the web you should be checking compatibility on at least the 3 main browsers (IE, Chrome, Firefox), and probably some of the others (Safari). There are Visual Studio add-ins that can help with this kind of thing, by choosing which browser(s) are used for debug mode.
Some of the developer tool suites also allow you to edit content in the browser which can be a big time saver. This lets you tweak CSS and HTML and see the results in real-time, you then just have to apply your changes to the original code. Chrome, FireFox and IE (newer versions) all have tools for this kind of thing, and/or free plug-ins.
You will find in IE8 that the behaviour is better than IE7 and IE6 but still far from perfect, but should notice that the behaviour across Firefox, Chrome, Safari etc is fairly consistent.
I'm doing css for a website. I send the html and css to a guy, he puts it into ASP.net. The problem is that the transfer didn't end well for my code and it needs some fixing. The problem is that when I look at it in Chrome, or Firefox, or IE8, I get three completely different renderings. I spent a good amount of time trying to fix a drop-down menu that is supposed to appear while hovering over a link. The one he had in place from ASP.net worked in IE, kinda worked in Firefox, and was completely broken in Chrome (I haven't tested Safari or Opera.) Just getting it to look basically the same in firefox and chrome was a struggle. The html source is showing me two completely different pages as well.
Does anyone have experience with this? I know nothing of ASP.net, and it seems like the guy is modifying my layout with a wsyiwyg (I found tables used in random places, which I did not put there.) Faced with this, what is my best option? Is this fixable, or am I in over my head?
Many times WYSIWYG programs don't generate code that results in reliable, consistent renderings. However, there are a few things you can do to check your site's consistency.
You can use a program like Adobe BrowserLab (there's a free trial right now) to automatically render your page in multiple browsers side by side
You can use the w3 Validator to make sure that your code is standards compliant. If your code isn't standards compliant, then you will likely have issues across browsers.
Note that you can force asp.net to generate XHTML Transitional- or Strict-compliant code (if that's the standard you choose to implement) via the web.config file. Use the directive
<xhtmlConformance mode="Transitional"/>
if you want to enable this behavior.
Was your code rendering fine in those browsers before you sent it off to the .NET guy? If so, the programmer is doing something to muck up your work. ASP .NET won't change the way your code renders... it's simply the Windows equivalent of PHP (simply put).
I would suggest (if you haven't already) testing your code before hand-off to verify proper rendering. Take some screenshots, and if after sending your code to this developer things break, you can point out that it was working until he started messing with your markup. If that ends up being the case, at least you know it wasn't you. If it was, then we have more work to do. :)
Can you provide any samples?
The html source is showing me two completely different pages as well.
That sounds like your asp.net guy is doing something wrong there. You can use asp.net to do browser-dependant rendering, but it sounds more like his job is to just make the site render what you gave him, and it's usually better to get your html and css right to begin with.
My site roofcommunityservices.org I am being told has some div shifting issues in IE6. We do not have IE6 here at the office, but I do use the Firefox render tool to view a screenshot si I get the general idea. I am on a Mac and can't see the same issues as my client.
Could someone take a look at the site in IE6 PC and tell me what they are seeing, particularly on the donation page?
Thanks much.
You can see all kinds of browser setups by using browsershots.org
There is some shifting on the donations page.
Also, transparent .png files are not supported in IE6.
I haven't tested it in IE6, I don't have that either. But Generally the first thing I do when trying to see why something isn't working is run it through a validator. Sadly, your page really doesn't work well on a validator, and it runs lots of complaints.
Stating "XHTML Strict" and then using non-strict html really isn't a very sensible idea.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froofcommunityservices.org%2Fdonations.html
If you are lucky, fixing your 226 validation errors might help IE6.
People who disagree with me, try changing the closing tag of "title" to "titel" , and see the miracle occur where IE renders a completely white page but firefox doesn't mind.
As for getting Flash elements to validate, see here:
http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
http://www.alistapart.com/articles/flashsatay
This has also been useful in the past, but its a bit dated now:
http://jquery.lukelutman.com/plugins/flash/
Take a look here: http://www.stalebrew.com/2008/browsers/stand-alone-internet-explorer-6/
You can download a stand-alone version of Internet Explorer 6 for doing such testing.
Another option is to use http://browsershots.org to see screenshots of your website with various OS and browser options.
Everything was fine except for the banner you had at the top. When I checked in ff, all the sub-links were available. When I checked in IE6, none of them were shown.
It looks like your navigational menu is missing entirely in IE 6.
http://tinypic.com/r/35l7pc6/5
It might be prudent to have a virtual machine running XP with IE6 for testing your layouts. And, as other have mentioned, running your website through a validator (w3) and solving those validation errors can give you a good starting point with pinpointing some random display issues. Particularly if you have a lot of non-closed tags.
In addition to the solutions already mentioned, there's a javascript library called IE7 (nowdays also IE8), that claims to solve IE6 ja IE7 related CSS/PNG-problems. In my experience, it does solve some, but not all of them. It's very easy to use, you just need to include the javascript file.
http://code.google.com/p/ie7-js/
Here's some basic info about running windows on Intel Macs.
http://www.macwindows.com/winintelmac.html
Microsoft provides images of XP SP2 with IE6 and IE7 for free (for testing purposes). See http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-single-machine.aspx
There's a handy program called IEtester (only for windows i'm afraid, but remember the virtualisation/bootcamp) that helps you see your pages in IE5.5, 6, 7 and 8.
http://www.my-debugbar.com/wiki/IETester/HomePage
FORGET ABOUT IE6
we're already on IE8, people. it's like supporting IE4 when IE6 came out...
I have a small website developed using VS2005 and mySQl, it's just 2 webforms and login page.
During the development and testing phase, me and my customer were using IE6, and it was looking fine, we didn't test with other browsers because it's a small application, and just a add-in for large desktop application.
The customer informed me that site doesn't like the same when he installed IE7, for example I have a webfrom that show a page with Gridview that has multiply pages(AllowPaging=On), it doesn't look fine in IE7 and I can't navigate to other pages in Gridview, but it was working fine with IE6, and there's no complicated things, just plan GridView with small formatting.
I installed IE8 and doesn't look fine with it too, even in compatibility mood.
Have anyone faced the same problem?, and what should be the quickest or best solution for that?.
I know, I SHOULD NEVER USE WEBFORMS AGAIN.
The only reason for a difference in look between the browser versions is your styling and doctype.
Start with setting a doctype to run in quirks mode. You can get information about it here.
After that, see if things improve. If not, I would start ripping out any css/styles/themes you may be using. Then build it back up using normal CSS.
Incidentally, web forms isn't the problem in this case; it's a styling issue.
as Chris mentioned, add to that that browsers have really some annoying differences that makes you pull your hair sometimes, and 90 % of the time it is related to CSS.
so what i suggest is the following
use a tool called IE Tester, it is amazing tool that let you test your sites in all IE versions.
Use conditional command for targeting IE specific version if some CSS rule is wrong.
we use this tool http://rafael.adm.br/css_browser_selector/ it is really amazing it let you define css rules for each browser without hacking or conditional statement, but the down side it is Javascript dependent, but we had no complains.
also this script http://dean.edwards.name/IE7/ which is brilliant, it will let IE 6 behave like IE 7 which will save you tons of problems, again it is Java Script dependent.
Avoid Hacks as much as possible, the above methods will help you a lot.
hope this helps.