пробелы между дивами @ DeForum.ru

Делаю мой первый сайт дивами и с помощью blueprint.
Пока полёт идёт нормально, не считая одного прескорбного факта:
всё отображается контролированно, во всех браузерах, кроме IE в котором между всеми дивами без исключений появляются вертикальные зазоры.
Как с этим бороться, что это?

IE 7:

FF3 или все остальные нормальные браузеры:

В мануале blueprint написано следующее: вставьте эти три строки в шапку сайта:

Код:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Последння строчка закомментирована и не может не привлечь к себе внимание. Логично подумал и убрал комментарии, но ничего не помогло. Кто-нибудь знает решение проблемы?

Укажи везде высоту и марджин: 0рх

Но вообще меню лучше делать не дивами а li, чтобы в html был только текст, а не картинки, так:

Код:

<div id="menu_items">
<ul>
<li><a href="#" class="menu1">menu1</a></li>
<li><a href="#" class="menu2">menu2</a></li>
<li><a href="#" class="menu3">menu3</a></li>
<li><a href="#" class="menu4">menu4</a></li>
<li><a href="#" class="menu5">menu5</a></li>
</ul>
</div>

Потом делаешь две (или даже одну) картинки - одна с меню в нормальном состоянии, другая в состоянии rollover для всех пунктов

Код:

#menu_items ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
   height: 100px;
   width: 100px; 
   position: relative;
   background: url(menu_bg_normal.jpg) left top no-repeat;
}

#menu_items ul li a {
   display: block;
   text-indent: -900%;
   position: absolute;
   outline: none;
   overflow: hidden;
   height: 20px;
   width: 100px;
}

#menu_items ul li .menu1:hover {
   background: url(menu_bg_over.jpg) 0px 0px no-repeat;
}

#menu_items ul li .menu2:hover {
   background: url(menu_bg_over.jpg) 0px -20px no-repeat;
}

#menu_items ul li .menu3:hover {
   background: url(menu_bg_over.jpg) 0px -40px no-repeat;
}

#menu_items ul li .menu4:hover {
   background: url(menu_bg_over.jpg) 0px -60px no-repeat;
}

#menu_items ul li .menu5:hover {
   background: url(menu_bg_over.jpg) 0px -80px no-repeat;
}

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

Я не помню, какое из значений в положении фона ставится первым - отступ по высоте, или слева. ПРоверь

Лампочка, смещение слева от левого верхнего угла )

Punk T-34 писал(а):

Последння строчка закомментирована и не может не привлечь к себе внимание

ооо чувак, ты в корне не прав ))
Это ж кондишнл коментс (в который раз)

Чтобы понять природу отступа — нужно видеть код. Скриншоты — как роды по телефону.

karamba, не, как надо top left или left top. Когда числовые отступы ставишь, важно правильно указать порядок. Но я никогда не запомню, можешь даже не говорить

Всегда приходится проверять.

Лампочка, left top, по часовой

Спасибо

После этого кота я не забуду :laugh:

оффтопик:

а почему тогда в паддинге и марджине начинается сверху?….

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

Punk T-34,
дай хтмл и цсс на этот кусок.

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

я делаю картинке: либо жёстко размеры, либо display:block, тогда пропадают эти дырки.

блоку: font-size: 0; тогда из блока всякая дрянь пробельная исчезает.
либо жестко задаю диву высоту и пишу ему overflow: hidden;

[cyber]form,
HTML: http://point-34.890m.com/des/goldcity/
CSS: http://point-34.890m.com/des/goldcity/c … screen.css

мда, придётся все высоты задавать жёстко.
Однако есть нюанс: вот на том, сайте, ссылку на который дал, там ширина каждого дива задана жёстко, но при этом правое меню с "комплексными услугами" и "галереей" сползает вниз! :confused:

не обязательно задавать высоты жёстко.

если вот этой картинке goldcity.jpg прописать display: block; - проблема исчерпывается.

тоесть выходит, что через CSS можно прописать свойство block для всех картинок страницы?

написал такое:

Код:

img {
display: block;
}

так везде зазоры пропали! Но появились опять между пунктами меню

Punk T-34, можно. Но лучше так не делать — это глобальное правило, а неизвестно, где и как в контенте картинки могут оказаться. Зазоры правильно пропали — картинки перестали быть строчными элементами, у них отключилось свойство дефолтной высоты строки. Лучше использовать наследование, типа

Код:

#header img {display: block;}

тогда картинки станут блочными только внутри контейнера с айди header.
(между прочим, азы и хрестоматия цсс… :dont:

Это я типа пристыдил )))
А чего появились в другом месте — хз.

karamba писал(а):

А чего появились в другом месте — хз.

А вдругом месте, как оказалось благодаря методу научного тыка, SWFobject вылез. Если отключить флэш на странице, то будет виден альтернативный контент, но как только в игру вступает SWFobject – оно ползёт.
При том, если использовать динамическую вставку, то ползёт. Если статическую - всё нормально (http://point-34.890m.com/des/goldcity/index2.html). Но статическая вставка через SWFobject меня не устраивает из-за того, что в IE и Опере нужно кликнуть на флэшке для того, чтобы её активировать.

Punk T-34, вообще, в дивной верстке, на мой взгляд, главное - использовать как можно меньше дивов, как это ни парадоксально. Есть много чудесных тегов, которые уважаются поисковыми системами, а цсс позволяет творить с ними все, что вздумается. Достаточно разделить страницу дивами на основные блоки, а потом использовать наследственные свойства для всех внутренных элементов. Тогда источник хтмл выглядит, как конфетка.

Punk T-34 писал(а):

альтернативный контент

ну тогда правильно, если контент — мерило сайта. Если мерило — внешний вид и на контент пох )) , используйте для контейнера

Код:

overflow: hidden;

DeДверь
Логин:
Пароль:
	Автологин