Не могу найти решение с помощью стилей CSS - PullRequest
1 голос
/ 24 января 2012

Я пишу свой первый более серьезный веб-дизайн, используя div и CSS-стили (я новичок в этом). Я потратил много времени, чтобы сделать то, что я делал сейчас (около 30% всего дизайна), и теперь я нахожусь в положении, в котором я провел много времени, но все еще не нашел решения.

Вот изображение того, как эта часть дизайна должна выглядеть правильно во всех браузерах: enter image description here

Вот изображение того, как это выглядит сейчас в IE8 (я пометил синим цветом неправильную часть): enter image description here Вы можете увидеть пробел, который не должен быть здесь ...

И в то же время, как это выглядит в Mozilla Firefox 9.0.1 (поля делаются хорошо, но текст не помещается на месте): enter image description here

Я думаю, что это может быть что-то с float, потому что я использовал это в некоторых div. Но я точно не знаю, что и как вообще начать искать решение этой проблемы ... Так что я пришел к переполнению стека. Поскольку я не знаю, какие именно части HTML и CSS нужно скопировать сейчас, я загружаю всю сеть (с изображениями) и даю ссылку для ее проверки: http://www.mediafire.com/?uf6bzly4dktummk

Я надеюсь, что кто-то может мне помочь: s

Извините за мой плохой английский.

Ответы [ 4 ]

2 голосов
/ 24 января 2012

За что не так в ФФ. Вы должны дать .texthold фиксированную ширину, иначе float не будет работать:

.texthold {
 width:97px;
}

Также лучше обернуть <p></p> вокруг текста, чем в div, но это не обязательно для работы кода.

1 голос
/ 25 января 2012

Я вижу ту же проблему в Chrome, что и с вашей проблемой Firefox. Это противоречие браузера. если это не так, ошибка должна быть одинаковой как в IE, так и в Firefox. попробуйте разработать в Chrome и добавьте сброс.

вот как я это сделал:

  • удалите display:inline в следующем: .meniu, .meniu2, .meniu3, .meniu4, .thumbas и .shadow - вы уже пропускаете их, нет необходимости делать их встроенные.

  • удалить display:inline И float:left из класса .texthold. плавающий это удаляет это из потока. когда он превышает ширину справа от изображения, он оборачивается под изображением. отображение их в строке делает его не учитывающим верхний и нижний поля. нет необходимости в фиксированной ширине.

это решает проблему Firefox. я не могу, однако, понять, почему IE имеет интервал. ничего плохого в DOM, они на 2 деления сверху другого. там не должно быть места.

0 голосов
/ 25 января 2012

Причиной разрыва было то, что в моем HTML-файле отсутствовал DOCTYPE, что вызывало режим Quirks.В моем коде подразумевался тип документа XHTML, поэтому я добавил его в начало кода, заменив текущий тег.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
0 голосов
/ 24 января 2012

Вы используете

для текстового раздела.Вы можете удалить тег p.Я думаю, что это причина разрыва в IE.Благодаря.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...