Как Firefox рассчитывает ширину столбцов вот в таком случае?

  • Автор темы Автор темы Finer
  • Дата начала Дата начала
Статус
Закрыто для дальнейших ответов.
F

Finer

Привет всем!
помогите, пожалуйста, с такой проблемой:
создаю таблицу
<style type="text/css">
.col div
{
overflow : hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="300px" bordercolor="red" border="2px">
<tr>
<td class="col"><div>11111111111111111111111111</div></td>
<td class="col"><div>22222222222222222222222223333333333333333344444444455555555555557777777777</div></td>
<td class="col"><div>33</div></td>
</tr>
<tr>
<td class="col"><div>44</div></td>
<td class="col"><div>55</div></td>
<td class="col"><div>77</div></td>
</tr>
</table>
</div>
</form>
</body>
в Firefox данные отображаюся как надо, т.е. overflow срабатывает
а вот в IE 7 почему-то отображается неверно.....

и еще очень интересно, как Firefox рассчитывает ширину столбцов в данном случае???
 
напиши такой стиль к диву

.col div
{
overflow : hidden;
float:left;
}
 
вот статья на эту тему:
Ссылка скрыта от гостей

тебе нужно немного поменять структуру

update: и если ширину задавать в пикселях через дивы, то тоже работает
 
Спасибо огромное за статью, но, видимо, я не совсем понял, какие элементы там являются parent, а какие child..
я изменил
.col div
{
position: absolute;
}

и
<table style="overflow: hidden; position: relative;" width="400px" bordercolor="red" border="2px">

вот.
но получается что-то не очень хорошее..
 
Урррааа!! :lol:
проблема решена! спасибо большое, Avenger, за помощь!

вот код:
<html >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">

.col div
{
overflow : hidden;
width : 100%;
}

.col div div
{
float : left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="float: left;" width="400px" bordercolor="red" border="2px">
<tr>
<td class="col">
<div><div>1111111111111111111111111122222222222</div></div>
</td>
<td class="col">
<div><div>2222222222222222222222222344444455555555555557777777777</div></div>
</td>
<td class="col">
<div><div>33</div></div>
</td>
</tr>
<tr>
<td class="col">
<div><div>44</div></div>
</td>
<td class="col">
<div><div>55</div></div>
</td>
<td class="col">
<div><div>77</div></div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
 
Статус
Закрыто для дальнейших ответов.
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ