Xpoint
   [напомнить пароль]

Firefox и float, border etc

Метки: [без меток]
2005-06-07 17:16:00 [обр] Михаил Макушев(0/3)[досье]

Кто нибудь сталкивался с подобным артефактом? В указанном брозе нижеприведенный текст дает такой эффект, что текст справа обтекает тег ДИВ, а рамка вместе с бэкграундом проваливается сквозь него. IE обрезает корректно. Кто нибудь может что посоветовать? Частично помогает (но опять таки влияет только на ИЕ) добавление в module-space "float: right;" В лисе все тогда полностью сползает...

.menu-space {
width: 180pt;
float: left;
}
.module-space {
background-color: #999999;
border: 3px solid #666;
}

<div class="menu-space">
Menu1<br />
Menu2<br />
Menu3<br />
Menu4<br />
Menu3<br />
Menu4<br />
</div>
<div class="module-space">
Космический телескоп Spitzer, который работает в ИК-диапазоне длин волн, обнаружил у звезды HD69830, которая находится на расстоянии 41 световой год от Земли, теплое пылевое облако, которое выглядит очень похоже на пояс астероидов. Если в результате дальнейших исследований это предположение подтвердится, то это будет первый пояс астероидов, обнаруженный у звезды, имеющей примерно такой же возраст и примерно такую же массу как у нашего Солнца.
</div>

спустя 4 минуты [обр] Lynn «Кофеман»(0/571)[досье]
Михаил Макушев[досье]
Прочитайте стандарт
спустя 2 минуты [обр] Lynn «Кофеман»(0/571)[досье]
И, кстати, приведённый вами код у меня одинаково отображается и в IE и Firefox'е.
спустя 6 часов [обр] Евгений Петров(0/1055)[досье]
Михаил Макушев[досье] А .module-space{margin-left:180px;} не пробовали добавить? Примеров же на форуме масса.
спустя 10 часов [обр] Михаил Макушев(0/3)[досье]

Пробовал, это уже давно прошедший этап. Но понимаете задача была весьма специфическая, что я наверное даже немного форумом ошибся. Была идея сгенерировать аналог табличной разметки. Берем для начала то что есть сейчас (я специально не пользуюсь здесь CSS-ом)

<table width="100%">
  <tr>
    <td width="160pt;" bgcolor="#CCCCCC">Content 1</td>
    <td bgcolor="#999999">Content 2</td>
  </tr>
</table>

Цветом я выделил для наглядности.
Теперь смотрите что получается: Сколько бы вы не меняли размер окна браузера, таблица всегда будет растянута на все окно.
Левый столбец всегда будет 160 поинтов. А правый всегда будет меняться в размерах подстраиваясь под левый и подвсю таблицу, изменяя ширину и формат контента внутри себя. И от браузера подобная разметка зависить не будет.
Вот теперь вопрос: Может кто знает как реализовать (пусть даже в таком простейшем варианте) подобную разметку? Если это не осуществимо, то наверное следует заявить (даже мне как не глубокому специалисту), что CSS-разметка, по сравнению обычной, все равно что младенец по сравнению в высококлассным специалистом.
Опровергните меня, и помогите мне...

спустя 1 минуту [обр] Михаил Макушев(0/3)[досье]
И еще. Все вышеприведенные экспиременты я проводил в XHTML документах. как говориться "почуствуйте разницу"
спустя 55 минут [обр] Евгений Петров(0/1055)[досье]

Вариант с решением 3px bag:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<style>
body{margin:10px;padding:0;}
.d3{float:left;width:160px;clear:left;margin:5px 0;background:#eee;}
.d1{float:right;width:100%;clear:both;margin:5px 0 5px -160px;}
.d1 .content{margin-left:170px;background:#f6f6f6;}
</style>
</head>
<body>
<div class="d1">
<div class="content">1text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
<div class="d3">1text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</body>
</html>

Очень странное утверждение, однако... Похоже на шутку. А что такое обычная? Таблицы без CSS?
P.S. И причем тут xhtml?

спустя 49 минут [обр] Михаил Макушев(0/3)[досье]
Ну почти как шутка. Просто периодически подгоняя дизайн сайта под два браузера (IE и FF) сталкиваюсь с артефактами отображения. И суть ведь не в том что есть стандарт и пр. Суть в том, что стандарт на сегодня это то как отображается в той или иной программе, и хоть ты трижды утверждай что должно быть так и у тебя сделано так кк должно быть, посетителям все равно.
Касательно обычной, то да, без CSS. И XHTML тоже есть забавный артефакт. Например высота таблицы в 100%.
Кстати, то что вы предложили, действительно для меня изумительно. Так как первое это то, что работает (в выше перечисленных программах), а второе это то, что практически недоступно логическому пониманию "почему именно так". То есть править, скорее всего я уже не смогу, только если, скажем так "научным параметрическим синтезом"
спустя 34 минуты [обр] Евгений Петров(0/1055)[досье]
Михаил Макушев[досье] Для xhtml надо указывать:
html,body{height:100%;}
спустя 1 час 42 минуты [обр] Михаил Макушев(0/3)[досье]

Ну сдаюсь, но меня даже не это больше беспокоит. Нестандартные конструкции...вот например

float:right; ..... ;clear:both;

Как вот это объяснить? Сначала ставим обтекание а затем его тут же отключаем?

margin:5px 0 5px -160px;
А вот здесь зачем мэрджин? да ещё -160?

спустя 26 минут [обр] Евгений Петров(0/1055)[досье]

clear:both; не нужен - остался случайно.
Отрицательный margin используется для борьбы с 3-хпиксельным багом в IE. В теории можно было бы просто поставить 2 блока:

.left{float:left;width:160px;}
.right{margin-left:160px;}
<div class="left">left text</div>
<div class="right">right text</div>

Но в результате борьбы с багом приходится для правого блока ставить контейнер с отрицательным margin и размещать его в коде вперед левого.

спустя 32 минуты [обр] Михаил Макушев(0/3)[досье]
А что за баг такой? Где про него можно прочитать? И распространен он или его аналоги по другим БР-ам?
спустя 8 минут [обр] Евгений Петров(0/1055)[досье]
На форуме много раз обсуждался. Например здесь - http://xpoint.ru/forums/internet/html_css/css/thread/29042.xhtml
спустя 53 минуты [обр] Михаил Макушев(0/3)[досье]
Спасибо, теперь правда возникла проблема другого рода. Вложенные (на вашем примере это вложенные в "right text") "дивы" имеют свое float, после которго я по совету с данного форума ставил <div style="clear: right"></div>, который гасит не только локально, но и блока left. Вообще странная это штука float
спустя 18 минут [обр] Евгений Петров(0/1055)[досье]
Михаил Макушев[досье] Код или пример нужен. Догадываться, что и как сложно.
спустя 1 час 23 минуты [обр] SelenIT(0/67)[досье]
Рискну предложить еще один вариант реализации примера. Надеюсь, что он окажется немного проще для понимания, к тому же (при условии, что в правой "ячейке" текста всегда будет намного больше, чем в левой) его поведение с виду больше напоминает привычную таблицу (по-моему):
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>test</title>
<style>
body{ margin:5px; padding:0; }
.d1{ float:left; background:#f6f6f6; width:100%; }
.d2{ float:left; width:160pt; padding: 5px; }
.d3{ display:table; background:#eee; padding: 5px; border-left:5px #fff solid; }
* html .d3{height: 1pt;} /* another workaround for "3px gap" */
</style>
</head>
<body>
<div class="d1">
<div class="d2">text1 text1 text1 text1 text1 text1 text1 text1 text1</div>
<div class="d3">text2 text2 text2 text2 text2 text2 text2 text2 text2
text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2</div>
</div>
</body>
</html>
спустя 17 часов [обр] Михаил Макушев(0/3)[досье]
Беру таймаут на проверку. Просто я использую CMS-Xaraya и там очень сильная модульность, поэтому сложно проверять готовый код когда ошибка зарыта. Например в простейшем тесте все проходит.
Powered by POEM™ Engine Copyright © 2002-2005