Javascript-форум - вопрос по верстке (IE)

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - вопрос по верстке (IE) (https://javascript.ru/forum/xhtml-html-css/14110-vopros-po-verstke-ie.html)

Цитата:

Сообщение от monolithed

я не являюсь сторонником применения хаков (но без них даже сами мелокомягкие).

а к чему эта ссылка?

Цитата:

Сообщение от monolithed

Сходу пример привести не могу, но по памяти могу сказать, что бывают различия в размерах элеметов, отступов (особенно в формах это наблюдается). Есть также нюансы с позиционироаванием, использованием а в качестве едениц измерения процентов, с таблицами есть косяки.

все это есть, просто мне как-то не приходилось их использовать. Это, в общем-то, не аргумент. Просто интересно, когда без этого не обойтись. Не, ну я представляю себе пару вариантов, типа "валидатор - истина в последней инстанции" или "я сделаю это списком, no matter what it takes" или "websites need to look exactly the same in every browser" или "блочная верстка - наше все" или, в случае верстки, при написании какого-нибудь css-фреймворка. Но, как по мне, это все надуманные цели

Цитата:

Сообщение от x-yuri

а к чему эта ссылка?

она ведет на сайт мелокомягких, где можно заглянуть в код и увидеть, что они сами же используют хаки.

Цитата:

Сообщение от monolithed

она ведет на сайт мелокомягких, где можно заглянуть в код и увидеть, что они сами же используют хаки.

это не аргумент

Написать серьёзный проект не уделяя особого внимания ie6 - это фантастика. В нем слишком много документированных багов. Какой бы чудесный и правильный код бы вы не писали.

Нет, наверное можно в каждом конкретном случае вместо простых решений заворачивать html и css конструкции на десятки кб - чтобы и в ие и в браузерах всё работало одинаково, но на деле удобнее для браузеров сделать простой и правильный вариант, а для ослика хак.

я не говорил про "не уделяя особого внимания ie6". В первую очередь мне непонятно, зачем выносить стили для ie в отдельный файл. Я предположил, что иначе прийдется использовать хаки. Я не помню, чтобы мне это когда-либо пригодилось (наверное, все дело в том, что я не участвовал в серьезных проектах), поэтому мне и интересно, что такое должен хотеть дизайнер, чтобы понадобились хаки. Кроме того, абстрактно на эту тему можно долго спорить и все будут правы, поэтому я предложил привести реальные примеры...

по поводу серьезных проектов... microsoft.com - серьезный проект? Они забили на ie6 ;)

Цитата:

Сообщение от Aetae

Нет, наверное можно в каждом конкретном случае вместо простых решений заворачивать html и css конструкции на десятки кб - чтобы и в ие и в браузерах всё работало одинаково, но на деле удобнее для браузеров сделать простой и правильный вариант, а для ослика хак.

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

x-yuri
На самом деле, без хаков можно обойтись если выносить стили для IE в отдельные файлы (я выбрал этот подход), если конечно не считать это тоже хаком...

Цитата:

Сообщение от monolithed

На самом деле, без хаков можно обойтись если выносить стили для IE в отдельные файлы (я выбрал этот подход), если конечно не считать это тоже хаком...

;)

а подход, да, лучше, если использовать его, чтобы фиксить старые версии, т.е. if lt/lte IE n

Цитата:

Сообщение от monolithed (Сообщение 85848)

видимо потому, что безграмотная верстка

<style type="text/css">
#wrap, #content, ul, ul li {
    overflow: hidden;
    position: relative;
}

#wrap {
    background: gray; 
    width: 208px;
    height: auto;
}

#content {
    background: red;
    margin: 20px auto;
    width: 100px;
    height: 50px;
}

ul, ul li {
    margin: 0px;
    padding: 0px;
}

ul {
    width: 208px;
    height: 20px;
}

ul li {
    background: #35C;
    border: solid 1px;
    border-color: #46F #238 #238 #46F;
    display: block;
    list-style: none; 
    text-align: center;
    float: left;
    width: 50px;
}

ul li a {
    color: #fff;
    font: 300 14px/14px arial, tahoma, verdana, sans-serif;
    text-decoration: none;
}
</style>

вот здесь вопрос возник:
есть такие статейки по верстке (хорошие):
http://softwaremaniacs.org/blog/2005...-layout-float/
там есть цитата:

Цитата:

блоки, идущие за float'ами перестают эти float'ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float'ы находятся, тоже перестает их замечать и float'нутые блоки проваливаются через низ контейнера, если он заканичвается раньше.

и решение:

Цитата:

Для устранения подтягивания блоков существует специальное свойство — clear. Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float'ов.
Но это не решает другой проблемы: того, что float'ы проваливаются через "main", и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами.

Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float'ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.

Другой интересный способ связан с побочным эффектом свойства overflow.
Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible, он вдруг растягивается и заключает в себя float'ы, которые в нем сидят, устраняя проваливание.

так вот,
у нас есть контейнер ul, унего в стилях position:relative и
overflow:hidden,
если я удаляю эти стили ему, то floatнутые блочные li (у которых по умолчанию высота чуть больше высоты ul) "заканчиваются" чуть-чуть ниже ulа(через файрбаг посмотрел, на полосочку маленькую ниже), т.е. "проваливаются через низ контейнера"

если ставим position:relative и overflow:hidden
то, как я понимаю, благодаря поцизионированию ul, решается проблема "проваливания", а overflow уже просто обрубает то, что выходит за пределы контейнера

но если мы ставим просто overflow:hidden без position:relative, то контейнер, по идее, должен растянуться, и заключить в себя floatы,
а вместо этого он обрубает лишнее у floatов

и если мы отдельно ставим position:relative, то тоже самое, по идее мы позиционируем контейнер => "проваливание" должно исчезнуть, но опять получается, что ul чуть чуть уже, чем li.

<telepath-mode>hasLayout что ли?</telepath-mode>

<!DOCTYPE HTML>
<html>
  <head>   
  </head>
  <body>   

<div style="
    overflow:hidden;
    background: green;
    zoom: 1;
">
<div style="
    width: 50px;
    height: 50px;
    background: red;
    float: left;
"></div>
</div>

  </body>
</html>

Цитата:

Сообщение от monolithed (Сообщение 85848)

видимо потому, что безграмотная верстка (без обид, но ошибки совсем детские):

<!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" dir="ltr" lang="ru">
<head> 

<style type="text/css">
#wrap, #content, ul, ul li {
    overflow: hidden;
    position: relative;
}

#wrap {
    background: gray; 
    width: 208px;
    height: auto;
}

#content {
    background: red;
    margin: 20px auto;
    width: 100px;
    height: 50px;
}

ul, ul li {
    margin: 0px;
    padding: 0px;
}

ul {
    width: 208px;
    height: 20px;
}

ul li {
    background: #35C;
    border: solid 1px;
    border-color: #46F #238 #238 #46F;
    display: block;
    list-style: none; 
    text-align: center;
    float: left;
    width: 50px;
}

ul li a {
    color: #fff;
    font: 300 14px/14px arial, tahoma, verdana, sans-serif;
    text-decoration: none;
}
</style>
</head> 
<body> 
    <div id="wrap"> 
        <ul> 
            <li><a href="#">1</a></li> 
            <li><a href="#">2</a></li> 
            <li><a href="#">3</a></li> 
            <li><a href="#">4</a></li> 
        </ul> 
        <div id="content"></div> 
    </div>     
  </body> 
</html>

я вот этот пример имел ввиду, и его поведение при

#wrap, #content, ul, ul li {
    overflow: hidden;
    position: relative;
}

и при

#wrap, #content, ul li {
    overflow: hidden;
    position: relative;
}

#wrap, #content, ul li {
    overflow: hidden;
    position: relative;
}

ul {
    overflow:hidden;
}

или

#wrap, #content, ul li {
    overflow: hidden;
    position: relative;
}

ul {
    position:relative;
}