Маленький дефект отображения футера в Opera

Beatler · October 27, 2011

Здравствуйте, уважаемые эксперты!

Столкнулся с небольшим, но очень неприятным глюком при отображении вёрстки сайта в Opera "Версия: 11.50 Сборка: 1074".

Во всех браузерах всё ок, а вот в Опере при первом открытии страницы футер выглядит съехавшим вверх (страница построена с прилипающим к низу подвалом). После обновления страницы футер садится куда надо. Причем можно сделать "Проинспектировать элемент" на любом элементе и справа в списке стилей любую галочку снять, футер тут же встанет на место. Такое ощущение, что не хватает странице совсем чуть-чуть, чтобы догрузить до конца все данные. Вёрстка валидна.

Тут HTML код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="containerPage">
<div class="topblock"></div>
<div id="container">
<div id="header">
<div id="topHeader">
<a href="#" target="_blank" class="xdeLogo"></a>
<div class="menuLine">
<span class="menuFirst"><a href="index.html">Главная</a></span>|<span class="menuMid"><a href="about.html">О продукте</a></span>|<span class="menuMid"><a href="techinf.html">Техническая информация</a></span>|<span class="menuMid"><a href="law.html">Законодательная база</a></span>|<span class="menuLast"><a href="faq.html">Вопросы-ответы</a></span>
</div>
<div class="search">
<form action="search">
<input class="searchinput" type="text" onfocus="if(this.value=='Поиск по сайту') this.value='';" onblur="if(this.value=='') this.value='Поиск по сайту';" value="Поиск по сайту" name=" " />
<input class="searchsubmit" type="submit" value=" " />
</form>
</div>
<div class="clear"></div>
</div>
<div class="headLeftSide">
<div class="headLeftInnerBlock">
<h1 style="color: #764C24; font-size: 30px;">TERRALINK xDE –<br />ЗАГОЛОВОК</h1>
<table cellpadding="0" cellspacing="0" border="0" style="margin-top: 10px;">
<tr>
<td valign="middle" width="20"><img src="img/smallSideLine.jpg" style="padding: 10px 0;" width="6" height="41" alt="" /></td>
<td>
<span class="redText">Повышение эффективности Вашего бизнеса благодаря межкорпоративному обмену электронными документами</span>
</td>
</tr>
<tr>
<td valign="middle" width="20"><img src="img/smallSideLine.jpg" style="padding: 10px 0;" width="6" height="41" alt="" /></td>
<td>
<span class="redText">Какой-то текст</span>
</td>
</tr>
<tr>
<td valign="middle" width="20"><img src="img/smallSideLine.jpg" style="padding: 10px 0;" width="6" height="41" alt="" /></td>
<td>
<span class="redText">Юридически значимый внешний, абсолютно безбумажный документооборот с клиентами и поставщиками</span>
</td>
</tr>
</table>
</div>
</div>
<div class="headRightSide">
<div class="headRightInnerBlock">
<div id="playerMain">
<iframe src="http://player.vimeo.com/video/30840985?title=0&byline=0&portrait=0" width="219" height="123" frameborder="0"></iframe>
</div>
<span class="headRightText">Ознакомьтесь с возможностями в видео ролике.<br />
<span style="font-style: italic;">Для просмотра необходим плеер QuickTime</span></span>
<div id="pdfDownloadLogo">
<a href="#" target="_blank"><img src="img/pdficon.jpg" width="63" height="77" alt=""/></a>
<span class="headRightText">Скачать информационную листовку о продукте в формате PDF</span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="containerFoot">
<div id="footer">
<div style="margin-top: -70px;"><img src="img/botStylePic.png" align="right" width="559" height="23" alt="" /></div>
<div class="footerLogoAddress">
<div style="float: left;">
<a href="#" target="_blank"><img src="img/terralink_cop.png" width="81" height="48" alt="" style="margin-top: 9px; float: left; margin-right: 30px;" /></a>
<div class="address" style="float: right;">121248, Москва, Кутузовский проспект, 12<br />
Тел.: (495) 721-1721. Факс: (495) 721-1722<br />
e-mail: info@terralink.ru
</div>
</div>
<div style="float: right;">
<div class="address" style="float: left;">127018, Москва, ул. Сущевский вал, 18<br />
Тел.: (495) 212-2112<br />
e-mail: ds@skbkontur.ru, diadoc@skbkontur.ru
</div>
<a href="#" target="_blank"><img src="img/skb.png" width="73" height="50" alt="" style="margin-left: 30px; margin-top: 9px; float: right;" /></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Тут CSS

* {
margin: 0;
padding: 0;
}
body {
background-color: #E5E5E5;
margin: 0 auto;
padding: 0;
font-family: Verdana, Arial;
font-size: 11px;
width: 100%;
height: 100%;
}
body, html {
height: 100%;
}
#containerPage {
position: relative;
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
.cls {clear:both; height:0; font-size:0; line-height:0; visibility:hidden;}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin: 10px 0;
}
hr {margin: 10px 0;
color: #c0c0c0;
border: 0px none;
border-top: solid 1px #c0c0c0;
height: 1px;
}
ul {margin-left: 15px;}
@font-face {
font-family: 'FBTMedium';
src: url('fonts/FBTMedium.eot');
src: local('FBTMedium'),
url('fonts/FBTMedium.woff') format('woff'),
url('fonts/FBTMedium.ttf') format('truetype'),
url('fonts/FBTMedium.svg#FBTMedium') format('svg');
font-weight: normal;
font-style: normal;
}
a, img, div, input {
outline: medium none;
border: 0 none;
}
img { border: 0;}
@font-face {
font-family: "PFDinDisplayPro-Regular";
src: url("PFDinDisplayPro-Regular.ttf");
}
a:hover {
color: #3FBBEC;
text-decoration: none;
}
h1{font-size: 36px; color:#4E4E4E; margin: 0 0 0 0; padding:0 0 10px 0; font-weight:normal; font-family: Verdana, Arial; }
h2{font-size: 24px; color:#363636; margin: 0 0 4px 0; padding:0 0 0 0; font-weight: normal; font-family: Verdana, Arial;}
.h2size {display: block; font-size: 22px; color:#363636; padding: 0 0 5px 0; font-weight: normal; font-family: Verdana, Arial; text-transform: uppercase;}
.h3size {display: block; font-size: 16px; color: black; padding: 8px 0 0 0; font-weight: normal; font-family: Verdana, Arial; text-transform: uppercase;}
.clear {
clear: both;
}
.tlfont {font-family: 'FBTMedium', Georgia;}
.topblock {height: 34px; width: 100%; background-color: #F3B143; margin-top: 0;}
.sign {margin: -20px 0 20px 0; text-align: center; font-size: 12px;}
li {color: #EC7E3C; padding-bottom: 3px;}
li span {color: black;}
.ulBlack li {color: black;}
#container {width: 944px; margin: 0 auto; outline: 0px solid red; margin-top: -25px;} /* —————————————CONTAINER */
#header {position: relative; width: 944px; padding-bottom: 20px; background-color: white; outline: 0px dashed yellow;} /* —————--HEADER */
#topHeader {position: relative; width: 886px; border-bottom: 1px solid #F7941D; padding-top: 25px; padding-bottom: 15px; margin-bottom: 20px; margin-left: 30px; outline: 0px dashed blue;}
.xdeLogo {position: relative; float: left; background: url("img/xde.png") no-repeat; width: 95px; height: 105px; outline: 0px solid black;}
.menuLine {position: relative; float: right; color: #7F7F7F; outline: 0px dashed green;}
.menuLine a {color: #7F7F7F; text-decoration: none;}
.menuLine a:hover {text-decoration: underline;}
.menuFirst {padding-right: 10px;}
.menuMid {padding-left: 10px; padding-right: 10px;}
.menuLast {padding-left: 10px;}
.search { /* —————————————SEARCH */
position: relative;
width: 232px;
height: 21px;
margin-top: 65px;
outline: 0px dashed black;
float: right;
right: 17px;
}
.search .searchinput {
position: absolute;
width: 210px;
height: 17px;
left: 27px;
top: 1px;
padding-top: 2px;
outline: 0px dotted black;
color: #CBCBCB;
border: 1px solid #B2B2B2;
padding-left: 10px;
margin: 0;
font-size: 10px;
font-style: italic;
}
.search .searchsubmit {
position: absolute;
background: url("img/loupe.png") no-repeat;
width: 22px;
height: 19px;
left: 0;
top: 2px;
border: none;
outline: 0px dotted black;
cursor: pointer;
}
.headLeftSide {position: relative; float: left; width: 630px; padding-bottom: 10px; margin-left: 30px;}
.headLeftInnerBlock {position: relative; display: block; padding-bottom: 20px; outline: 0px dashed black;}
.orangeText {font-family: Georgia, Tahoma; font-style: italic; text-align: left; color: #EE922E; font-size: 14px; line-height: 12px; display: block; margin: 15px 0 15px 15px;}
.redText {font-family: Verdana, Georgia, Tahoma; text-align: left; font-style: italic; font-weight: 550; color: #F46334; font-size: 14px; line-height: 18px;}
.headRightSide {position: relative; float: right; width: 248px; font-size: 9px; outline: 0px dashed green; margin-right: 20px;}
.headRightInnerBlock {margin-left: 21px; width: 219px; outline: 0px solid blue;}
.headRightText {display: block; margin-top: 7px; color: #4E4E4E;}
#playerMain {width: 219px; height: 123px;}
#pdfDownloadLogo {margin-top: 50px;}
#content { /* —————————————CONTENT */
position: relative;
background: url("img/mainpage/fon_image.jpg") no-repeat;
height: 100%;
margin: 0 auto;
padding-bottom: 160px;
width: 944px;
}
.contentText {position: relative; left: 30px;}
.contentLeftSide {position: relative; width: 630px; float: left; margin-top: 15px;}
.contentRightSide {position: relative; margin-top: 15px; width: 238px; float: right; outline: 0px solid black;}
.contentTextMenu {position: relative; display: block; outline: 0px solid white; margin-bottom: 50px;}
.contentTextMenu p {margin: 3px 0;}
.contentTextMenu a {text-decoration: none; color: #FF6600;}
.contentTextMenu a:hover {text-decoration: underline;}
#otzivComment { /* —————————————COMMENT */
position: relative;
width: 238px;
margin-bottom: 50px;
}
#otzivComment .commenting {
background: white url("img/hotel/otzyv_text_area.png") no-repeat;
width: 216px;
height: 144px;
border: 1px solid #989898;
padding: 8px 10px;
resize: none;
font-size: 11px;
font-style: italic;
color: #B2B2B2;
overflow: auto;
outline: none;
}
#otzivComment .com_sub {
background: url("img/send_button.png") no-repeat top left;
position: relative;
width: 114px;
height: 22px;
border: none;
left: 52.5%;
margin-top: 10px;
text-indent: -5000px;
outline: 0px dotted red;
cursor: pointer;
}
#otzivComment .com_sub:hover {background-position: bottom left;}
.com_name {outline: none; margin-bottom: 5px; margin-right: 0; border: 1px solid #989898; width: 99.5%;}
.com_mail {outline: none; margin-bottom: 5px; margin-right: 0; border: 1px solid #989898; width: 99.5%;}
#playerSide {position: relative; width: 238px; margin-bottom: 50px;}
.playerSideText {text-align: center; font-size: 9px; margin-bottom: 25px; display: block; margin-top: 3px; color: #4E4E4E;}
#containerFoot { /* —————————————FOOTER */
background: #7F7F7F;
bottom: 0 !important;
height: 97px;
position: absolute;
width: 100%;
}
#footer {width: 944px; position: relative; margin: 0 auto;}
.footerLogoAddress {position: relative; margin-top: 47px; height: 64px; width: 944px; padding-top: 38px; outline: 0px dashed white;}
.address {padding-top: 15px; color: white;}

paracelso · October 28, 2011

Ну ведь лень все это собирать, на фиддл залил бы штоле.

Beatler · October 31, 2011

Да, извиняюсь, действительно неудобно.

Вот тут лучше видно: http://xde.terralink.ru/

Попереходите через меню между Главная - О продукте и т.д. через Оперу и посмотрите как ведет себя футерная картинка, она выпрыгивает за пределы футера, но если обновить страницу – ставится на место. Чудеса.

И ещё странное дело - левое лого в футере имеет адрес terralink.ru, но при копировании вёрстки на сайт автоматически меняется на xde.terralink.ru (это уже во всех браузерах)– опять чудеса какие-то!

Заранее спасибо за советы!

Edited October 31, 2011 by Beatler

Gvager · November 1, 2011

И ещё странное дело - левое лого в футере имеет адрес terralink.ru, но при копировании вёрстки на сайт автоматически меняется на xde.terralink.ru (это уже во всех браузерах)– опять чудеса какие-то!


<a href="http://xde.terralink.ru/" target="_blank">
<img src="img/terralink_cop.png" width="81" height="48" alt="" style="margin-top: 9px; float: left; margin-right: 30px;">
</a>

Вроде чётко прописана ссылка на http://xde.terralink.ru/

Верстка на такое не повлияет)

ceil100 · November 1, 2011

адрес в лого может поменяться только если там прописан относительный путь средствами PHP

в CMS обычно так и делают, чтобы вручную каждый раз не забивать адрес нового сайта

способы разные -> результат: корректный адрес

чудо если вы вписали конкретный адрес в ссылку, а он сам поменялся

кстати, зачем каждый раз главную страницу в новой вкладке открывать? Это дурной тон

вот эта конструкция, не несет никакой практической ценности:


<div style="margin-top: -70px;">
    <img width="559" height="23" align="right" alt="" src="img/botStylePic.png">
</div>

если нужно добавить картинку фоном, то делай ее фоном для контейнера

отсюда и проблемы с отображением

Edited November 1, 2011 by ceil100

Beatler · November 1, 2011

Спасибо за хорошие советы!

чудо если вы вписали конкретный адрес в ссылку, а он сам поменялся

Именно так, в вёрстке ссылка на нижнее левое лого выглядит так:

<a href="http://terralink.ru/" target="_blank">
    <img src="img/terralink_cop.png" width="81" height="48" alt="" style="margin-top: 9px; float: left; margin-right: 30px;" />
</a>

А когда вёрстку заливают на сайт (копи-пастом в обход CMS), то вышеуказанная ссылка http://terralink.ru/ превращается в http://xde.terralink.ru!

кстати, зачем каждый раз главную страницу в новой вкладке открывать? Это дурной тон

Это лого не должно вести на главную страницу этого же сайта, оно должно отдельным окном открывать другой сайт ))

ceil100 · November 2, 2011

какая CMS?

чудес не бывает и все поддается логическому объяснению

покажите то, что вписано в адрес на изначальном шаблоне

Beatler · November 2, 2011

какая CMS?
чудес не бывает и все поддается логическому объяснению
покажите то, что вписано в адрес на изначальном шаблоне

CMS никакого нет, вся вёрстка просто копируется в корень сайта. То что вписано в изначальном шаблоне показано в моём сообщении чуть выше. Вписано http://terralink.ru/, а при копировании на сайт меняется на http://xde.terralink.ru. Причём только лишь в этом месте (нижний левый лого в футере сайта) Не чудеса? )

Beatler · November 2, 2011

А сейчас вообще перестала вёрстка копироваться. Даже стирали старую со всеми папками и перезаписывали новой, но все равно остается старая. Сервер, на котором это все находится – IIS 6.0. Может тут собака зарыта?

Sign In

Маленький дефект отображения футера в Opera

Question

Beatler

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

paracelso

Link to comment

Share on other sites

Beatler

Link to comment

Share on other sites

Gvager

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

Beatler

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

Beatler

Link to comment

Share on other sites

Beatler

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information