веб-страница не отображается должным образом в IE - PullRequest
Новая
       5

веб-страница не отображается должным образом в IE

1 голос
/ 21 июня 2011

Я знаю, что это известная проблема в веб-дизайне. Мой веб-сайт работает, как и ожидалось, в Firefox, Opera и Safary, но в IE первоначальный дизайн теряется. С контейнером что-то не так, как вы можете видеть в: www.skaldenmet.cjb.net

Я знаю, что кодирование не очень хорошее, но я хотел бы, чтобы кто-то сказал мне, в чем именно заключается проблема, чтобы мне не пришлось заново проектировать все с нуля.

Я надеюсь, что кто-то может помочь. Заранее спасибо!

HTML SOURCE 

<html>
<head>
  <link rel="icon" href="favicon.jpg" type="image/x-icon" />
  <link href="skaldenmet-css.css" rel="stylesheet" type="text/css">
  <title>Skaldenmet-Folk Metal</title>
</head>
<body>
  <div id="container">
    <div id="header"></div>
    <div id="navigation">

        <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="history.html">Historia</a></li>
            <li><a href="music.html">Música</a></li>
            <li><a href="band.html">Banda</a></li>
            <li><a href="contact.html">Contacto</a></li>

            <li><a href="license.html">Licencia CC</a></li>
            <li><a href="links.html">Enlaces</a></li>
            <li><a href="english.html">English</a></li>
            <li><a href="news.html">Noticias</a></li>
        </ul>
    </div>
    <div style="text-align: justify; background-image: url('bg55.jpg');">


            <h1>Bienvenidos a Skaldenmet,</h1>  
           <div style="text-indent: 160px;">  un proyecto folk metal desde el norte de Argentina.</div>
        <div style="padding: 5px;">
        <p>     
            En este sitio encontrarán información sobre la banda así como la posibilidad de descargar 
            <a href="music.html" title="Descargar el disco">"Bosque bajo la noche"</a>, el primer, y tal vez último, disco lanzado.<br>
        </p>
        </div>
    </div>
    <div id="footer">
        <p>2010-2011 | www.skaldenmet.cjb.net | Republica Argentina </p>
        <p>Content on this site is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
        <p>Sitio desarrollado con software libre <a href="http://es.wikipedia.org/wiki/GNU/Linux">GNU/Linux</a>.</p>
    </div>

  </div>
</body>
</html>

CSS FILE 

@CHARSET "ISO-8859-1";
*
    {
        padding: 0;
        margin: 0;
    }
    body
    {
        font-family:    Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
        font-size:      12px; color: #000;
        text-align:     center;
        padding:        12px 0;
        background:     #FCFCFC;
    }
    #container
    {
        margin: 0 auto;
        width: 800px;
        background:#fff;
        border-width: 2px;
        border-style:solid; 
    }
    #header
    {
        background-image: url(header2.jpg);
        background-repeat: repeat;
        width:800px;
        height: 200px;              
    }
    #header h1
    {
        text-align:right;
        padding-top: 80px;
        padding-right: 20px;

    }

    #navigation 
    {
        float: left;
        width: 800px;
        background: #333;

    }

    #navigation ul 
    {
        margin: 0;
        padding: 0; 
    }

    #navigation ul li 
    {
        list-style-type: none;
        display: inline;
    }

    #navigation li a
    {
        display: block;
        float: left;
        padding: 5px 10px;
        color: #fff;
        text-decoration: none;
        border-right: 1px solid #fff;
    }

    #navigation li a:HOVER 
    {
        background: #383;
    }

    #content-container, #content-container-index
    {
        clear:left;
        background-image: url("bg55.jpg");
        height: 400px;

    }

    /* esto no se si es necesario */
    #content-container 
    {
        padding:20px;
    }

    #content-image{
        width: 780px;
        text-align: justify;

    }
    #content-container h2
    {
        color:#000;
        font-size: 160%;
        margin: 0 0 .5em;
    }

    #footer {
        background-image: url(footer.jpg);
        background-repeat: repeat;
        height: 50px;  
    }

a:link { 
    color: #333333;
    }
a:visited { 
    color: #333333;
    }
a:hover { 
    color: #CCCCCC;
    background-color: #333333;
    text-decoration: none;
    }
a:active { 
    color: #333333;
    }

1 Ответ

3 голосов
/ 21 июня 2011

Вам нужно добавить тип документа в качестве первой строки для запуска режима стандартов: 

<!DOCTYPE html>

Без этого IE отображает вашу страницу в режиме Quirks (, который имитирует IE5.5 ).

См .: http://hsivonen.iki.fi/doctype/

Я не очень хорошо знаком с вашим сайтом, но после ручного изменения режима браузера на режим IE9 просто для проверки (нажмите F12), он выглядит "идентичным" Chrome.

...