Solved

IE not rendering my site correctly at all

Posted on 2013-06-18
3
276 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
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).

691 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