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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Finer, 18 апр 2008.

Статус темы:
Закрыта.
  1. Finer

    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 рассчитывает ширину столбцов в данном случае???
     
  2. Avenger

    Avenger Гость

    напиши такой стиль к диву

    .col div
    {
    overflow : hidden;
    float:left;
    }
     
  3. Finer

    Finer Гость

    не работает =(
     
  4. Avenger

    Avenger Гость

    вот статья на эту тему:
    http://www.defusion.org.uk/archives/2007/0...snt-hide-in-ie/
    тебе нужно немного поменять структуру

    update: и если ширину задавать в пикселях через дивы, то тоже работает
     
  5. Finer

    Finer Гость

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

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

    вот.
    но получается что-то не очень хорошее..
     
  6. Finer

    Finer Гость

    Урррааа!! :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>
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей