Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 1 down vote favorite

I have just converted a complex site from PSD to HTML/CSS. When I view the .html on Firefox, Google Chrome, and Internet Explorer 10, it displays perfectly. Then I rename my index.html to page.tpl.php and make a new theme. I write the .info file and link my CSS files. I create a db and create a blank d7 website. I enable the newly created theme and I check on localhost how the site appears.

It is perfectly rendered in Google Chrome and in Firefox, but now Internet Explorer 10 shows it broken. More specifically, it can't apply some CSS3 features, i.e. (pun intended) border-radius or multiple background URLs. Placeholder attribute, isn't working but I can understand this. From what I see html.tpl.php isn't HTML5 for Drupal 7, but CSS3 should be rendered correctly, shouldn't it?

So to recap: My site shows perfectly as .html in Internet Explorer 10, but after I rename it as page.tpl.php and create a new theme it breaks a lot of things, mainly CSS3. Google Chrome and Firefox continue to show the website perfectly.

What could it be? It seems so strange to me. Any ideas are sincerely appreciated. I am using Wampserver 2.2. I even installed XAMPP and tried this instead of Wampserver2.2 but the problem wasn't solved.

I copy-pasted the drupal generated source code to a fresh .html, opened it in with ie10 and it was rendered perfectly. Is it possible that I can't see it correctly on localhost because of an Apache quirk?

This behavior is easily reproducible using http://pastebin.com/5C9ja9nQ as example.

share|improve this question
have you declared the DOCTYPE on top of your html.tpl.php? – Federico Arena May 21 at 4:14
It doesn't seem to be a !doctype issue. I did override html.tpl.php and put my HTML5 equivalent but still, IE10 (and only IE10) doesn't render border-radius, multiple background images and placeholders (plus it shows a few quirky margins) although if I open the exact same file as .html then IE10 renders it perfectly. – Vagelis Kostopoulos May 21 at 4:55
For what i have learned while doing layouts is that IE does not auto-fix/auto-change wrong closed tags. Pherhaps you have missed something. Have you checked out the attributes on html tag? (Like xmlns, xml:lang, lang and dir) – Federico Arena May 21 at 5:08
no, the code is valid HTML5, I passed it from validator.w3.org/check. Incredible. exactly the same validated code (copy paste) is rendered perfectly as index.html and after I rename it to page.tpl.php and open it through localhost, it shows perfectly on all browsers except ie10. css is also CSS3 validated (jigsaw.w3.org/css-validator) – Vagelis Kostopoulos May 21 at 5:20
1  
Could you post the HTTP headers returned for the two cases as well? Sounds like this is actually a web server configuration issue. – Alfred Armstrong May 21 at 11:09
show 5 more comments

closed as not constructive by Ajit S, Patrick Kenny, Nikhil M, Chapabu, monymirza May 21 at 16:03

As it currently stands, this question is not a good fit for our Q&A; format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, see the FAQ for guidance.

1 Answer

up vote 2 down vote accepted

After hours and hours of digging, I found out that it is an Internet explorer compatibility issue. I included this: <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> in my header (through html.tpl.php) and pages are rendered correctly, both as .html and as page.tpl.php in a custom theme environent.

On a second notice, IE seems to default to displaying all local/intranet sites to be in compatibility mode. This is why the CSS would (semi)break only on localhost.

Pressing alt -> Tools Compatability View settings and unchecking the corresponding box seals the deal.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.