alexlut Posted October 16, 2007 Report Share Posted October 16, 2007 Есть блок content, растянутый на весь экран с ограничением минимального разрешения:div#measurer { position: absolute; width: 100%; top: 0; height: 1px; line-height: 1px;}#content { position: relative; overflow: auto; margin: 0; padding: 0; min-height: 100%; min-width: 925px; max-width: 1400px;}* html #content { height: 100%; overflow: visible; width: expression( ( document.getElementById('measurer') && document.getElementById('measurer').clientWidth < 925 ) ? '925px' : ( document.getElementById('measurer') && document.getElementById('measurer').clientWidth < 1400 ) ? '100%' : '1400px');}Когда внутри этого блока размещаю три последовательных float: left блока вида:#block { float: left; margin-right: 1%; margin-left: 2%; margin-bottom: 50px;}то в Опере и Мозилле левый отступ отображается как надо, а в IE - улетает пикселей на 60 от левого края.Подскажите пожалуйста, что не так?ps Даже если втыкаю один блок - та же история...pps У отступы тоже обнулены Link to comment Share on other sites More sharing options...
0 klierik Posted October 16, 2007 Report Share Posted October 16, 2007 что-то неправильно расчитывается ширина по всей видимости...выше приведенную конструкция минимальной ширины, я б рекомендовал, вам применять только! для IE6, так как IE7 поддерживает свойство min-width; как это делаеться, смотрите в Теории приатаченный топ по этой теме.практически уверен, что после того как используете хак для IE6, в ИЕ7 все станет на свои места.я не силен в яваскрипте, но ваша записьdocument.getElementById('measurer') && document.getElementById('measurer').clientWidth < 925по всей видимости неправильная. ведь хватает просто - document.getElementById('measurer').clientWidthа запись типа document.getElementById('measurer') врятли что-то вернет.так же совсем не обязательно ображаться к объекту через "document.getElementById('measurer')",ведь можно просто написать "this." Link to comment Share on other sites More sharing options...
0 alexlut Posted October 16, 2007 Author Report Share Posted October 16, 2007 * html #content { - я думал, что это и является хаком для IE6ps Проблема и возникает в шестой версииpps А в яве я тоже не силен - скрипт позаимствовал с сайта Альфа-банка целиком. Меняю значения под свои нужды, ну и живу потихоньку... Link to comment Share on other sites More sharing options...
0 klierik Posted October 16, 2007 Report Share Posted October 16, 2007 упс.. сорри. мимо глаз пробежала строка с * htmlпокажите, пожалуйста, сам html код Link to comment Share on other sites More sharing options...
0 alexlut Posted October 16, 2007 Author Report Share Posted October 16, 2007 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>...</head><body><div id="measurer"></div><div id="content"> <div id="header"></div> <div id="block" style="width: 50%"> <h1>...</h1> <p> </p> <p> </p> </div> <div id="block" style="width: 20%"> <p> </p> <p> </p> </div> <div id="block" style="width: 20%"> <p> </p> <p> </p> </div></div><div id="footer"><p>...</p></div></body></html>Пробовал для block задавать явный margin-left: 30px; те же яйца: в FF и Опере - пиксель в пиксель, а в IE6 :/ Link to comment Share on other sites More sharing options...
0 alexlut Posted October 16, 2007 Author Report Share Posted October 16, 2007 Вот код целиком. Сравните в Опере, FF и IE6<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Untitled Document</title><style type="text/css"><!--html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #ffcccc;}div#measurer { position: absolute; width: 100%; top: 0; height: 1px; line-height: 1px;}#content { position: relative; overflow: auto; margin: 0; padding: 0; min-height: 100%; min-width: 925px; max-width: 1400px;}* html #content { height: 100%; overflow: visible; width: expression( ( document.getElementById('measurer') && document.getElementById('measurer').clientWidth < 925 ) ? '925px' : ( document.getElementById('measurer') && document.getElementById('measurer').clientWidth < 1400 ) ? '100%' : '1400px');}#header { height: 150px; background: #FF0000; margin-bottom: 30px;}#block { float: left; margin-right: 1%; margin-left: 2%; margin-bottom: 50px; background: #FF0000;}#footer { position: relative; margin-top: -50px; padding-left: 15px; padding-top: 17px; height: 33px; background: #FF0000;}--></style></head><body><div id="measurer"></div><div id="content"> <div id="header"></div> <div id="block" style="width: 50%"> <h1>...</h1> <p> </p> <p> </p> </div> <div id="block" style="width: 20%"> <p> </p> <p> </p> </div> <div id="block" style="width: 20%"> <p> </p> <p> </p> </div></div><div id="footer"><p>...</p></div></body></html> Link to comment Share on other sites More sharing options...
0 klierik Posted October 16, 2007 Report Share Posted October 16, 2007 #block { float: left; margin-right: 1%; margin-left: 2%; _margin-left: 1%; margin-bottom: 50px; background: #FF0000;}попробуйте этот код.сейчас затрудняюсь вам скачать почему так, но знаю что ИЕ6 удваивает отступы в определенных ситуациях.когда-то читал причину, но уже забыл. просто помню что такое бывает, и использую вышеуказанных хак для решенияподобных проблем.с таким css у меня ИЕ6 и ФФ вроде одинаково показало Link to comment Share on other sites More sharing options...
0 alexlut Posted October 16, 2007 Author Report Share Posted October 16, 2007 Спасибо!попробовал - работает, но использовал другое решение (подробнее http://www.forum.htmlbook.ru/index.php?showtopic=5149)или, чтоб не лазить лишний раз: margin-left: 2%; display: inline; /* это лечит удваивание magin-а */ТЕМА ЗАКРЫТА! klierik-у СПАСИБО!!! Link to comment Share on other sites More sharing options...
Question
alexlut
Есть блок content, растянутый на весь экран с ограничением минимального разрешения:
Когда внутри этого блока размещаю три последовательных float: left блока вида:
то в Опере и Мозилле левый отступ отображается как надо, а в IE - улетает пикселей на 60 от левого края.
Подскажите пожалуйста, что не так?
ps Даже если втыкаю один блок - та же история...
pps У
отступы тоже обнуленыLink to comment
Share on other sites
7 answers to this question
Recommended Posts