CODEWITHSUNDEEP
cssinternet-explorerruby-on-rails-3stylesheet
Antarr Byrd
Antarr Byrd

Reputation: 26091

Internet Explorer not loading stylesheet

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>

Upvotes: 0

Views: 6375

Answers (3)

Elliott
Elliott

Reputation: 125

Or if you don't mind using JavaScript, just plop the HTML5 shiv into the head of your page: http://remysharp.com/2009/01/07/html5-enabling-script/. I would recommend sticking with html5 if possible.

Upvotes: 2

Elliot
Elliot

Reputation: 2289

What version of IE are you using? IE doesn't support html5, and your using html5 tags which won't work. You need to replace them with div's and style them accordingly with css

Upvotes: 1

Dunhamzzz
Dunhamzzz

Reputation: 14798

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.

Upvotes: 3

Related Questions