Список по горизонтали

daykkin · July 23, 2009

Суть проблемы - ниже шапки идут 5 блоков градиентом (1,2,3,4,5). В IE 6,7 съезжает 5ый блок на след. строку.

Сам блок:

<div id="sellPan">
<ul>
<li><h2>1</h2></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
<li><p>5</p></li>
</ul>
</div>

CSS для блока

#sellPan{width:100%; height:230px; position:relative; margin:0 auto; padding:0; background: url(images/top-bg.gif) 0 0 repeat-x #FFFFFF; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}
#sellPan ul {width:100%; height:230px; display:block; position:absolute; top:0px; right:0px; margin:0px; padding:0px;}
#sellPan ul li{float:left; display:block; width:20%; height:230px; background: url(images/dot.gif) right top repeat-y;}
#sellPan h2 {height:230px; background: url(images/dot.gif) left top repeat-y; padding-left:10px; margin:0; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}
#sellPan p {padding-left:5px; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}

Весь файл CSS: http://diystores.ru/style.css

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

Edited July 23, 2009 by daykkin

3ABAPKA · July 24, 2009

   width:20%;
//width:19%;/*ширина для всех IE*/

Так пробовал?

Edited July 24, 2009 by 3ABAPKA

daykkin · July 24, 2009

Пробовал, при этом возникает ненужное продолжение 6-ого блока. Даже если указывать 19.9%, оно все равно имеет место быть.

3ABAPKA · July 24, 2009

#sellPan ul {
	display: inline;
}

А так?

Justnewone · July 24, 2009

#sellPan ul li{
	display: inline-block;
}

#sellPan ul li{ /*IE 6 и 7*/
	display: inline;
	zoom:1;
}

Без флоатов

Cabalist · July 24, 2009

Поставьте для #sellPan ul li ещё clear:right; и увидите чудеса))

daykkin · July 24, 2009

Огромное спасибо за ответы, но к сожалению так и не нашел идеального варианта.

3ABAPKA / Justnewone: Ваши способы почему-то отказываются правильно отображаться. Не получилось подогнать у меня под все 3 браузера.

Поставьте для #sellPan ul li ещё clear:right; и увидите чудеса))

Очень тонкое и хорошее решение проблемы, существует только одна мелочь которая смутила - появляется горизонтальный ползунок в IE после этого. Как бы мне его убрать правильнее?

Cabalist · July 24, 2009

Очень тонкое и хорошее решение проблемы, существует только одна мелочь которая смутила - появляется горизонтальный ползунок в IE после этого. Как бы мне его убрать правильнее?

Хм,по идее недолжно ничего появляться,возможно проблема у вас в коде,выложите пожалуйста свой код,поглядим)

Игорь Ермаков · July 24, 2009

Попробуй через display:inline;

oknechirik · July 24, 2009

Хм,по идее недолжно ничего появляться,возможно проблема у вас в коде,выложите пожалуйста свой код,поглядим)

должно, везде, где это метод упоминается, говорится про горизонтальный скролл

а использовать можно или overflow-x:hidden, или метод от Лебедева http://www.artlebedev.ru/tools/technogrett...floats-in-ie-3/

Cabalist · July 24, 2009

должно, везде, где это метод упоминается, говорится про горизонтальный скролл
а использовать можно или overflow-x:hidden, или метод от Лебедева http://www.artlebedev.ru/tools/technogrett...floats-in-ie-3/

Знаете,мне всё равно где там и что говорится,задача была устранить проблему в приведённом коде,я привёл пример при котором в этом коде не будут съезжать блоки и не будет горизонтальных полос,попробуйте этот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#sellPan{width:100%; height:230px; position:relative; margin:0 auto; padding:0; background: url(images/top-bg.gif) 0 0 repeat-x #FFFFFF; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}
#sellPan ul {width:100%; height:230px; display:block; position:absolute; top:0px; right:0px; margin:0px; padding:0px;}
#sellPan ul li{float:left; clear: right; display:block; width:20%; height:230px; background: url(images/dot.gif) right top repeat-y;}
#sellPan h2 {height:230px; background: url(images/dot.gif) left top repeat-y; padding-left:10px; margin:0; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}
#sellPan p {padding-left:5px; color:#666; font:14px/20px Arial, Helvetica, sans-serif; font-weight:normal;}
</style>
</head>

<body>
<div id="sellPan">
<ul>
<li><h2>1</h2></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
<li><p>5</p></li>
</ul>
</div>
</body>
</html>

У вас сто процентов всё будет работать без всяких полос,а то что полосы появляются,так это проблемы или в нутри кода или я незнаю почему,поэтому и попросил выложить человека его код,что бы вместе всем разобрать

daykkin · July 24, 2009

Мой код доступен в любом дебагере, пациента я привел в первом посте. Проблему решил указанием margin-right:-1px в ul для IE. Правда меня тоже терзают смутные сомнения, что не так это все должно делаться.

oknechirik · July 25, 2009

Мой код доступен в любом дебагере, пациента я привел в первом посте. Проблему решил указанием margin-right:-1px в ul для IE. Правда меня тоже терзают смутные сомнения, что не так это все должно делаться.

ну почему - это один из вариантов решения. и как недавно слышал: это ваше решение и, значит, это правильное решение

Sign In

Список по горизонтали

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information