Website not displaying correctly in Internet Explorer 8
Permalink
Hi,
I recently had trouble getting to get my website to work in any version of Internet Explorer.
It now works in IE 9 but I've had no joy with IE8.
I have used Zurbs Foundation framework which according to the supporting docs should be compatible with IE 8.
When IE 8 loads my site it flickers from the intended design to a ugly view. As you can see my site wants to work in IE8!
I'm aware that IE 8 support is being dropped but a good proportion of local community are over 50 who may still run windows XP and IE 8.
I have done my homework and read various pages but due my inexperience I'm not sure how to proceed.
Any suggestions would be gratefully received!!!
Cheers
Pierre
I recently had trouble getting to get my website to work in any version of Internet Explorer.
It now works in IE 9 but I've had no joy with IE8.
I have used Zurbs Foundation framework which according to the supporting docs should be compatible with IE 8.
When IE 8 loads my site it flickers from the intended design to a ugly view. As you can see my site wants to work in IE8!
I'm aware that IE 8 support is being dropped but a good proportion of local community are over 50 who may still run windows XP and IE 8.
I have done my homework and read various pages but due my inexperience I'm not sure how to proceed.
Any suggestions would be gratefully received!!!
Cheers
Pierre
As I'm not very experience I'm not sure which method is the most appropriate.
I've looked at the Paul Irish method as its included as part of the Foundation Framework which I've based my theme on. What I'd like to know is would I have to include the prefix .lt-ie8 to every class or #id in my main.css and framework stylesheets?
I've used this in my header:
I don't think this works. In any case shouldn't the Modernizr script I've included help with backwards compatibility?
When I load my site in IE for a second it displays the intended design then switches over to a rather plain view. So it must be fairly close to displaying in IE8 without too much effort?
Cheers,
Petrovski
I've looked at the Paul Irish method as its included as part of the Foundation Framework which I've based my theme on. What I'd like to know is would I have to include the prefix .lt-ie8 to every class or #id in my main.css and framework stylesheets?
I've used this in my header:
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
I don't think this works. In any case shouldn't the Modernizr script I've included help with backwards compatibility?
When I load my site in IE for a second it displays the intended design then switches over to a rather plain view. So it must be fairly close to displaying in IE8 without too much effort?
Cheers,
Petrovski
You've got the conditional statement around a JS file. Was that intentional? I'm not 100% sure if JS files work with that. I haven't had to do it. I just know that IE conditional statements around a CSS sheet. This is how I use the IE CSS sheets: just override the classes (you may have to use an !important).
For example, in my main.css, I'll have:
And in the main-ie7.css, I'll have:
You may or may NOT have to use the !important. And I realize that was a stupid example, but it gives you the gist of it. Usually all I've got IE8 & below are width and/or position adjustments.
For example, in my main.css, I'll have:
.readmore{color:#fff;}
And in the main-ie7.css, I'll have:
.readmore{color:#000 !important;}
You may or may NOT have to use the !important. And I realize that was a stupid example, but it gives you the gist of it. Usually all I've got IE8 & below are width and/or position adjustments.
Hi,
Thanks for taking the time to reply!
This is all extremely new to me and I really need dummies guide. The vast amount of information on this topic is giving my fried brain a hard time.
I have taken out of my head. I think this was causing IE8 to briefly display the intended design on page load.
Currently I'm using a free BrowserStack trial as I run a Mac and my site renders correctly when previewed in XP/IE8. Until I see it actually working on PC I remain sceptical. (See attachments).
Would this help?:
Like Winnie the Pooh "I am a Bear of very little brain"...
... So to simply put it... do I include a meta tag or piece of script in my <head> or is the solution to be found by using Paul Irish's conditional classes and targeting my CSS for example:
There is rather a lot of CSS. How do I know what to target?
Currently my header.php looks like this:
Cheers,
Pietro
Thanks for taking the time to reply!
This is all extremely new to me and I really need dummies guide. The vast amount of information on this topic is giving my fried brain a hard time.
I have taken
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
Currently I'm using a free BrowserStack trial as I run a Mac and my site renders correctly when previewed in XP/IE8. Until I see it actually working on PC I remain sceptical. (See attachments).
Would this help?:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Like Winnie the Pooh "I am a Bear of very little brain"...
... So to simply put it... do I include a meta tag or piece of script in my <head> or is the solution to be found by using Paul Irish's conditional classes and targeting my CSS for example:
.ie8 .element { margin-bottom: 15px; }
There is rather a lot of CSS. How do I know what to target?
Currently my header.php looks like this:
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <!DOCTYPE html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="<?php echo LANGUAGE?>"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="<?php echo LANGUAGE?>"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="<?php echo LANGUAGE?>"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="<?php echo LANGUAGE?>"> <!--<![endif]--> <head> <meta charset="utf-8" /> <!-- Set the viewport width to device width for mobile --> <meta name="viewport" content="width=device-width" /> <!-- Included CSS Files (Uncompressed) --> <!--
Viewing 15 lines of 44 lines. View entire code block.
Cheers,
Pietro
Ahhh I think I MIGHT know what's causing your issue with IE actually. None of the images are being called. Do you have a live example? I've had this experience before. It's how you call the images. I can't fully remember what the issue was and how I resolved it. I don't have my PC on me, but I can take a quick stab.
You can totally do what Paul is suggesting by using ie specific html classes. I haven't taken that approach yet, but it's a good way. :) You would only have to override the classes that need to be overridden so you'll need some CSS experience with IE. You don't have to over ride every class called though. Just the ones that need to override to make it look alright in IE. Look athttp://propertybyprime.com/. That one I only had to fix in IE7 or less. If you look at the IE style sheet, I only had classes that I needed to override in that stylesheet.
That's how I handle IE of course we all do things differently. :)
You can totally do what Paul is suggesting by using ie specific html classes. I haven't taken that approach yet, but it's a good way. :) You would only have to override the classes that need to be overridden so you'll need some CSS experience with IE. You don't have to over ride every class called though. Just the ones that need to override to make it look alright in IE. Look athttp://propertybyprime.com/. That one I only had to fix in IE7 or less. If you look at the IE style sheet, I only had classes that I needed to override in that stylesheet.
That's how I handle IE of course we all do things differently. :)
By the live example I think you mean :http://www.laxtonvillagehall.com...
...so the Paul Irish method doesn't require a separate style sheet? So in my main.css I would have something like this?
I have improving knowledge of CSS but absolutely no experience of CSS with IE, so I guess it'll be educated guesses plus trial and error... all part of the learning curve.
...so the Paul Irish method doesn't require a separate style sheet? So in my main.css I would have something like this?
element { margin-bottom: 20px; } .ie8 .element { margin-bottom: 15px; }
I have improving knowledge of CSS but absolutely no experience of CSS with IE, so I guess it'll be educated guesses plus trial and error... all part of the learning curve.
Craaap. I knew there was a reason why I thought I should have brought my PC laptop into work. I totallly left it. I'm sorry. >_< Can you give me until tonight to look at it? Really sorry.
And yes, Paul's way does NOT require an external CSS stylesheet. And how you had it is right (but you're missing a period). Like I said, you MIGHT have to use the !important on the .ie8 class declaration.
I'm fairly sure your issue is how the images are being called, but it's hard to know until I have IE in font of me (and I'm currently on a Mac). SORRY!!
And yes, Paul's way does NOT require an external CSS stylesheet. And how you had it is right (but you're missing a period). Like I said, you MIGHT have to use the !important on the .ie8 class declaration.
I'm fairly sure your issue is how the images are being called, but it's hard to know until I have IE in font of me (and I'm currently on a Mac). SORRY!!
...no worries. I'm in no rush what so ever. Its a community website that I volunteered to undertake as I want to extend my graphic designs skills beyond printed page.
I found a several PC's at work running Windows 7 with IE 8 (bizarre combination!). From tests my end it works.
Firing IE for this first time the website failed, so I quit, restarted and tried again. The second time it displayed perfectly.
I'm hoping that others can confirm the same, so further feedback is much appreciated.
Currently on the search for a few tutorials on the subject so I'm better prepared in future.
This time I will read articles in more depth rather than just scanning them for key phrases, which causes me to miss vital information... I'm not the most patient person!
I you have any hints or advice I'd be very grateful indeed.
Pedro
I found a several PC's at work running Windows 7 with IE 8 (bizarre combination!). From tests my end it works.
Firing IE for this first time the website failed, so I quit, restarted and tried again. The second time it displayed perfectly.
I'm hoping that others can confirm the same, so further feedback is much appreciated.
Currently on the search for a few tutorials on the subject so I'm better prepared in future.
This time I will read articles in more depth rather than just scanning them for key phrases, which causes me to miss vital information... I'm not the most patient person!
I you have any hints or advice I'd be very grateful indeed.
Pedro
To be completely honest, I don't trust "Browser viewing" tests. I've never had great experiences with them. Sometimes you just gotta grab a computer with the darn browser on it! I'll take a look at it tonight and let you know.
Regarding CSS and IE, the only thing you can do is try. You never know what works until you try. I've had plenty of time to figure out what works in IE and what version. ;) I try to plan for it so I don't need a bunch of IE only sheets, but sometimes you just need them. Especially with IE7 and below.
PRACTICE MAKES PERFECT!
Regarding CSS and IE, the only thing you can do is try. You never know what works until you try. I've had plenty of time to figure out what works in IE and what version. ;) I try to plan for it so I don't need a bunch of IE only sheets, but sometimes you just need them. Especially with IE7 and below.
PRACTICE MAKES PERFECT!
Are we talking about the CSS? Have you tried to use a custom CSS stylesheet by using the IE only calls?
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/...