Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

As the resident "IT Whiz" at work (ie: I know how to use a computer) I've been asked to develop a website for our small business. I've altered a wordpress theme for the time being and the company is very happy with the results. The only problem I am having with it at the moment is that for some reason the website does not display correctly and Internet Explorer unless I run it in Compatibility Mode.

The main problem that I have is that my menu "slider" (it rotates pictures with links to articles etc) does not display at all, neither does the top menu they are just blink text based links.

Even with Compatibility Mode enabled the slider and menus come back but the page is not centered unlike on both Firefox and Chrome. My googling has suggested the most common cause of this is old code but I'm not sure where to be looking. Is it likely in the css file or the actual php?

Also any ideas on how to trouble shoot the cause of this? As in is there some dev tools or debugger I can use that would highlight "broken" code for me?

share|improve this question
    
Which theme did you alter? –  JCL1178 Jan 9 '13 at 23:22
    
Have you tried validating your HTML? (Although valid HTML/CSS could still break IE.) –  w3d Jan 9 '13 at 23:55
    
Just tried validating it then, tinyurl.com/awkwczn is the result I have a lot to sift through. The theme I changed was smthemes.com/demo/linuxid although I haven't done a lot to the theme structurally –  user21318 Jan 10 '13 at 0:05
add comment

2 Answers

Fixing your HTML validation errors will actually bring you a long way to solving your problem. There are probably only about 4 "critical" errors, and most of the others are as a result of these few.

To get you started...

Line#10 - You have an erroneous double quote inside your content attribute:

<meta name="viewport" content="width=device-width, initial-scale="1.0" />

Line#109 - You appear to have an HTML comment inside an HTML comment - as a result of attempting to comment out a block of HTML. The comment is started on line#99.

</div><!-- #search -->

Close the comment first...

</div> --><!-- #search -->

Line#216 - 219 - You are nesting ps inside ps and appear to have a p mismatch.

Line#270 - You are attempting to link a stylesheet in your footer. This must go in the <head>...</head> section.

You've currently commented out your XHTML DOCTYPE. This will be triggering quirks mode in IE. You need a DOCTYPE. Probably <!DOCTYPE html> would suffice.

share|improve this answer
    
I've found the offending piece of code while going through and validating the rest. I've got a problem where my contact form has a fixed width (which I think is stupid on an adaptive template). I decided to comment out the php conditional at the top of my site that decides what device is querying the webpage so it can display the "correct" template. The code is here and ideally what I wanted to do was only have it display the desktop version of site regardless of the device, uncommenting this fixed it but I'm left back with my old problem obviously. –  user21318 Jan 10 '13 at 2:14
    
<?php global $SMTheme; if (preg_match('/mobile/i', $_SERVER['HTTP_USER_AGENT'])) echo '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "wapforum.org/DTD/xhtml-mobile10.dtd">'.";\r\n"; else echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/…;\r\n"; ?> –  user21318 Jan 10 '13 at 2:17
    
(Your code is not displayed properly here because the links have been truncated - use backticks to output code snippets). Anyway, from that code to always show the "desktop" DOCTYPE use something like: <?php echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'.PHP_EOL; ?> –  w3d Jan 10 '13 at 8:21
add comment

A good starting point would be a code editor with validation. One example would be Aptana Studio 3 which has many tools to analyze your code. It's free so it's worth the download http://www.aptana.com/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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