daykkin Posted July 23, 2009 Report Share Posted July 23, 2009 (edited) Есть пациент: http://diystores.ru/Суть проблемы - ниже шапки идут 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 Quote Link to comment Share on other sites More sharing options...
0 3ABAPKA Posted July 24, 2009 Report Share Posted July 24, 2009 (edited) width:20%;//width:19%;/*ширина для всех IE*/Так пробовал? Edited July 24, 2009 by 3ABAPKA Quote Link to comment Share on other sites More sharing options...
0 daykkin Posted July 24, 2009 Author Report Share Posted July 24, 2009 Пробовал, при этом возникает ненужное продолжение 6-ого блока. Даже если указывать 19.9%, оно все равно имеет место быть. Quote Link to comment Share on other sites More sharing options...
0 3ABAPKA Posted July 24, 2009 Report Share Posted July 24, 2009 #sellPan ul { display: inline;}А так? Quote Link to comment Share on other sites More sharing options...
0 Justnewone Posted July 24, 2009 Report Share Posted July 24, 2009 #sellPan ul li{ display: inline-block;}#sellPan ul li{ /*IE 6 и 7*/ display: inline; zoom:1;}Без флоатов Quote Link to comment Share on other sites More sharing options...
0 Cabalist Posted July 24, 2009 Report Share Posted July 24, 2009 Поставьте для #sellPan ul li ещё clear:right; и увидите чудеса)) Quote Link to comment Share on other sites More sharing options...
0 daykkin Posted July 24, 2009 Author Report Share Posted July 24, 2009 Огромное спасибо за ответы, но к сожалению так и не нашел идеального варианта.3ABAPKA / Justnewone: Ваши способы почему-то отказываются правильно отображаться. Не получилось подогнать у меня под все 3 браузера.Поставьте для #sellPan ul li ещё clear:right; и увидите чудеса))Очень тонкое и хорошее решение проблемы, существует только одна мелочь которая смутила - появляется горизонтальный ползунок в IE после этого. Как бы мне его убрать правильнее? Quote Link to comment Share on other sites More sharing options...
0 Cabalist Posted July 24, 2009 Report Share Posted July 24, 2009 Очень тонкое и хорошее решение проблемы, существует только одна мелочь которая смутила - появляется горизонтальный ползунок в IE после этого. Как бы мне его убрать правильнее?Хм,по идее недолжно ничего появляться,возможно проблема у вас в коде,выложите пожалуйста свой код,поглядим) Quote Link to comment Share on other sites More sharing options...
0 Игорь Ермаков Posted July 24, 2009 Report Share Posted July 24, 2009 Попробуй через display:inline; Quote Link to comment Share on other sites More sharing options...
0 oknechirik Posted July 24, 2009 Report Share Posted July 24, 2009 Хм,по идее недолжно ничего появляться,возможно проблема у вас в коде,выложите пожалуйста свой код,поглядим)должно, везде, где это метод упоминается, говорится про горизонтальный скролла использовать можно или overflow-x:hidden, или метод от Лебедева http://www.artlebedev.ru/tools/technogrett...floats-in-ie-3/ Quote Link to comment Share on other sites More sharing options...
0 Cabalist Posted July 24, 2009 Report Share Posted 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>У вас сто процентов всё будет работать без всяких полос,а то что полосы появляются,так это проблемы или в нутри кода или я незнаю почему,поэтому и попросил выложить человека его код,что бы вместе всем разобрать Quote Link to comment Share on other sites More sharing options...
0 daykkin Posted July 24, 2009 Author Report Share Posted July 24, 2009 Мой код доступен в любом дебагере, пациента я привел в первом посте. Проблему решил указанием margin-right:-1px в ul для IE. Правда меня тоже терзают смутные сомнения, что не так это все должно делаться. Quote Link to comment Share on other sites More sharing options...
0 oknechirik Posted July 25, 2009 Report Share Posted July 25, 2009 Мой код доступен в любом дебагере, пациента я привел в первом посте. Проблему решил указанием margin-right:-1px в ul для IE. Правда меня тоже терзают смутные сомнения, что не так это все должно делаться.ну почему - это один из вариантов решения. и как недавно слышал: это ваше решение и, значит, это правильное решение Quote Link to comment Share on other sites More sharing options...
Question
daykkin
Есть пациент: http://diystores.ru/
Суть проблемы - ниже шапки идут 5 блоков градиентом (1,2,3,4,5). В IE 6,7 съезжает 5ый блок на след. строку.
Сам блок:
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 by daykkinLink to comment
Share on other sites
12 answers to this question
Recommended Posts
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.