Кроссбраузерность. Помогите решить проблему.

mogdalov · December 2, 2012

Добрый день, код сырой, но дело в том что изначально проверял на Опере, потом выяснил, что популярнее в моем регионе Фаерфокс и решил на нем проверить. Был шокирован.

Проблема в том, что при наведении на иконки в Опере меняется картинка, а в фаерфоксе не меняется, остается такой же, да и вообще ссылка не работает.

Это мой первый сайт, делаю для себя, не профессионал, извините за трэш.

<html>

<head>

<title>Flexotex</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords"contente="пароизоляция, ветроизоляция, гидроизоляция">
<meta name="description" content="Паро-,ветро-, гидроизоляционные материалы ТМ Flexotex">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="mainframe">

<div class="header">

<div style="float:left;"><a href="index1.htm"><img src="head1.jpg" alt="Flexotex"></a></div>

<div class="header1">Инфолиния: +375 25 5000900</div>

<div class="menu">
<a class="menu1" href="aboutus.htm">О нас</a>
<a class="menu1" href="prod.htm">Продукция</a>
<a class="menu1" href="use.htm">Применение</a>
<a class="menu1" href="cert.htm">Сертификаты</a>
<a class="menu1" href="wtb.htm">Где купить</a>
<a class="menu1" href="cont.htm">Контакты</a>
</div>

</div>

<div><img src="line.jpg" width="1000px" height="1px" style="margin-top:10px; margin-bottom:10px;"></div>

<div class="usetext1"><h1 style="margin-top: 10px; margin-bottom: 10px; font-weight: normal;">Защита строительных конструкций от 

разрушительной влаги</h1></div>

<div class="hottext">

<img src="picforhottext.jpg" alt="Стропильная конструкция" style="float: left; margin-right: 20px;">

<p style="text-indent: 40px;">Строительные разработки последних десятилетий полностью изменили традиционную скатную кровлю. Не используемый 

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

теперь оборудуется подкровельными пленками.</p>
<p style="text-indent: 40px;">Принимая во внимание многообразие теплоизоляционных материалов, чердачное помещение можно оборудовать так, чтобы 

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

воспринимающая как внешние воздействия (атмосферные осадки, солнечную радиацию, ветровые нагрузки и др.), так и внутренние - перепад 

температуры и влажности.</p>
<p style="text-indent: 40px;">Конструкция утепленной кровли представляет собой многослойный корпус, составленный из разнородных материалов, в 

котором каждый отдельный слой играет свою незаменимую роль. Подкровельная ветро-гидроизоляция и пароизоляционный барьер являются при условии 

правильного применения одним из основных факторов, определяющим надежность, долговечность, комфортность и экономичность мансардных помещений. 

<a class="index11" href="index11.htm">Читать далее...</a></p>

</div>

<div><img src="line.jpg" width="1000px" height="1px" style="margin-top:10px; margin-bottom:10px;"></div>

<div class="usetext2"><h2 style="margin-top: 10px; margin-bottom: 10px; font-weight: normal;">Области применения</h2></div>

<div>
<a href="#" class="p1"></a></div>

<div>
<a href="#" class="p2"></a></div>

<div>
<a href="#" class="p3"></a></div>

<div>
<a href="#" class="p4"></a></div>

<div>
<a href="#" class="p5"></a></div>

<div>
<a href="#" class="p6"></a></div>

<div>
<a href="#" class="p7"></a></div>

<div>
<a href="#" class="p8"></a></div>

<div>
<a href="#" class="p9"></a></div>

<div class="footer0">

<div><img src="line.jpg" width="1000px" height="1px" style="margin-top:10px; margin-bottom:10px;"></div>

<div class="footer">
<div><a href="#" class="footer1">© "Флексотекс" ООО, 2012г</a></div>
<div><a class="footer2">Продукция "Флексотекс": пароизоляция, ветрозащита, гидроизоляция, пленка, мембрана.</а></div>
<div><a class="footer3" href="mailto:info@flexotex.by">info@flexotex.by</а></div> 
</div>

</div>

</div>

</body>

</html>

и css

.mainframe
{
 /* border: 1px solid black; */
 width: 1000px;
 margin: -5px auto -10px;
}

.header
{
 /* border: 1px solid black; */
 width: 1000px;
 height: 63px;
}

.header1
{
 float: right;
 font-family: "calibri";
 padding-top: 5px;
 padding-right: 5px;
}

.menu
{
 /* border: 1px solid black; */
 padding-top: 20px;
 padding-right: 0px;
 float: right;
}

a.menu1
{
 font-family: "calibri";
}

.menu1
{
 color: black;
 padding: 5px;
 text-decoration: none;
}

.menu1:hover
{
 color: #D8D8D8;
 text-decoration: underline;
}

.usetext1
{
 font-family: "calibri";
}

.hottext
{
 /* border: 1px solid black; */
 text-align: justify;
 font-family: "calibri";
}

.usetext2
{
 font-family: "calibri";
 margin-top: -10px;
}

.index11
{
 text-decoration: none;
 color: black;
}

.index11:hover
{
 text-decoration: underline;
 color: #D8D8D8;
}

a.p1 
{
 background: url("mansarda.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p1:hover 
{
 background: url("mansarda1.jpg");
 background-repeat: no-repeat;
}

a.p2 
{
 background: url("holodnaja.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p2:hover 
{
 background: url("holodnaja1.jpg");
 background-repeat: no-repeat;
}

a.p3
{
 background: url("cherdak.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p3:hover 
{
 background: url("cherdak1.jpg");
 background-repeat: no-repeat;
}

a.p4
{
 background: url("mezetaznoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p4:hover 
{
 background: url("mezetaznoe1.jpg");
 background-repeat: no-repeat;
}

a.p5
{
 background: url("cokolnoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p5:hover 
{
 background: url("cokolnoe1.jpg");
 background-repeat: no-repeat;
}

a.p6
{
 background: url("beton.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p6:hover 
{
 background: url("beton1.jpg");
 background-repeat: no-repeat;
}

a.p7
{
 background: url("karkasnaja.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p7:hover 
{
 background: url("karkasnaja1.jpg");
 background-repeat: no-repeat;
}

a.p8
{
 background: url("mezkomnatnoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p8:hover 
{
 background: url("mezkomnatnoe1.jpg");
 background-repeat: no-repeat;
}

a.p9
{
 background: url("ventiliruemij.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p9:hover 
{
 background: url("ventiliruemij1.jpg");
 background-repeat: no-repeat;
}

.footer0
{
 width: 1000px;
 height: 50px;
 position: relative;
 bottom: 0px;
}

.footer
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 width: 1000px;
 height: 50px;
}

.footer1
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 color: black;
 text-decoration: none;
}

.footer1:hover
{
 color: #D8D8D8;
 text-decoration: underline;
}

.footer2
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 font-size: 14px;
 float: left;
}

.footer3
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 font-size: 14px;
 float: right;
}

Проблема c p1 по p9. Спасибо за ответы!

Edited December 2, 2012 by mogdalov
Используйте для кода специальные теги - code.

mogdalov · December 2, 2012

Убираю весь footer0 и проблема исчезает...

mogdalov · December 2, 2012

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

Но на этой странице футер залез на иконки, хотя все прописано нормально.

при наведении

самое интересное, что кнопка становится быть чувствительной под ссылкой на главную страниыу сайта, там где написано "С "Флексотекс" ООО, 2012"

но футер должен быть таким

Почему он лезет наверх? И почему декоративная полоска над футером лезет над кнопками с анимацией?

Вот код:

<html>

<head>

<title>Flexotex</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords"contente="пароизоляция, ветроизоляция, гидроизоляция">
<meta name="description" content="Паро-,ветро-, гидроизоляционные материалы ТМ Flexotex">

<link href="styleuse.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="mainframe">


<div class="header">

<div style="float:left;"><a href="index1.htm"><img src="head1.jpg" alt="Flexotex"></a></div>

<div class="header1">Инфолиния: +375 25 5000900</div>

<div class="menu">
<a class="menu1" href="aboutus.htm">О нас</a>
<a class="menu1" href="prod.htm">Продукция</a>
<a class="menu1" href="use.htm" style="color: #D9251C;">Применение</a>
<a class="menu1" href="cert.htm">Сертификаты</a>
<a class="menu1" href="wtb.htm">Где купить</a>
<a class="menu1" href="cont.htm">Контакты</a>
</div>

</div>

<div class="usetext1"><h1 style="margin-top: 10px; margin-bottom: 10px; font-weight: normal;">Область применения</h1></div>

<div>
<a href="#" class="p1"></a></div>

<div>
<a href="#" class="p2"></a></div>

<div>
<a href="#" class="p3"></a></div>

<div>
<a href="#" class="p4"></a></div>

<div>
<a href="#" class="p5"></a></div>

<div>
<a href="#" class="p6"></a></div>

<div>
<a href="#" class="p7"></a></div>

<div>
<a href="#" class="p8"></a></div>

<div>
<a href="#" class="p9"></a></div>

<div class="footer0">

<div class="line2"></div>

<div class="footer">
<div><a href="#" class="footer1">© "Флексотекс" ООО, 2012г</a></div>
<div><a class="footer2">Продукция "Флексотекс": пароизоляция, ветрозащита, гидроизоляция, пленка, мембрана.</а></div>
<div><a class="footer3" href="mailto:info@flexotex.by">info@flexotex.by</а></div> 
</div>


</div>

</div>

</body>

</html>

и css

.mainframe
{
 /* border: 1px solid black; */
 width: 1000px;
 margin: -5px auto -10px;
}

.header
{
 /* border: 1px solid black; */
 width: 1000px;
 height: 63px;
}

.logo
{
 /* border: 1px solid black; */
 background-repeat: no-repeat;
 float: left;
}

.header1
{
 float: right;
 font-family: "calibri";
 padding-top: 5px;
 padding-right: 5px;
}

.menu
{
 /* border: 1px solid black; */
 padding-top: 20px;
 padding-right: 0px;
 float: right;
}

a.menu1
{
 font-family: "calibri";
}

.menu1
{
 color: black;
 padding: 5px;
 text-decoration: none;
}

.menu1:hover
{
 color: #D8D8D8;
 text-decoration: underline;
}

.line
{
 background-image: url("line.jpg");
 background-repeat: no-repeat;
 width: 1000px;
 height: 3px;
 margin-top: 10px;
 margin-bottom: 10px;
}

.usetext1
{
 font-family: "calibri";
}

.hottext
{
 /* border: 1px solid black; */
 text-align: justify;
 font-family: "calibri";
}

.usetext2
{
 font-family: "calibri";
 margin-top: -10px;
}

a.p1 
{
 background: url("mansarda.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p1:hover 
{
 background: url("mansarda1.jpg");
 background-repeat: no-repeat;
}

a.p2 
{
 background: url("holodnaja.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p2:hover 
{
 background: url("holodnaja1.jpg");
 background-repeat: no-repeat;
}

a.p3
{
 background: url("cherdak.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p3:hover 
{
 background: url("cherdak1.jpg");
 background-repeat: no-repeat;
}

a.p4
{
 background: url("mezetaznoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p4:hover 
{
 background: url("mezetaznoe1.jpg");
 background-repeat: no-repeat;
}

a.p5
{
 background: url("cokolnoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p5:hover 
{
 background: url("cokolnoe1.jpg");
 background-repeat: no-repeat;
}

a.p6
{
 background: url("beton.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p6:hover 
{
 background: url("beton1.jpg");
 background-repeat: no-repeat;
}

a.p7
{
 background: url("karkasnaja.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p7:hover 
{
 background: url("karkasnaja1.jpg");
 background-repeat: no-repeat;
}

a.p8
{
 background: url("mezkomnatnoe.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:right;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p8:hover 
{
 background: url("mezkomnatnoe1.jpg");
 background-repeat: no-repeat;
}

a.p9
{
 background: url("ventiliruemij.jpg");
 display: block;
 width: 498px;
 height: 150px;
 float:left;
 padding-top: 2px;
 padding-bottom: 2px;
 background-repeat: no-repeat;
}

a.p9:hover 
{
 background: url("ventiliruemij1.jpg");
 background-repeat: no-repeat;
}

.footer0
{
 width: 1000px;
 height: 50px;
 position: relative;
 bottom: 0px;
}

.line2
{
 background-image: url("line.jpg");
 background-repeat: no-repeat;
 width: 1000px;
 height: 3px;
}

.footer
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 width: 1000px;
 height: 50px;
}

.footer1
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 color: black;
 text-decoration: none;
}

.footer1:hover
{
 color: #D8D8D8;
 text-decoration: underline;
}

.footer2
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 font-size: 14px;
 float: left;
}

.footer3
{
 /*border: 1px solid black;*/
 font-family: "calibri";
 font-size: 14px;
 float: right;
}

Edited December 2, 2012 by mogdalov

mogdalov · December 2, 2012

Все, решил проблему, внес изменение в css

.footer0
{
 width: 1000px;
 height: 50px;
 position: relative;
 bottom: 0px;
}

на

.footer0
{
 width: 1000px;
 height: 50px;
 position: align;
 bottom: 0px;
}

и все пришло в норму

Vadimka · December 3, 2012

хера себе)) position: align;

css4 уже?? или что))) нет такого параметра для position

страница на компе у тебя или в инэте по какому то адресу посмотреть можно?

Edited December 3, 2012 by Vadimka

mogdalov · December 3, 2012

хера себе)) position: align;
css4 уже?? или что))) нет такого параметра для position
страница на компе у тебя или в инэте по какому то адресу посмотреть можно?

Блин, точно, что-то я намудрил

Edited December 3, 2012 by mogdalov

Justnewone · December 4, 2012

position: align; в данном случае означает position: static; // Браузер не любит фантазировать и пропарсит либо нормально указанное где-то в коде значение, либо дефолт.

Sign In

Кроссбраузерность. Помогите решить проблему.

Question

mogdalov

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

mogdalov

Link to comment

Share on other sites

mogdalov

Link to comment

Share on other sites

mogdalov

Link to comment

Share on other sites

Vadimka

Link to comment

Share on other sites

mogdalov

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information