mam taki problem w firefox i chrom nie chce się wyświetlać tło które jest cienkim powtarzający się paskiem, przejście gradientowe pod dużym blokiem czerwonym (przechodzi pod zdjęciem z okularami). W kodzie gdy ustalam wysokość tego tła na 99px, bo tyle ma to w IE jest ok, ale w pozostałych 2 przeglądarkach stopka - czerwony pasek podchodzi do góry pod to tło, wtedy stopka jest pod resztą strony. Jak nie ustalę wysokości to to tło wyświetla się tylko w IE w innych już nie.
link do strony: strona
Proszę o pomoc.
Kod
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
</head>
<style type="text/css">
<!--
img { display: block; }
body{
width: 1000px;
}
/*-----TOP-----*/
#container1{
width:1000px;
height:65px;
background-image: url(./images/index_02.jpg);
background-repeat: repeat-x;
}
#container1 .column {
position: relative;
float: left;
}
#logo{
width:223px;
height:65px;
}
#menu{
width:400px;
height:65px;
}
/*-----LOWER-TOP-----*/
#container2{
width:1000px;
height:241px;
}
#container2 .column {
position: relative;
float: left;
}
#left{
width:313px;
height:241px;
}
#right{
width:687px;
height:241px;
background-image: url(./images/index_09.jpg);
}
#text1{
width:160px;
height:196px;
margin-left: 60px;
margin-top: 45px;
}
#text2{
width:160px;
height:196px;
margin-left: 40px;
margin-top: 45px;
}
#text3{
width:160px;
height:196px;
margin-left: 40px;
margin-top: 45px;
}
/*-----MIDDL-----*/
#container3a{
width:1000px;
background-image: url(./images/index_13.jpg);
background-repeat: repeat-x;
height:99px;
}
#container3{
width:1000px;
background-image: url(./images/index_13.jpg);
background-repeat: repeat-x;
}
#container3 .column {
position: relative;
float: left;
}
#left2{
width:278px;
margin-left:35px;
height: 100%;
}
#right2{
width:687px;
height: 100%;
}
#text4{
width:267px;
background-image: url(./images/index_27.gif);
background-repeat: repeat-y;
height: 100%;
}
#text5{
width:670px;
background-image: url(./images/index_22.gif);
background-repeat: repeat-y;
height: 100%;
}
/*-----BOTTOM-----*/
#container4{
margin-top: auto;
width:1000px;
background-image: url(./images/index_37.jpg);
background-repeat: repeat-x;
height:95px;
clear:both;
}
#container4 .column {
position: relative;
float: left;
}
-->
</style>
<body>
<div id="container1">
<div id="logo" class="column">
<img src="./images/index_04.jpg" />
</div>
<div id="menu" class="column">
<img src="./images/index_06.gif" />
</div>
</div>
<div id="container2">
<div id="left" class="column">
<img src="./images/index_08.jpg" />
</div>
<div id="right" class="column">
<div id="text1" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<div id="text2" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<div id="text3" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
</div>
</div>
<div id="container3">
<div id="left2" class="column">
<img src="./images/index_11.jpg" />
<img src="./images/index_20.jpg" />
<img src="./images/index_25.gif" />
<div id="text4" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<img src="./images/index_31.gif" />
</div>
<div id="right2" class="column">
<p style="padding-top: 30px;">
<img src="./images/index_15.jpg" />
</p>
<p>
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</p>
<img src="./images/index_21.gif" />
<div id="text5" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<img src="./images/index_29.gif" />
</div>
</div>
<div id="container4">
fsadfs
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
</head>
<style type="text/css">
<!--
img { display: block; }
body{
width: 1000px;
}
/*-----TOP-----*/
#container1{
width:1000px;
height:65px;
background-image: url(./images/index_02.jpg);
background-repeat: repeat-x;
}
#container1 .column {
position: relative;
float: left;
}
#logo{
width:223px;
height:65px;
}
#menu{
width:400px;
height:65px;
}
/*-----LOWER-TOP-----*/
#container2{
width:1000px;
height:241px;
}
#container2 .column {
position: relative;
float: left;
}
#left{
width:313px;
height:241px;
}
#right{
width:687px;
height:241px;
background-image: url(./images/index_09.jpg);
}
#text1{
width:160px;
height:196px;
margin-left: 60px;
margin-top: 45px;
}
#text2{
width:160px;
height:196px;
margin-left: 40px;
margin-top: 45px;
}
#text3{
width:160px;
height:196px;
margin-left: 40px;
margin-top: 45px;
}
/*-----MIDDL-----*/
#container3a{
width:1000px;
background-image: url(./images/index_13.jpg);
background-repeat: repeat-x;
height:99px;
}
#container3{
width:1000px;
background-image: url(./images/index_13.jpg);
background-repeat: repeat-x;
}
#container3 .column {
position: relative;
float: left;
}
#left2{
width:278px;
margin-left:35px;
height: 100%;
}
#right2{
width:687px;
height: 100%;
}
#text4{
width:267px;
background-image: url(./images/index_27.gif);
background-repeat: repeat-y;
height: 100%;
}
#text5{
width:670px;
background-image: url(./images/index_22.gif);
background-repeat: repeat-y;
height: 100%;
}
/*-----BOTTOM-----*/
#container4{
margin-top: auto;
width:1000px;
background-image: url(./images/index_37.jpg);
background-repeat: repeat-x;
height:95px;
clear:both;
}
#container4 .column {
position: relative;
float: left;
}
-->
</style>
<body>
<div id="container1">
<div id="logo" class="column">
<img src="./images/index_04.jpg" />
</div>
<div id="menu" class="column">
<img src="./images/index_06.gif" />
</div>
</div>
<div id="container2">
<div id="left" class="column">
<img src="./images/index_08.jpg" />
</div>
<div id="right" class="column">
<div id="text1" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<div id="text2" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<div id="text3" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
</div>
</div>
<div id="container3">
<div id="left2" class="column">
<img src="./images/index_11.jpg" />
<img src="./images/index_20.jpg" />
<img src="./images/index_25.gif" />
<div id="text4" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<img src="./images/index_31.gif" />
</div>
<div id="right2" class="column">
<p style="padding-top: 30px;">
<img src="./images/index_15.jpg" />
</p>
<p>
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</p>
<img src="./images/index_21.gif" />
<div id="text5" class="column">
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
l l l l l l l l l l l l l l l l l l l
</div>
<img src="./images/index_29.gif" />
</div>
</div>
<div id="container4">
fsadfs
</div>
</body>
</html>