clavin

Во-первых, когда речь идёт об IE, всегда стоит упомянуть его версию. Во-вторых, в IE6 display:inline-block;, если не ошибаюсь, задаётся таким образом: display:inline; zoom:1;

Как с обёрткой всё и получается. Посмотрите этот код и заметьте, что градиент (который указан для обёртки .i-wrapper) я увеличил и он может практически растягиваться на всю высоту страницы, до самого низа. Решение такое: надо ставить общую обёртку для всего контента - для шапки, футера и всего остального. Он растягивается вместе со всем контентом внутри него. Поэтому и градиент будет один и он будет растянут на высоту всего сайта.

Почему обязательно min-height:100%; а не просто height:100%;?

Этот код можно упростить так: .nav_top ul {} .nav_top .button_left {} .nav_top .button_left.active {} .nav_top .right {} .nav_top .shellbutton {} .nav_top .button_right {} .nav_top .button_center{} Большое количество классов ни к чему. А так видно, какие классы какому блоку принадлежат. В данном случае видно, что речь идёт о блоке с классом .nav_top

Очередной баг, которых полно у любого браузера

Я думаю, что это набор правил, которые нужно знать. И только. Правильные селекторы, например, нужно задавать.

Надо как то так: tr.tt { background: #f6d654 url(images/rtp.jpg) top center no-repeat; } Проверьте синтаксис!

Почитайте про это здесь. Псевдокласс с двумя двоеточиями вводится в CSS3.

ie8 и старше не понимают цвета в формате rgba.

Ваш код не будет работать на IE (в IE8 будет). Это из-за того, что IE действует не по стандарту и для элементов с position:relative; создаёт новый слой. Он создаётся для этих элементов в IE, даже если не указывать для них z-index Можно про это почитать здесь

alexandr_v-vich, это, вероятно, баг, которых полно у всех браузеров. Навряд ли что-то с этим можно поделать.

Аналогичная или такая же? Так-то всегда можно задать радиус в 100500px , ну это к вопросу о кроссбраузерности, а так, если не затруднит дайте скрин с моего примера (если он хоть немного отличается). В вашем примере ситуация полностью аналогичная. Круга нет, есть такой же полускруглённый квадрат, как и на скриншоте к моему примеру.

Сейчас я посмотрел свой пример в браузере Опера 10.62 и увидел странную картину: У дива, который во всех остальных браузерах выглядит как круглый, в Опере выглядит совсем иначе. Его углы скруглились каким-то странным образом. В примере от alexandr_v-vich аналогичная ситуация. Если задавать border-radius не в процентах, а в пикселях, то скругление происходит ожидаемо и корректно, но естественно, при изменении размеров шара это скругление работает совсем не так, чтобы шар оставался шаром. Это баг Оперы? Есть этому объяснение? У кого стоят более поздние версии Оперы, не могли бы вы проаерить, всё ли у вас в порядке с данными примерами. Если не в порядке, то решение не кроссбраузерно, что плохо

На текст в моём примере не обращайте внимания. Этот текст старого примера, который создал SelenIT, и я этот текст не изменил, хотя надо было

Стандарты сами грешат неполнотой. Хорошо бы, если они в самом начале написали однозначные термины, которыми постоянно пользовались бы в тексте. Так было гораздо эффективнее для понимания этих стандартов. В этой демонстрации коллапса марджинов я убрал для дивов overflow:hidden; и указал для них ширину. Если этот пример посмотреть в современных браузерах и IE7, то можно увидеть, что современные браузеры не создают новый блочный контекст форматирования для каждого дива, а в IE7 они создаются.

Вот здесь дано определение "блочного контекста форматирования". Хорошее объяснение на английском можно посмотреть. Очень хорошо сказано здесь, что новый блочный контекст форматирования создаётся у элемента, которому назначаются одно из следующих свойств: float: left float: right position: absolute display: inline-block display: inline-table display: table-cell display: table overflow: auto overflow: scroll overflow: hidden Если каждый из двух рядом находящихся блоков имеют свой блочный контекст форматирования, то у этих блоков не может быть, например, коллапса марджинов. А если внутри одного такого блока есть плавающий элемент со свойством float, то можно гарантировать, что этот плавающий элемент никоим образом не провзаимодействует с элементами из соседнего блока, ведь у них у каждого есть свой блочный контекст форматирования. <div> <!-- Здесь первый контекст форматирования --> <div style="float:left;width:50px;"> hello </div> <!-- Здесь другой контекст форматирования --> <div style="float:left;width:50px;"> world <div style="clear:both;"><!-- Этот блок не может взаимодействовать с блоками из другого контекста форматирования --> </div> </div> </div> Ещё здесь на английском есть отличия, которые имеют современные браузеры от IE6 и IE7 при создании новых блочных контекстов форматирования. Тоже полезное чтение.

Подскажите, где в Интернете можно увидеть исчерпывающий список всех вендорных свойств (начинаются с -ms-), которые понимает браузер IE9. Для IE8 такой список я нашёл, но нужно ещё для IE9.

А что вместо "инлайн-блочных" элементов?

Неужели в вашем случае вместо <li> и <ul> нельзя взять что-то другое? Тег <ul> в HTML5 даже не рекомендуют вставлять внутрь тега <p>. Их надо ставить на один уровень, так: <p>text</p> <ul> <li>item 1</li> <li>item 2</li> </ul> <p>text</p> Ссылку дать не могу, так как не помню, где это видел.

Искать надо на английском. Как на английском пишется "контекст исполнения"? Ещё лучше, если дадите ссылку на стандарт, где это увидели. Если читаете стандарт на русском, то там какое-то объяснение тоже должно быть.

Резиновый круг можно сделать ещё проще. Как я понял, резиновость круга создаётся за счёт пайдингов, заданных одним значением в процентах (ширина всех пайдингов в этом случае одинакова и рассчитывается относительно ширины родительского контейнера), и за счёт border-radius, также указанных в процентах (а значения для скругления углов уже рассчитываются относительно соответствующей ширины или высоты самого дива-"круга"). Можно и овал, кстати, сделать Думаю, что position:relative и margin там ни к чему.

В IE7 фон красный.

Где вы там такое прочитали? Если можно цитату приведите, а то я в этом раздел спецификации не шарю совсем. Если к внешнему тегу добавить padding:20px;, то всё становится более нагляднее.

Столкнулся с такой особенностью, что если взять элемент и абсолютно его спозиционировать с помощью position:absolute;, то отображение этого элемента будет зависеть от того, каким является его родитель. Так если есть два элемента <div class="outside"> <div class="inside">text</div> </div> и внутреннему назначить position:absolute;, то если внешний элемент будет иметь свойство display:block;, то его отображение будет таким. Если же внешнему элементу назначить свойство display:inline; или display:inline-block;, то его отображение будет другим. Внутренний элемент с классом "inside" может, кстати, иметь любой display, но это не повлияет на всю картину. Есть ли какое-нибудь разумное объяснение этому?

Мне показалось совсем наоборот http://code.google.com/intl/ru-RU/webtoolkit/speedtracer/speed-tracer-examples.html С javascript-ом связано это точно