Solved

IE not rendering my site correctly at all

Posted on 2013-06-18
3
268 Views
Last Modified: 2013-06-18
Hello All,

I have created a small page using HTML5. The site renders correctly for every browser except IE. My version of IE is 9. I have provided two screen shots. One of how the site appears in IE and the other how it should appear, and does, in all the other browsers.

Thoughts?

HTML CODE -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="transparency.js" ></script>
<link type="text/css" rel="stylesheet" href="transparency.css" />
</head>
<body>	
    <header>
    	<div class="container">
        	<a id="logo" class="float-left" href="www.coconino.edu"></a>
            <h2>Coconino Community College</h2>        
    	<!-- END CONTAINER --></div>
    <!-- END HEADER --></header>
    <div id="content" class="container">
    	<section id="lft-colm" class="float-left">
        	<div class="info">
                 <p>Type:</p>
                    <select id="pick">
                        <option value="fund">Fund</option>
                        <option value="organization">Organization</option>
                        <option value="category">Category</option>
                    </select>
                    <p>Expenses or Revenue:</p>
                    <select id="picked">
                        <option value="d">Expenses</option>
                        <option value="c">Revenue</option>
                    </select>
                    <p>Year:</p>
                    <select id="yearPick">
                        <option value="2013">2013</option>
                    </select><br/>
                    <button class="btn" onClick="showInfo()">Get info</button>
			<!-- END INFO --></div>
            <div id="canyon-img"></div>
         <!-- END LFT-COLM --></section>
         <section id="rgt-colm" class="float-left">
         	<h3>Funding Transparency</h3>
            <div class="info">
               <p id="transTxt" class="info"></p>
            <!-- END INFO --></div>
         <!-- END RGT-COLM --></section>
    <!-- END CONTAINER --></div>
    <footer>
    	<div id="footer-divider"></div>
    	<div class="container">
        	<div id="copyright">
        		<p>&copy; 2013, Coconino Community College. All Rights Reserved.</p>
            <!-- END COPYRIGHT --></div>
        <!-- END CONTAINER --></div>
    <!-- END FOOTER --></footer>
</body>
</html>

Open in new window

IE.jpg
other-browsers.jpg
0
Comment
Question by:Morgan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 39256533
It is in quirksmode because of the weak doctype, and does not recognize the HTML5 tags you are using.

Change this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Open in new window


To this:
<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

Open in new window


If there is still a problem post a link to the page and I will see what additional problems you have.

Cd&
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39256548
Your document has an XHTML (HTML4) doctype, and HTML5 tags - change the opening 2 lines to an HTML5 doctype and try again:

<!DOCTYPE html>
<html lang="en">

Open in new window

0
 
LVL 1

Author Comment

by:Morgan
ID: 39256623
Thank you both. That fixed the problem, and I had to turn of compatibility mode.

God I hate IE.

Though, my fault as well forgot to change the Doctype...

Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

735 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