I have a page that uses css. I works fine in firefox but when I open in IE there appears to be no styling.
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<p>
<nav>
<ul>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact Us </a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Trends</a>
</li>
<li>
<a href="#">Your Privacy!</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">mySite.com</a>
</li>
</ul>
</nav>
</p>
<%= yield %>
</body>
<aside style ="float:right; font-size:x-small;background:#ffffff;">
<center>
Local Areas
</center>
<% @states.each do |state| %>
<ul>
<a href= "/states">
<li>
<%= state.name %>
</li>
</a>
</ul>
<% end %>
</aside>
<footer>
</footer>
</html>
IE source
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
<link href="/stylesheets/scaffold.css?1295095254" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/effects.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/controls.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/rails.js?1294724842" type="text/javascript"></script>
<script src="/javascripts/application.js?1294724842" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="u33vgyzezXE8932GvLEjMtZNNAbB2FJOSmYQCnM4/OE="/>
</head>
<body>
<p>
<nav>
<ul>
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact Us </a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Trends</a>
</li>
<li>
<a href="#">Your Privacy!</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">mySite.com</a>
</li>
</ul>
</nav>
</p>
</body>
<aside style ="float:right; font-size:x-small;background:#ffffff;">
<center>
Local Areas
</center>
<ul>
<a href= "/states">
<li>
Texas
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Mississippi
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Alabama
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Alaska
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Arizona
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
California
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Colorado
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Connecticut
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Delaware
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Florida
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Georgia
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Hawaii
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Idaho
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Illinois
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Indiana
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Iowa
</li>
</a>
</ul>
<ul>
<a href= "/states">
<li>
Kansas
</li>
</a>
</ul>
</aside>
<footer>
</footer>
</html>
You’re using all sorts of HTML 5 tags which won’t work with most modern browsers… namely: nav, aside, and footer; replace these with divs and their CSS properties and you should be fine. You also have an anchor tag with list items inside it!
My advice would be to run it through the W3C validator to clear up the invalid mark up.