Сломанный фон во всех браузерах, кроме Firefox - PullRequest
Новая
       67

Сломанный фон во всех браузерах, кроме Firefox

1 голос
/ 16 апреля 2011

У меня есть проект gwt, в котором есть панель, в которую я добавил имя стиля под названием «док».Когда я открываю свое приложение в Firefox, все в порядке, но в Chrome, Safari и IE фон не завершен.Это мой код CSS: 

.dock {
background: #e3e8f3 url(img/hborder.png) repeat-x 0px -1000px;
padding: 4px 4px 4px 8px;
width: 100%;
margin: 0;
position: relative; 
}

Вот так это выглядит в Firefox (должно выглядеть так) Снимок экрана

И вот так это выглядит вдругие браузеры, такие как Chrome: Снимок экрана

Есть идеи, как это исправить?Заранее спасибо.

[EDIT:]

Это HTML-код, сгенерированный gwt: 


<table cellspacing="0" cellpadding="0" class="dock" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
    <tbody>
        <tr>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-helpButton" title="Zoek hulp"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-browseButton" title="Blader door de database."></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-statButton" title="Laat populaire boeken zien"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-search" title="Zoek een boek"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <input type="text" class="gwt-TextBox gwt-TextBox-searchQuery">
            </td>
        </tr>
    </tbody>
</table>

Я заметил, что с помощью firebug панель также имеет эту разметку CSS(эта разметка автоматически добавляется при компиляции в gwt). 

element.style {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}

Ответы [ 2 ]

3 голосов
/ 16 апреля 2011

попробуйте добавить фиксированную высоту к вашему .dock, которая равна высоте фонового изображения, например 

.dock { height: 100px }
0 голосов
/ 16 апреля 2011

Поместите URL в кавычки: 

background: #e3e8f3 url("img/hborder.png") repeat-x 0px -1000px;

В последний раз я проверял, что это был правильный формат.

Edit: Ах, похоже, ваша проблема в том, что таблицы не отвечают по какой-то странной причине. Попробуйте это. 

background: url("img/hborder.png") repeat-x 0px -1000px;
background-color: #e3e8f3;
...