?
Solved

IE not rendering my site correctly at all

Posted on 2013-06-18
3
Medium Priority
?
282 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 43

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

771 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