Проблемы с CSS, которые я не понимаю - PullRequest
Новая
       2

Проблемы с CSS, которые я не понимаю

0 голосов
/ 21 января 2010

Взгляните на http://keramed.com в IE и FireFox.

В FireFox все выглядит так, как я и ожидал. В IE основной блок гораздо дальше вниз, и я его не вижу.

Вот CSS: 

div#BoxHouse {
  margin-left: 0px; /* 72 */
  margin-right: 25px;
}

div.FloatingBox {
  text-align: center;
  float: left;
  width: 205px; 
  border: 1px solid #6C5C3B;
  padding: 0px 0px 5px 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
  margin-bottom: 30px;
}

div.FloatingContent {
  text-align: center;
  float: left;
  width: 90%;
  border: 0px solid #6C5C3B;
  padding: 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
}

#content {
  width: 90%;
  height: auto;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 35px; /* 72 */
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom:20px;
  padding: 5px 0px 5px 0px;
  z-index: 1;
  overflow:auto;
  top: 5em;
  padding-top: 5px;
  }

#leftnavigation {
position : fixed;
height : auto;
top : 10%;
left : 0;
width : 30%; /* 40 */
margin : 0px 0px 0px 1px;
color : #000000;
padding : 0px;
overflow : auto;
}

#columncontent {
position : fixed;
top : 10%;
bottom : 100px;
margin : 40px 0px 0px 220px;
width : 80%;
height : auto;
padding-left : 5px;
padding-right : 12px;
color : #000000;
border-left : 1px solid #6C5C3B;
overflow : auto;
}

Код: 

<div id="leftnavigation">
  <div id="BoxHouse">
     <br /><br /><br /><br /><br />
            <div id="Box1" class="FloatingBox">
                <span class="legend"><a name="announcements">Announcements</a></span>
                <?php include 'announcements.inc'; ?>
            </div>

            <br /><br /><br /><br /><br /><br />
            <div id="Box2" class="FloatingBox">
                <span class="legend"><a name="news">News</a></span>
                <?php include 'othernews.inc'; ?>
            </div>
            <br /><br />
        </div>
    </div>

    <div id="columncontent">
        <br />
        <div class="FloatingContent">
            <div id="container">

                    <!-- Main tabs across the top -->
                    <ul>
                        <li><a href="#Home"><span>Home</span></a></li>
                        <li><a href="#Products"><span>Products</span></a></li>

                        <?php
                            if ($_SESSION['ALLOWORDERING'] == "TRUE")
                                { ?> 
                                    <li><a href="#Ordering"><span>Ordering</span></a></li>
                        <?php } ?>

                        <li><a href="#AboutMain"><span>About KeraMed</span></a></li>
                        <li><a href="#MyKeramed"><span>My KeraMed</span></a></li>
                    </ul>


            </div>

        </div>
    </div>

Я не знаю, почему это так!

1 Ответ

5 голосов
/ 21 января 2010

У вас нет Doctype, это вызывает Quirks Mode , из-за которого браузеры ведут себя непоследовательно. Гораздо сложнее решать проблемы с разметкой между браузерами в режиме Quirks.

Добавьте Doctype, который запускает стандартный режим (AKA Strict) и проверяет ваш HTML. Это может не решить все ваши проблемы, но (как говорит Пекка) это наиболее разумная отправная точка для этого.

Я бы порекомендовал: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

Было бы также целесообразно отбросить таблицы макетов , злоупотребление несколькими <br> элементами как поля и другую разметку представления.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...