IE 8 Render issues? - internet-explorer-8

I need some guide here about ie 8 rendering? (not sure how to phrase it). Here is the problem,
I have coded aspx and I have test on multiple browser and pc. It work prefectly fine. How I test for IE.
I pressed f12 and change the mode to ie8. It work prefectly fine on multiple computer. Till my client should be his laptop using ie8 and I saw all my items shift to the left side.
First I would like to know how can I test it. Since, my computer display completely fine?
Second, is there a reasons for different rendering?
I saw people said about meta tag. But I cant test it that is the problem. If meta tag is the solution. Does older pc support it?
The structure how I code my website only padding.
I only use margin if i want to align my div to the center which is margin: 0 auto. Other than that there is nothing special about my website.

I've found IE Tester an easy way to test multiple versions of IE - but you will have to upload the files to a server in order to view it since you will need to enter the URL to test.
Here is where you can find IE Tester: http://www.my-debugbar.com/ietester/?version=0.4.11 (it's free)

Related

Latest Nivo Slider 3.2 transitions not working in ie7 and ie8

I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.

IE 8/7 defect DOM and CSS

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).

If I develop webpages to ie8 will they render correctly in ie6?

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.

Internet Explorer 8 waits until page is completely rendered and javascript is executed

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.

Is there any difference between the box models of IE8 and Firefox3?

What are the main differences (if any) between the box models of IE8 and Firefox3?
Are they the same now?
What are the other main differences between these two browsers? Can a web developer assume that these two browsers as the same since they (seem to) support the latest web standards?
The Internet Explorer box model has been "fixed" since Internet Explorer 6 so long as your pages are in standard compliants mode.
See: Quirks mode and Internet Explorer box model bug.
Until I learnt about doctype declerations getting IE to work properly was a real PAIN, because IE runs in "quirks mode" by default. So having a standards mode doctype will eliminate a whole bunch of the most painful CSS problems.
I would never assume that any browser renders a page exactly the same.. always test!
Even though they support standards, there are plenty of variations between different browsers and even different versions. FF1 renders differently to FF2 which renders differently to FF3.
You also have to remember that each browser has their own JavaScript engine which again, will cause some scripts to work and other to fail.
You can ofcourse reduce these differences by using CSS and JavaScript frameworks which have been developed to support multiple browsers.
However, you still must test in all browsers. There will always be something that doesn't quite look or behave right.
Things that will always differ between the two (and other browsers) are default values (font sizes in headings, for example). The way they achieve default visuals is often different, as well, such as whether or not they use padding or margin to achieve the indentation in bulleted lists.
Something quite positive that I just noticed is that IE8 finally fixes IE's handling of margin: 0 auto for block elements that you want horizontally centered in their respective parents.

Resources