Есть <div>; внутри него картинка, и чего-то написано. Контент формируется динамически, поэтому конкретную высоту <div> не задать. Если текста много, то все Ок! Если текста мало, то картинка по высоте вылазит за границы <div>
<div class="bbb">
<p>
<a href="bbb.html">
<img vspace="0" align="left" height="130" width="104" SRC="/images/bbb.jpg" border="1" />
</a>
<strong><a title="1" href="bbb.html">этих мягких французских булок</a></strong> </p>
<p>Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё этих мягких
французских булок, да выпей чаю. Съешь ещё этих мягких французских булок, да
выпей чаю. Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё
этих мягких французских булок, да выпей чаю</p>
</div>
Добавление в стили "height: auto;" и "overflow: auto;" спасло ситуацию для Opera и Firefox. Однако популярный IE делает высоту <div> по количеству текста, а картинка вылазиет по высоте.
Здравствуйте, paucity, Вы писали:
P>Коллеги, помогите, плиз!!!
Обрати внимание на первую строку:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.bbb
{
display: block ;
border: 1px solid;
height: auto;
overflow: auto;
}
</style>
</head>
<body>
<div class="bbb">
<p>
<a href="bbb.html">
<img vspace="0" align="left" height="130" width="104" SRC="/images/bbb.jpg" border="1" />
</a>
<strong><a title="1" href="bbb.html">этих мягких французских булок</a></strong> </p>
<p>Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё этих мягких
французских булок, да выпей чаю. Съешь ещё этих мягких французских булок, да
выпей чаю. Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё
этих мягких французских булок, да выпей чаю</p>
</div>
</body>
</html>
Она переключает IE (7) в standard mode. И все начинает работать волшебным образом.
Для того чтобы это работало во всем что шевелится используем table/cell:
<table><tr><td>
<p>
<a href="bbb.html">
<img vspace="0" align="left" height="130" width="104" SRC="/images/bbb.jpg" border="1" />
</a>
<strong><a title="1" href="bbb.html">этих мягких французских булок</a></strong> </p>
<p>Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё этих мягких
французских булок, да выпей чаю. Съешь ещё этих мягких французских булок, да
выпей чаю. Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё
этих мягких французских булок, да выпей чаю</p>
</td></tr></table>
Здравствуйте, paucity, Вы писали:
P>Есть <div>; внутри него картинка, и чего-то написано. Контент формируется динамически, поэтому конкретную высоту <div> не задать. Если текста много, то все Ок! Если текста мало, то картинка по высоте вылазит за границы <div>
На самом деле, это правильное поведение при использовании float'ов (картинка у вас с float:left). Решается это двумя способами:
можно у последующего элемента добавить стиль clear:
...
<p>
<a href="bbb.html">
<img vspace="0" align="left" height="130" width="104" SRC="/images/bbb.jpg" border="1" />
</a>
<strong><a title="1" href="bbb.html">этих мягких французских булок</a></strong>
</p>
<p style="clear:left">Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё этих мягких
...
Можно сделать по уму и узнать, что есть clearfix. Это собственно стандартный подход для решения проблем с флоатами.
P>P.S. Грамотная верстка — подвиг! Уважайте, коллеги, грамотных верстальщиков.
З.Ы. Золотые слова. Одно огорчает — грамотных верстальщиков мало.
CS><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
CS>Она переключает IE (7) в standard mode. И все начинает работать волшебным образом.
Первая строка у меня такая же, IE 7 нет под рукой (http://browsershots.org показывает, что в 7-ом нормально), раскорячивает в IE 6 (и ниже)
CS>Для того чтобы это работало во всем что шевелится используем table/cell:
Хотел Дивом обойтись, тем более, что в остальных браузерах все Ок
Многие и рады были бы испытать когнитивный диссонанс, но нечем.
Здравствуйте, kpumuk, Вы писали:
K>На самом деле, это правильное поведение при использовании float'ов (картинка у вас с float:left).
ДА, оказывается правильное, но, на первый взгляд, какое-то не логичное поведение... K>Решается это двумя способами: K>можно у последующего элемента добавить стиль clear:
K>...
K><p>
K><a href="bbb.html">
K><img vspace="0" align="left" height="130" width="104" SRC="/images/bbb.jpg" border="1" />
K></a>
K><strong><a title="1" href="bbb.html">этих мягких французских булок</a></strong>
K></p>
K><p style="clear:left">Съешь ещё этих мягких французских булок, да выпей чаю. Съешь ещё этих мягких
K>...
Спасибо! Работает!
K>Можно сделать по уму и узнать, что есть clearfix. Это собственно стандартный подход для решения проблем с флоатами.
Спасибо! Тоже работает!
Многие и рады были бы испытать когнитивный диссонанс, но нечем.
