Solved

IE not rendering my site correctly at all

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Input box width 6 26
HTML Display Current Year 5 27
Button and js nou working 3 8
Hide Table in merge 3 9
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

778 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