Серая полоска сверху страницы в Firefox и IE

Ратмир · June 27, 2009

Приветствую!

Нужна помощь опытных людей: на странице (http://semena.by/) вылазит серая полоска (#c0c0c0) сверху в Firefox 3.0.11 и IE 6.0.29, в Опере 9.51 всё нормально :angry:

В стилях стоит везде белый фон:

body, html {
	height: 100%;
	background: #FFFFFF;
}

div#page {
	background: #FFFFFF;
}

В коде после <body> сразу начинается <div>, также с белым фоном.

<body linkifying="false" linkified="0" linkifytime="21">

<div id="page" valign="top" align="center">

Откуда эта фигня может вылазить, кто знает? :unsure:

Firefox:

IE:

Opera:

s0rr0w · June 27, 2009

Непечатаемый символ

уберите

Ратмир · June 27, 2009

s0rr0w, а где он, этот непечатаемый? :angry: Почему-то я его нигде не наблюдаю, между <body> и <div> даже перенос строки убрал - всё равно полоса остаётся :unsure:

s0rr0w · June 27, 2009

s0rr0w, а где он, этот непечатаемый? Почему-то я его нигде не наблюдаю, между <body> и <div> даже перенос строки убрал - всё равно полоса остаётся

Непечатаемый он называется потому, что он не выводится на экран :angry:

Уберите все пробелы между первым дивом и бади. И потом поставьте его снова

Ратмир · June 27, 2009

Уже сделал, всё равно не пропадает :unsure: Код выглядит сейчас так:

<body><div id="page" align="center" valign="top"><table class="main" width="90%"><tr>

s0rr0w · June 27, 2009

Уже сделал, всё равно не пропадает Код выглядит сейчас так:
<body><div id="page" align="center" valign="top"><table class="main" width="90%"><tr>

Заглянул в код. Вам стоит для начала исправить все ошибки, которые у вас есть в коде.

Например <a href="#rassada";

Поставьте плагин к FF - https://addons.mozilla.org/uk/firefox/addon/249

Облегчит вам страдания.

Ратмир · June 27, 2009

Ладно, попробую, только я немного не понимаю, в чём связь ошибочных ссылок и той серой полоски :unsure:

s0rr0w · June 27, 2009

Ладно, попробую, только я немного не понимаю, в чём связь ошибочных ссылок и той серой полоски

Связь прямая. Все символы, которые нарушают синтаксис HTML выносятся браузером за пределы дерева нод. И туда может попадать все что угодно.

dyadya · June 27, 2009

В файле стилей

<link type="text/css" href="css/images.css" rel="stylesheet"/>

присутствует стока: body{background-color: silver} - "А ларчик просто открывался..."

Edited June 27, 2009 by dyadya

Ратмир · June 27, 2009

dyadya, действительно, убрал строку и полоска исчезла, благодарю! :angry: А я и не думал, что в этом CSS, предназначеном для вывода увеличенного варианта картинок, могут лежать настройки для <body>. Только вот теперь не могу понять, почему у меня начало таблицы с текстом страницы (<table class="main">) смещено на 51px ниже верхнего края страницы :angry: , за счёт чего там остаётся много свободного места. В CSS я нигде ни padding, ни margin не прописывал:

body, html {
	height: 100%;
	background: #FFFFFF;
}
div#page {
	background: #FFFFFF;
}
.main {
	background: #fff1c0;
}

Однако при этом WebDeveloper показывает отступ div#page на 30px от top, и отступ table.main на 51px от top :unsure: Все остальные CSS проверил - там также отступов нет, в чём же дело?

Edited June 27, 2009 by Ратмир

s0rr0w · June 27, 2009

Только вот теперь не могу понять, почему у меня начало таблицы с текстом страницы (<table class="main">) смещено на 51px ниже верхнего края страницы , за счёт чего там остаётся много свободного места. В CSS я нигде ни padding, ни margin не прописывал:

Без кода нет бутерброда.

Ратмир · June 27, 2009

И самое смешное, что вновь в Опере 9.51 всё отображается нормально :unsure:

body, html {
	height: 100%;
	background: #FFFFFF;
}
div#page {
	background: #FFFFFF;
}

div#small {
	font: bold 12px Arial, Helvetica, sans-serif; 
	text-align: left;
}

div#caption {
	font: bold 24px Arial, Helvetica, sans-serif; 
	color: #df7c00;
}

div#caption_sub {
	font: bold 14px Arial, Helvetica, sans-serif; 
	color: #00342f;
	padding-bottom: 10px;
}

div#caption_small {
	font: bold 16px Arial, Helvetica, sans-serif; 
	color: #df7c00;
	padding-bottom: 3px;
}

div#menu {
	padding:5px;
}
div#sort{
	width: 100%;
	background: #FFFFFF;
}
.mi {
	font: bold 13px Arial, Helvetica, sans-serif; 
	padding:2px;
	margin-left:5px;
}
.menu {
	margin-top:5px;
}
.main {
	background: #fff1c0;
}
.logo {
	background: #ffff28;
	font: bold 20px Arial, Helvetica, sans-serif; 
	padding: 15px;
	text-align: center;
}
.text{
	font: bold 16px Arial, Helvetica, sans-serif; 
	padding:5px;
}
a {
	color: #FF6C00;
	text-decoration: none;
}
a:hover {
	color: #A30000;
	text-decoration: none;
}
h1 {
	font: bold 24px Arial, Helvetica, sans-serif; 
	padding-top: 3px;
	padding-bottom: 3px;
}
h2 {
	font: bold 22px Arial, Helvetica, sans-serif; 
	padding-top: 3px;
	padding-bottom: 3px;
}
h3 {
	font: bold 20px Arial, Helvetica, sans-serif; 
	padding-top: 3px;
	padding-bottom: 3px;
}
h4 {
	font: bold 18px Arial, Helvetica, sans-serif; 
}
h5 {
	font: bold 17px Arial, Helvetica, sans-serif; 
}
.menu_td{
}
.warning{
	font: bold 14px Arial, Helvetica, sans-serif; 
	padding:5px;
	color:red;
}
.small{
	font: bold 12px Arial, Helvetica, sans-serif; 
}

table tr.even td {
	background: #EDF5E5;
}
table tr.even td.sec {
	background: #F6FAF2;
}
table tr.odd {
}
td {
	border-bottom: 1px solid #E5E5E5;
	border-left: 1px solid #E5E5E5;
	height: 37px;
	padding: 3px 7px;
}
td.nobd {
	border-left: none;
}
td.menu {
}
th {
	background: #ffd686;
	border-left: 1px solid #FFFFFF;
	text-align: left;
}

Edited June 27, 2009 by Ратмир

Searcher · June 29, 2009

Проверьте код валидатором, у вас очень много ошибок.

и поставьте лучше другой доктайп, в вашей ситуации лучше этот:

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

Доктайп поменяйте перед валидацией, а то у вас там много ошибок именно для того доктайпа, что вы указали. С переходным html будет меньше ошибок.

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

Ратмир · June 29, 2009

Поменял тип, всё проверил, исправил десяток ошибок по мелочи, остались лишь

NET-enabling start-tag requires SHORTTAG YES

и

required attribute "ALT" not specified

с которыми, как я понимаю, подобный глюк связан не может быть, однако белая полоса всё ещё на месте... :unsure:

Great Rash · June 29, 2009

Вы в какой кодировке сохраняете файл? Случайно не в UTF-8?

Searcher · June 29, 2009

теперь забыли <html> перед <head>

и еще добавте для html,body

margin:0;

padding:0;

а лучше это сделать для всех: * {margin:0; padding:0;}

Ратмир · June 30, 2009

Всё сделал как посоветовали, отступ от верха ужался на 6px (было 30 и 51, теперь 22 и 45), но дальше - никак

теперь забыли <html> перед <head>

Блин, действительно, я наверное подумал, что <DOCTYPE> достаточно.

и еще добавте для html,body
margin:0;
padding:0;

Сделал, для всех (*) поставить не могу, есть завязанные на эти атрибуты div'ы.

Вы в какой кодировке сохраняете файл? Случайно не в UTF-8?

В ей самой, а что за глюки могут быть с ней связаны?

Searcher · June 30, 2009

При сохранении в юникоде некоторые редакторы вставляют первыми символами сигнатуру юникода. Так вот, её не должно быть.

Сделал, для всех (*) поставить не могу, есть завязанные на эти атрибуты div'ы.

Вот этого не понял вообще... На какие ещё "атрибуты" и что означает "завязаны div'ы"? Все можно переназначить ведь.

Great Rash · June 30, 2009

Поищите в своем редакторе опцию "Сохранить в UTF-8 без BOM", думаю что именно в этом дело. Например так умеет сохранять Notepad++

Ратмир · July 4, 2009

Благодарю, попробую сейчас действительно посохранять без BOM, может быть поможет

theo_ · July 4, 2009

Сделал, для всех (*) поставить не могу, есть завязанные на эти атрибуты div'ы.

нужно поставить для всех, а "завязанные" дивы уже потом отформатировать с помощью css. так будет правильнее

Sign In

Серая полоска сверху страницы в Firefox и IE

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information