2

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?

Improve this question
3

2 Answers 2

Reset to default
2

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.

Improve this answer
3
  • 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, 2013 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/xhtml-transitional.dtd">'."\r\n"; ?>
    – user21318
    Jan 10, 2013 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; ?>
    – MrWhite
    Jan 10, 2013 at 8:21
0

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/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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