Jump to content
  • 0

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


Gorynch
 Share

Question

Добрый день!

Есть вот такой сайт. В 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;
}

спасибо

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

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

gluk.png

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

#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 by Синдром
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy