css проблема с firefox

Question

У меня проблема с правильной загрузкой CSS в FireFox. Содержимое страницы загружается из БД правильно. Когда он попадает на выставочную сцену, страница запутывается в Firefox и прекрасно работает в Chrome, IE. У меня была та же проблема с хромом, которую я исправил, добавив.

#myTable { width: 100%;overflow:hidden; }

Но это никогда не поможет с FF. Я подозреваю, что это происходит, когда Firefox пытается загрузить javascript, а затем CSS портится. Вот мой CSS и моя демонстрационная страница

http://sudanesetweeps.com/dev/index.php

/*

*/


body {
    background: #282425 url(../images/background.jpg) no-repeat top center;
    font-size:12px;
}

#myTable { width: 100%;overflow:hidden; }
.wrapper {
    position:relative;
    margin: 0 auto;
    width: 852px;
    padding: 25px 0;
}

/* header */
.header .logo {
    margin-bottom: 21px;
}
.header ul.nav {
    position:relative;
    list-style: none;
    margin:0;padding:0;
    color: #fcd770;
    background: url(../images/menu.png) no-repeat top left;
    overflow:hidden;
    height: 46px;
    font-size:15px;
}
    .header ul.nav li {
        float:left;
        position:relative;
        margin: 15px 0 0 20px;
    }
    .header ul.nav li a{
        color: #fcd770;
        text-decoration:none;
        font-weight:bold;
    }
.header .header_twitter {
    position:relative;
    height: 260px;
    background: url(../images/header_bg.png) no-repeat top left;
    color: #fff;
}
    .header .header_twitter .singin_twitter {
        position:absolute;
        bottom: 40px;
        right: 55px;
    }

/* middle */
.middle {
    position:relative;
    margin: 30px 0;
}
.middle a{
    color: #000;
}
    .middle .row_top {
        background: url(../images/table_top.png) no-repeat top left;
        overflow:hidden;
        color: #fcd770;
    }
    .middle .row {
        overflow:hidden;
        background: url(../images/table_middle.png) no-repeat top left;
        color: #000;
    }
    .middle .row_top .col1,
    .middle .row_top .col2,
    .middle .row_top .col3,
    .middle .row_top .col4,
    .middle .row_top .col5,
    .middle .row_top .col6,
    .middle .row_top .col7,
    .middle .row_top .col8{
        float:left;
        padding: 20px 0 18px;
        text-align:center;
    }
    .middle .row .col1,
    .middle .row .col5,
    .middle .row .col3,
    .middle .row .col4,
    .middle .row .col6,
    .middle .row .col7,
    .middle .row .col8{
        float:left;
        padding: 20px 0 0 0;
        text-align:center;
    }
    .middle .row .col2{
        padding: 7px 0 8px 0;
        float:left;
        text-align:center;
    }
    .middle .row .col1,
    .middle .row_top .col1{
        width: 98px;
    }
    .middle .row .col2,
    .middle .row_top .col2{
        width: 102px;
    }
    .middle .row .col3,
    .middle .row_top .col3{
        width: 146px;
    }
    .middle .row .col4,
    .middle .row_top .col4{
        width: 150px;
    }
    .middle .row .col5,
    .middle .row_top .col5{
        width:76px;
    }
    .middle .row .col6,
    .middle .row_top .col6{
        width:73px;
    }
    .middle .row .col7,
    .middle .row_top .col7{
        width:118px;
    }
    .middle .row .col8,
    .middle .row_top .col8{
        width:87px;
    }
    .middle .last {
        background: url(../images/table_bottom.png) no-repeat top left;
    }




/* footer */
.footer {

}
    .footer_top {
        height: 17px;
        background: url(../images/footer_top.png) no-repeat top left;
    }
    .footer_bottom {
        height: 17px;
        background: url(../images/footer_bottom.png) no-repeat top left;
    }
    .footer_content {
        background: #2b7fc3;
        color: #fff;
        width:851px;
        font-size:12px;
        text-align:center;
    }
        .footer_content a {
            color: #fcd770;
            font-size: 12px;
            text-decoration:none;

        }

Answer 1

Проблема вызвана сочетанием <colgroup> в вашем html и css для элементов таблицы.Самое простое решение - удалить <colgroup>, так как в этом случае он не нужен.Ваш сайт по-прежнему будет выглядеть так, как вы хотите.

РЕДАКТИРОВАТЬ: При дальнейшем изучении выясняется, что <colgroup> генерируется вашим JavaScript.Если вы отключите JavaScript и обновите свою страницу в Firefox, вы увидите, что все в порядке.Я считаю, что он генерируется jquery.tablesorter.min.js .

Я бы предложил использовать другой плагин для разбивки таблиц.У меня нет большого опыта работы с нумерацией таблиц, но я бы попробовал поискать некоторые из доступных плагинов.Этот один выглядит интересно.