Лишние 2px от верхнего края body в Opera и FF

[Gorynch]

Добрый день!

Есть вот такой сайт. В Safari, Chrome, IE6, IE7 всё хорошо. НО. В FF и Opera появляется разница в 2px по высоте между верхними левым правым блоками и центральным. Как это победить? Голова уже квадратная. На просторах интернета не смог найти похожего. Почти лечится хаками для Oper'ы, но тогда такой же косяк в IE7 появляется.

HTML

<div id="top">
	<div id="menuLeft">
		<img src="/pics/topMenuLeft.png" class="png" width="225" height="150" border="none" alt="MenuLeft" usemap="#MenuLeftMap">
	</div>
	<div id="menuRight">
		<img src="/pics/topMenuRight.png" class="png" width="225" height="150" border="none" alt="MenuRight" usemap="#MenuRightMap">
	</div>
	<div class="out">
		<div class="mainmenu">
			<a href="/index.html">• ГЛАВНАЯ</a>
			<a href="/index.html">• НОВОСТИ</a>
			<a href="/index.html">• О КОМПАНИИ</a>
			<a href="/index.html">• СЕРВИС</a>
			<a href="/index.html">• КОНТАКТЫ</a>
		</div>
		<div class="in">
			<div class="content">
				<h1><a href="/index.html">МедКардиоСистем</a></h1>
				<span class="slogan">
					<br>
					т. (495) 447-57-55
					<br>
					info@medcardio.ru
				</span>
			</div>
		</div>
	</div>
	<div id="headEquip">Оборудование</div>
        <div id="headContent">... Главная ...</div>
</div>

CSS

#top{                       /*весь верхний блок*/
position: absolute;
left: 0px;
top: 10px;
width: 100%;
min-width: 1020px;
height:210px;
color:#ffc;
}

#menuLeft, #menuRight{      /*картинки с градиентами слева и справа*/
position:relative;
width : 225px;
}
#menuLeft {
padding:0px 0 0 10px;
float : left;
}
#menuRight {
padding:0 10px 0 0;
float : right;
}

#top .out{               /*центральная часть*/
float:center;
height:150px;
margin : -19px 235px 20px 235px;       /* !!!! если вместо -19px установить -21px, то в FF и Opera всё хорошо, а в остальных соот-но плохо !!!! */
background:#696;
}
#top .in{
float:center;
width:410px;
height:150px;
margin: 0 0 0 130px;
background:#696;
background-image : url("../pics/titlePic.png");
background-repeat: no-repeat;
text-align:center;
}
#top .content{
height:150px;
text-align:right;
}
#top .mainmenu{
float:left;
padding:20px 0 0 0px;
margin:0 0px 0 0;
text-align:left;
font-weight:bold;
}

спасибо

[psywalker]

Верхний блок неправильно свёрстан.

Вот например при таких раскладах круглые углы встают на месте.

#top .out {

margin: -21px 235px 20px;

[Gorynch]

я же вроде в комментарии написал, что при -21px в остальных браузерах не нормально

[Синдром]

Интересный глюк

Вы какой редактор пользуете? Проблема что в коде перед <div id="menuLeft"> стоит какой то непонятный символ... прикладываю скрин из Notepad++

Если его убрать то и отрицательный магрин вам не понадобиться (однако нужно тестить в ишаках)

#top .out{               /*центральная часть*/
float:center;
height:150px;
margin : 0 235px 20px 235px;
background:#696;
}

Что самое интересное, та же версия фокса под линукс не воспринимает его... вернее воспринимает так же как и хром. так что делаю вывод что вы пользователь виндоус

А вообще, можно покритиковать, кажется мне слишком вы все усложнили, и потом зачем шапку сайта ложить внизу кода, это вроде как даже не очень хорошо с точки зрения сео. Распинайте если не прав

И еще замечание по расположению право лево зафлотеных элементов.

У вас сейчас так:

<div id="menuLeft">
		<img src="/pics/topMenuLeft.png" class="png" width="225" height="150" border="none" alt="MenuLeft" usemap="#MenuLeftMap">
</div>			
<div id="menuRight">
		<img src="/pics/topMenuRight.png" class="png" width="225" height="150" border="none" alt="MenuRight" usemap="#MenuRightMap">
</div>

Для лучшей переваримости страницы седьмым ie советую поменять их местами вот как то так:

<div id="menuRight">
		<img src="/pics/topMenuRight.png" class="png" width="225" height="150" border="none" alt="MenuRight" usemap="#MenuRightMap">
</div>
<div id="menuLeft">
		<img src="/pics/topMenuLeft.png" class="png" width="225" height="150" border="none" alt="MenuLeft" usemap="#MenuLeftMap">
</div>

ps: хотя посмотрел сейчас в седьмом все гуд, ну вообще иногда бывают случаи когда вот такая простая перестановка исправляет глюки.

Удачи

Edited April 15, 2011 by Синдром

[Gorynch]

шапка внизу, как раз для того, чтобы информационная часть странички была самой первой, т.е. после <body> идёт сразу информация, а потом уже всё остальное. Вроде как раз так лучше для сео )

для данного сайта пользую notepad++, так как сайт довольно простой. В firebug тоже видел пустую строчку перед этим дивом, но не придал этому значения. Посмотрю в этом направлении.

за совет по поводу ie7 спасибо, учту

[Gorynch]

причина вроде бы определилась, но как победить - не знаю

все страницы у меня в UTF-8, сервер по умолчанию тоже на UTF-8

так вот, если поменять на 1251 или KOI8-R, то разница в 2px исчезает, но появляются 3 (левый верхний угол, над мнею в шапке и над левым меню) непонятных символа (скорее всего про которые говорил Синдром)

в коде всё чисто, уже удалял все табы, делал в одну строчку - не помагает

что это может быть?

[Searcher]

файлы в utf сохранять надо без сигнатуры unicode

[Gorynch]

это же надо - один единственный файл с верхним меню был с BOM - результат 2px. перекодировал просто в UTF-8 - всё замечательно.

всем спасибо

[sasha_design]

Три символа - это кодировка. У меня тоже была такая проблема. После перевода на кодировку без BOM всё работает нормально.