При подключении CSS шаблон в ФФ падает, даже при пустом ССS файле.

AlexW · January 25, 2010

Верстаю шаблон, (вверху и внизу 2-ве приклееных менюшки, посередине будет блок и конечно все будет на аяксе) в Опере и Осле всё отображается нормально, а в ФФ headerpanel и footerpanel не приклеиваются, помогите плиз разобраться.

Методом тыка выяснил что в ФФ шаблон падает когда подключаю ccs, когда объявляю <link href="menu.css" type="text/css" rel="stylesheet" > и данный файл существует (возможно он даже пустой, это сути не меняет), когда его нет, тогда всё нормально.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Шаблон</title>

html, body {width: 100%; height: 100%; margin: 0; padding: 0;}

html {display: table; overflow: auto;}

body {display: table-cell; vertical-align: middle; background-color:#FFFFFF;}

.headerpanel {width: 100%; height: 40px; position: fixed; left: 0px; top: 0px; background-color: #FF0;}

.item {width: 960px; height: 600px; margin: 0 auto;}

.header, .footer{width: 960px; height: 40px; margin: 0 0; overflow: auto; background-color: #F00;}

.cont {width: 920px; height: 480px; margin: 0 0; padding: 20px; overflow: auto; background-color: #0F9}

.footpanel {width: 100%; height: 40px; position: fixed; margin: -40 auto 0; bottom: 0; left: 0; z-index: 9997; background-color: #FF0;}

<!--[if lte IE 7]>

* > html body {text-align: center;}

* > html .item {text-align: left;}

.headerpanel {width: 100%; height: 40px; position: fixed; left: 0px; top: 0px; _position: absolute; _top: expression( 0 + eval(document.documentElement.scrollTop||document.body.scrollTop) + 'px' );}

.item {margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + 'px' : 0);}

*html #footpanel {margin-top: -1px; position: absolute; background-color: #FF0; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)

: document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}

</style>

<![endif]-->

</style>

</head>

<body>

<div class="headerpanel">Верхнее меню (должно быть приклеено)

</div>

<div class="header">Логотип

</div>

<div class="cont">Контент

</div>

<div class="footer">Копирайт

</div>

<div class="footpanel">Нижнее меню (должно быть приклеено)

</div>

</body>

</html>

Edited January 25, 2010 by AlexW

Justnewone · January 25, 2010

Вложенный style?

aTei · January 25, 2010

Нельзя style в style помещать. А тем более с условными комментариями html

AlexW · January 26, 2010

—————htm—————

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Шаблон</title>

</head>

<body>

<div class="headerpanel">Верхнее меню (должно быть приклеено)

</div>

<div class="header">Логотип

</div>

<div class="cont">Контент

</div>

<div class="footer">Копирайт

</div>

<div class="footpanel">Нижнее меню (должно быть приклеено)

</div>

</body>

</html>

—————css (main_style.css)—————

html, body {width: 100%; height: 100%; margin: 0; padding: 0;}

html {display: table; overflow: auto;}

body {display: table-cell; vertical-align: middle; background-color:#FFFFFF;}

.headerpanel {width: 100%; height: 40px; position: fixed; left: 0px; top: 0px; background-color: #FF0;}

.item {width: 960px; height: 600px; margin: 0 auto;}

.header, .footer{width: 960px; height: 40px; margin: 0 0; overflow: auto; background-color: #F00;}

.cont {width: 920px; height: 480px; margin: 0 0; padding: 20px; overflow: auto; background-color: #0F9}

.footpanel {width: 100%; height: 40px; position: fixed; margin: -40 auto 0; bottom: 0; left: 0; z-index: 9997; background-color: #FF0;}

<!--[if lte IE 7]>

* > html body {text-align: center;}

* > html .item {text-align: left;}

.headerpanel {width: 100%; height: 40px; position: fixed; left: 0px; top: 0px; _position: absolute; _top: expression( 0 + eval(document.documentElement.scrollTop||document.body.scrollTop) + 'px' );}

.item {margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + 'px' : 0);}

*html #footpanel {margin-top: -1px; position: absolute; background-color: #FF0; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)

: document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}

<![endif]-->

То есть должно примерно так быть? (так тоже не работает)

Часов 5 убил на этот вопрос, так и не понял.

От style в style избавился, а про условные коментарии html так и не понял, они а хаках для ие7? Если хаки удалить всё равно не работает

shvv · January 26, 2010

Должно быть так:

<link href="main_style.css" type="text/css" rel="stylesheet" >
<!--[if lte IE 7]>
<link href="ie.css" type="text/css" rel="stylesheet" >
<![endif]-->

А в файле ie.css размещаются хаки для IE.

Edited January 26, 2010 by shvv

Justnewone · January 26, 2010

<!--[if lte IE 7]>

<![endif]-->

AlexW · January 27, 2010

Пробывал как вы описали, все равно не получается, складывается такое чувство, что из-за body {display: table-cell;... при подключении css FF начинает позиционировать не с верхнего правого угла браузера, а с body, который подгоняется к <div class="item">.

Попробуйте сами подключить css, помогите плиз.

Justnewone · January 27, 2010

Попробуйте сами подключить css, помогите плиз.

Нет уж, потрудитесь где-нибудь на хостинге разместить, на бесплатном даже, ровно 15 минут.

AlexW · January 27, 2010

Шаблон тут

P.S. на домен внимание не обращать, он давно уже только для тестирования

Edited January 27, 2010 by AlexW

Justnewone · January 27, 2010

Шаблон тут
P.S. на домен внимание не обращать, он давно уже только для тестирования

FF 3.6, все работает, пожалуй, только может среднему блоку можно маргины верт. назначить, чтоьы он при изменении высоты не прятался под панели.

еще нашел косяк, правда, мож так и надо...

При изменении высоты окна нижня панель навсегда приделана к нижней кромке, и не чувствует высоты среднего поля. Если надо чтобы чувствовала, то это стандарный "футер внизу экрана", Вобщем, максимально подробно расскажите.

AlexW · January 27, 2010

Хочу сделать так, чтоб верхняя панель была приклеена к верхней кромке, а нижняя соответственно к нижней, основное "окно" всегда располагалось по центру.

версия с вложенной таблицей стилей

Версия с вынесенной в отдельный файл таблицей стилей

Версии отлачаются кроме описанного парой картинок и цветом меню.

Во 2-й версии верхняя и нижняя панель не приклееваются к кромкам (проверял в ФФ 3.0.17 и 3.5.7)

P.S.

Хотел бы еще спросить: правильно сделал что отделил текст от дива с бэкграундом еще 1 дивом?

Пример:

</div>

.cont {width: 920px; height: 480px; margin: 0 0; padding: 20px; background: url(images/fon.png) no-repeat center;}

#bordercont {width: 920px; height: 480px; margin: 0 0; overflow: auto;}.

Justnewone · January 27, 2010

Хочу сделать так, чтоб верхняя панель была приклеена к верхней кромке, а нижняя соответственно к нижней, основное "окно" всегда располагалось по центру.
версия с вложенной таблицей стилей
Версия с вынесенной в отдельный файл таблицей стилей
Версии отлачаются кроме описанного парой картинок и цветом меню.
Во 2-й версии верхняя и нижняя панель не приклееваются к кромкам (проверял в ФФ 3.0.17 и 3.5.7)
P.S.
Хотел бы еще спросить: правильно сделал что отделил текст от дива с бэкграундом еще 1 дивом?
Пример:
<div class="cont">
<div id="bordercont">
</div>
</div>
.cont {width: 920px; height: 480px; margin: 0 0; padding: 20px; background: url(images/fon.png) no-repeat center;}
#bordercont {width: 920px; height: 480px; margin: 0 0; overflow: auto;}.

Вобщем, дайте маргины среднему блоку, вверх и вниз. ЧТобы он не залезал под менюхи.

Не знаю че ответить про отделение дивом, если есть хоть какой-то смысл моментально добавляю тег, даж не задумываясь и не теряя время на "чудо-лайот".

AlexW · January 27, 2010

На первом как жолжно быть, на втором как показывает ФФ

Edited January 27, 2010 by AlexW

Justnewone · January 27, 2010

у меня FF3.6 показывает первый скрин, ничем не могу помочь.

AlexW · January 27, 2010

Спасибо большое!! Проблема была в моём ФФ, после удаления всех его файлов и установкой заново все стало ок!

Маргины сейчас дам, спасибо за помощь!

P.S. Если есть предложения по шаблону, милости прошу

Edited January 27, 2010 by AlexW

Sign In

При подключении CSS шаблон в ФФ падает, даже при пустом ССS файле.

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information