Пробел в конце веб-страницы, IE и Chrome показывают его в другом месте? - PullRequest
Новая
       4

Пробел в конце веб-страницы, IE и Chrome показывают его в другом месте?

0 голосов
/ 18 сентября 2011

Привет всем, я разместил вопрос ранее здесь: Почему я получаю пробел между моим элементом HTML? , который был решен.

Я продолжил работу над этой страницей и закончилсо следующим:

Снимок экрана IE:

http://postimage.org/image/2aqd5k99g/

Снимок экрана Chrome:

http://postimage.org/image/1xdm95138/

Что я действительно хочуЭто в основном скриншот Chrome, но без пробела под моим красным колонтитулом.Что я могу сделать, чтобы получить желаемый эффект для IE и Chrome?

Мой HTML-файл: 

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

<head>
    <link rel="stylesheet" type="text/css" href="swaggersstyle.css">
        <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>

</head>


<body>
    <img src="final.jpg" id="banner"></img>
    <ul id="nav">
        <li class="links"><a href="index.html">Home</a></li>
        <li class="links"><a href="planning.html">Planning</a></li>
        <li class="links"><a href="construction.html">Construction</a></li>
        <li class="links"><a href="evaluation.html">Evaluation</a></li>
    </ul>


<div id="mainc">
    <p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>   

<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>

<div id ="footer">
<p> fsafasfasf </p>
</div>

</body>
</html>

, а мой CSS-файл: 

html{
    font-family: sans-serif;
    background-color:#464E54;
}

body{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 5px solid black;
}

#banner{
    padding: 0px;
    margin: 0;
    display: block;
}

#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

}

#mainc {
    float: left;
    width: 760px;
    background-color: white;
    margin: 0;
}

#rightcolumn {
    padding-left: 3px;
    float: left;
    background-color: #dad8bf;
    width: 197px;
}

#footer {
    clear: both;
    background-color: red;
}

.links {
    float: left;
    margin: 0px;
}

a:link {

    display: block;
    width: 232px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:visited {

    display: block;
    width: 232px;
    font-weight: bold;
    color: #444444;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}


a:hover {
    background-color: #999999;
}

a:active{
    background-color: #999999;
}

Еще раз приветствую помощь всех - надеюсь, после этого я буду немного более знаком с этими таинственными белыми линиями, появляющимися.

Ответы [ 3 ]

2 голосов
/ 18 сентября 2011

добавить следующее правило 

 div#footer p {
     margin:0;
 }
1 голос
/ 13 июля 2012

Используйте элемент проверки на Chrome, щелкнув правой кнопкой мыши. Вы найдете область, которая синего цвета, наведя курсор мыши на соответствующую область, и затем вы сможете решить проблему

Проверяли ли вы его в разных браузерах Chrome (с разных ПК - в браузерах Chrome) или в вашем браузере установлено расширение менеджера загрузки, если да; затем сначала отключите его, а затем перезагрузите страницу.

Надеюсь, это работает для вас.

0 голосов
/ 18 сентября 2011

Многие из этих проблем решаются только путем импорта и использования CSS Reset . Почему ты не используешь их?

Теория: Браузеры применяют некоторый стиль по умолчанию к элементам HTML, и они не одинаковы в этом. Например, IE может добавить 15px margin к p элементам, в то время как Chrome может добавить 13px. Это означает, что несоответствия могут существовать между стилями HTML по умолчанию в разных браузерах. CSS Reset - это набор правил CSS, которые обнуляют эти значения по умолчанию. Например, вы можете видеть, что при сбросе CSS, p имеет значение 0 margin. 

p
{
    margin: 0;
}
...