Solved

compatibility problem in ie8

Posted on 2013-01-03
12
472 Views
Last Modified: 2013-01-06
Hi
I have a  curious ie8 problem with a "if you cannot see this email correctly..." link on an email that links to a wordpress site.  When clicking on the link, the site initially comes up in ie8 in a non-compatibility mode and the styles go crazy. Needless to say, I don't have this problem in ie9 or any other browsers. I've tried playing with the
<meta http-equiv="X-UA-Compatible" content="..." /> tag, but it doesn't seem to make any difference, although when I refresh the page, the problem disappears. Does anyone know of anything else I could try? Is there some way of forcing an initial refresh just for ie8 users?
Thanks,
AviR
0
Comment
Question by:avir
  • 5
  • 3
  • 2
  • +2
12 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38739749
whats your doctype?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38739752
also, you beed to post a link to the site
0
 

Author Comment

by:avir
ID: 38739962
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The site is:
http://www.imj.org.il/youthwing/magazine
It's in Hebrew.

A copy of the newsletter that was sent can be found at:
http://www.imj.org.il/youthwing/magazine/send/01-13.html
Also in Hebrew, but it's the very top link.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:avir
ID: 38739982
Screenshots
good.jpg
bad.jpg
0
 

Author Comment

by:avir
ID: 38740017
I have another somewhat related problem with the same site. I don't know if I should post a separate question, but I will try including it here.
The same site appears in Chrome with a large uncalled for space between the header and the content. I can't figure out where it is coming from and it only appears in Chrome. Any ideas?
chrome.jpg
0
 
LVL 23

Expert Comment

by:Mohammed Hamada
ID: 38740095
Looks like a browser issue, is the IE8 fully patched ?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38740125
I would recommend updating the site to HTML5 doctype:

<!DOCTYPE html>
<html  lang="he-IL" >
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...

Open in new window


The gap in chrome is funky. I would suggest deleting that empty space from the source of the document to see if that helps. Sometimes you can get weird invisible characters that come from whatever editor you're using. (when I deleted the empty space in the chrome dev tools inspector, the gap went away)

Give all that a try.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 167 total points
ID: 38740706
Your code is full of errors, including serious stuff like duplicate id declarations and screwed up closing tags.

Validate the code; fix the errors; validate the css; and then you will be ready to deal with layout and cross-browser issues.  Trying to deal with presentation when there are serious errors, is just a waste of time.

Cd&
0
 
LVL 50

Assisted Solution

by:jcimarron
jcimarron earned 333 total points
ID: 38740820
0
 

Author Comment

by:avir
ID: 38740833
Thanks for all the feedback.
I've been checking the site on different browsers on different machines in the office. I have no idea if ie8 on the different machines is fully patched.
Since the site is built on a preexisting wordpress theme I don't what kind of effect there will be if I change the doctype to html 5, but I can give it a try.
Regarding the Chrome gap, although the gap appears in the dev tool and it can be deleted there, I am unable to find it in the source code. That's why I can't figure out where it's coming from. My editor is Visual Studio.
Regarding cleaning up the code, well I guess I have my work cut out for me, although I don't know how much is my fault and how much is in the theme itself. In any case, I'll give it a try although it will probably take awhile.
Thanks,
0
 
LVL 50

Accepted Solution

by:
jcimarron earned 333 total points
ID: 38740842
avir--This site will also help you cleanup the code
http://validator.w3.org/
0
 

Author Closing Comment

by:avir
ID: 38748272
I fixed most of the validation errors. Most of them were due to my sloppiness, a couple come from the theme code and a few come from external link parameters, which I can't do anything about. In any case, something worked, because the ie8 problem is fixed. Unfortunately, I still have that curious gap that appears only in Chrome.
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question