I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.
Related
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
I've just finished my personal website. Everything is good with all modern browsers but I have just a little problem with internet explorer 8/7. My website is based on feeds from all my social network all posts are performed with masonry brick and infinite scroll, so the pagination is hidden. In IE the css style disappear just in the first page of my content and masonry doesn't work good until the second page is arrived. Are there anyone who can help me to find the error? IE doesn't serve useful tools to check it out so I need someone helps me please!!! Thanks to every one!
The reason why your formatting is broken in Internet Explorer 7 and 8 is because you're using the article element; which isn't natively understood in versions of Internet Explorer prior to 9.
I dropped in the HTML5Shim (which creates some support for HTML5 elements) and refreshed your page - it solved the issue(s).
I have developer toolbar, any other tools I am missing ?
I am not doing any fancy graphics/html 5.
I have just been told I need to a support ie8; so want to know if I need to test in both, or just ie8.
Have used ms superpreview, but this is only good for static sites - I am developig a large data driven jsp website. and as far as I can see there is not any easy way to test on both ie6 ie8, without using a separate machine (albeit virtual).
edit
Will ietester remove my standard ie install (I want to keep developer toolbar). ietest will enable me to test under both, and then develop usign developer toolbar in whichever is my browser (ie6/ie8)
IE6 one of the most dumbest browser and biggest pain for both designer and developer. There is no guarantee that your site will work in both IE8 and IE6. As for checking you can use the IE Tester software which is free. Some even say that we should stop considering IE6 :)
You'll need to test in both. IE6 renders pages in a vastly different manner than IE7 or IE8.
Definitely not. If you need a page / site to work properly in IE6 then develop for that. More often than not a page that works in IE6 will work in everything else.
IE6 in particular is terrible with it's calculations regarding spacing, especially where padding is involved.
Test in both browsers on all systems possible.
Simple answer: NO.
you will need to test in all browsers you support as they all have differences to some degree.
IE6 is terrible at rendering css correctly.
you can use a tool called IETester to view your site in multiple version of IE although you wont have developer toolbar support. The other solution is to have different version on an windows image in a virtual machine.
The best way to develope a site is to develope it in a browser with the best support of css. (firefox, chrome, etc). Once you have done that then start adding browser specific fixes for browsers which do not display correctly.
Have a look at this article for how to setup your css file structure CSS
IE6 doesn't support HTML5 and CSS 3. In essence, your IE8 markups may not render well (in fact, many won't work at all) on IE6 (unless you do some CSS hack for IE).
If you want your system to work in both IE6 and IE8, test your system on both browser versions and make visual adjustments (CSS, HTML markup, etc.) accordingly.
Short answer: You cannot just code in IE8, you will need to test in IE6, too.
It's a very strange request to start coding only for those two browsers. Are you absolutely sure that's what you want? For example, what about IE7 or IE9? If you DO want to make your site as compatible as possible, in as many browsers as possible, you should make your site Standards Compliant (e.g. HTML 4 or XHTML).
Even if you don't, it's definitely where I'd start if I was going to focus on just IE6 and IE8. Unfortunately, IE6 will still likely give you trouble, but making your HTML/CSS standards compliant will make it easier a lot to ensure compatibility with IE8.
Tip to remember in IE6: If things aren't lining up exactly the way you imagine, it might be a carriage return in your HTML (yes, IE6 doesn't always ignore them *facepalm*).
Edit: Ah, corporate logic. I see.
We have a pretty big web page with a bunch of javascript. When loading it in Firefox/Chrome, the page gets loaded gradually. First the html that already is received is rendered and shown and then the javascript gets executed.
Internet Explorer 8 however waits until the request is completely received and its javascript executed before it shows. This gives the impression that the application is unresponsive for a short period.
We have one laptop on which IE8 loads the page like Firefox/Chrome and we've been searching for a setting on IE8 to indicate that it doesn't have to wait until all javascript is executed before showing the page or part of it.
Does anyone have a clue if there is such a setting and where it can be found? We checked that the Chrome frame for Internet Explorer is not installed.
Update:
For more clarification, as #Thariama points out in the comments I also thought that IE8 always waits to render the entire page but seeing this laptop render it I am pretty sure that it loads the 'Firefox-way'. The laptop had half the RAM and CPU power a comparable desktop had and it looked and feeled faster (because of the rendering).
I ran into the same issue today when trying to determine why IE8 would render incrementally when loading from localhost, but wouldn't when loading from an intranet server.
The fix is to tell IE which rendering engine to use. I prefer to always have it render using the latest engine available.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
The reason it was happening is because when loading from localhost IE was rendering with the IE8 engine in standards mode. When loading from the intranet, IE defaulted to rendering in compatibility mode using the IE7 engine. The IE7 engine would pause until the whole table was loaded before rendering, but the IE8 engine would render the table incrementally.
To check which mode IE is in for a particular page, hit F12 to pull up the developer tools, and in the menu area there's a "Browser Mode" which tells you which rendering engine it chose, and "Document Mode" which indicates quirks mode or standards mode.
I was recently tasked with resolving an IE8 page rendering issue in a legacy webapp (without changing much server-side code). I wrapped the largest sections of the page in textarea elements (on the server-side) and used JavaScript to extract their contents, remove the textareas and insert the html where the textarea was... it worked out nicely... it even seems to load faster in modern browsers.
If people use IE and it always does that, they've gotten used to this 'unresponsive' idea, whenever I zap open IE to check for compatibility, I just accept the fact that all pages look 'unresponsive' for a while.
It's part of IE, people that live in ignorance are used to that, they won't click away.
Not as much a solution to your problem, which is probably not there as telling you it's not that much of a problem. I don't think there is a way to give a browser instructions to adjust its rendering model for you though, and there shouldn't be, users should be able to adjust rendering models though, but not sites. Those things are a gateway to virus.
I've been pulling my hair out for the last few hours trying to wrestle with the IE8 developer toolbar while working with some styles not playing with IE7 mode properly...
Coming over from Firebug the difference is like... well lets just say its better then nothing.
What I'm wondering is, has there been any.. additions, patches, hacks, updates etc to improve the toolbar at all in IE8? It seems, like with most things associated with the IE line, this was really done as an afterthought and not much effort was put into making it work well...
Update: So I was, it seems, not specific enough.. here is what is annoying me about the IE offerings:
Style support - yeah, it is there, but it just doesn't feel right. It isn't easy to see the inheritance, and if you want to tweak an existing style you have to go into Attributes and add an override to the element.
HTML element location. This just seems a LOT cleaner in Firebug
Scrolling - If you have an element selected in the HTML pane, and you goto scroll in the CSS pane on the right it wont happen until you focus that pane.
Most of all its just the small annoyances - I think I've been too spoiled by Firebug, and I want it in IE - but considering the 'closed'-ness of the product it would be hard to get this rectified. To be honest, if I could contribute I would, because it would make my life so much easier - but... yeah.
Not sure what specific issues you are trying to debug, but the following tools all work well for their specific purposes:
Fiddler2 - HTTP Debugging Proxy - if you want to see what files are called, loaded, how, headers etc. this is the tool you want.
IE Tester - If you want to see how your site renders in IE6, IE7, IE8 without installing a bunch of virtual machines (or different PCs) this is a very good tool (not perfect, but very good)
DebugBar - Similar to the IE dev toolbar (but its been around much longer) it will let you inspect/alter various aspects of the HTML/CSS/JavaScript.
You're looking at Firebug Lite. See: http://getfirebug.com/lite.html
You can just install it easily onto your web page and it'll work just like Firebug on Firefox.
Tools may not help in this case as readily as you may wish. Here is Position Is Everything, a site that addresses some of the hacks required Internet Explorer. I have used IETester for IE 6 issues, but not for IE 8.
Good luck. IE issues really suck. If you're dealing with Sharepoint and it's mess of html and css I feel for you dude! If not, be thankful.