Когда поехала верстка страницы
На днях делал дизайн для сайта. Вроде бы все хорошо, все красиво. Собирал в Internet Explorer 7.
При чем верстку делал преимущественно на дивах (div), поэтому усиленно использовались стилевые конструкции: внутренние отступы (padding), рамки (border), внешние отступы (margin).
Решил посмотреть результат в FireFox и Opera... Результат ужаснул - вся верстка поехала. Если Internet Explorer при указании внутреннего отступа оставлял ширину объекта (div'а) такой же как указана, то FireFox и Opera - увеличивали ширину на значение отступа! Естественно у объектов, которым задана фиксированная ширина, наблюдались некрасивые искажения размеров.
Оказалось, проблема в том, что браузеры используют "стандартно" разные модели пересчета размеров.
При чем верстку делал преимущественно на дивах (div), поэтому усиленно использовались стилевые конструкции: внутренние отступы (padding), рамки (border), внешние отступы (margin).
Решил посмотреть результат в FireFox и Opera... Результат ужаснул - вся верстка поехала. Если Internet Explorer при указании внутреннего отступа оставлял ширину объекта (div'а) такой же как указана, то FireFox и Opera - увеличивали ширину на значение отступа! Естественно у объектов, которым задана фиксированная ширина, наблюдались некрасивые искажения размеров.
Оказалось, проблема в том, что браузеры используют "стандартно" разные модели пересчета размеров.
Чтобы заставить их использовать одну и ту же модель, нужно правильно установить DOCTYPE. Т.к. времени разбираться с этим не было, нашлось скорое решение:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
После указания в начале документа (первой строкой) такого DOCTYPE, браузеры стали рассчитывать размеры в одной модели - когда необходимо указывать ширину (Width) равной необходимая ширина (NeedWidth) минус значение отступа (Padding):
Width = NeedWidth - Padding
При этом пришлось поменять все заданные значения ширины исходя из указанной формулы.