Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

IE not rendering my site correctly at all

Posted on 2013-06-18
3
Medium Priority
?
287 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 1000 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 44

Accepted Solution

by:
Chris Stanyon earned 1000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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 …

609 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