Ciao ragazzi,
Sono costretto a chieder aiuto a tutti voi...
Ho creato un layout per un mio cliente composto da un div contenitore all'interno c'è tutta la mia struttura con tando di div e relativi.
il problema è con tutti i browser ie6 compreso funziona correttamente , mentre in IE7 il divo contenitore si ferma all'header e tutti i gli altri div escono fuori in questo modo non sono in grado di mantenere il fotter incollato alla fine del sito...
ho provato l'impossibile ma non riesco a risolvere questo problema.
Vi posto il css e html
html, body {
margin:0;
padding:0
}
body {
background-image:url(../images/bg_body.gif);
background-position:left top;
font: 76% arial, sans-serif;
text-align:center
}
div#container {
float:left;
margin:0;
padding:0;
text-align:left;
width:100%;
background-color:#000000;
height:auto;
}
div#header {
background-image:url(../images/bg_header.gif);
background-position:left top;
background-repeat:no-repeat;
height:245px;
margin:0;
width:996px;
}
div#logo {
background-image:url(../images/logo.png);
background-repeat:no-repeat;
height:192px;
position:relative;
top:56px;
width:354px;
}
div#logo a{
border:none;
}
div#menu_sx_wrap {
background:#B9CAFF none repeat scroll 0 0;
float:left;
margin-left:-996px;
width:377px;
}
div#extra {
background:#FF8539
}
div#wrapper {
float:left;
width:100%;
}
div#wrap_content {
background-color:#CCCCCC;
margin:0 28px 0 377px;
}
div#wrap_content p {
line-height:1.4;
margin:0px;
padding:0px;
}
div#footer {
background-image:url(../images/bg_footer.gif);
background-position: left top;
background-repeat:repeat-x;
height:251px;
float:left;
width:100%;
color: #FFF;
}
div#footer p {
margin:0;
padding:5px 10px
}
div.accordion{
color:#990000;
font-size:12px;
font-weight:bold;
}
/breadcrumb/
div#breadcrumb_wrap {
background-image:url(../images/breadcrumb/bg_breadcrumb.gif);
background-repeat:repeat-x;
float:right;
height:64px;
left:-5px;
margin-bottom:-11px;
position:relative;
top:-11px;
}
div#breadcrumb_wrap ul{
width:100%;
list-style-type: none;
display:inline;
margin:0;
padding:0;
}
div#breadcrumb_wrap ul li{
float:left;
margin:0;
}
div#breadcrumb_wrap .end {
background-image:url(../images/breadcrumb/arrow_sx.gif);
background-position:0 0;
background-repeat:no-repeat;
display:block;
height:64px;
font-weight:bold;
}
div#breadcrumb_wrap .cent {
background-image: url(../images/breadcrumb/arrow_inter.gif);
background-position:0 0;
background-repeat:no-repeat;
display:block;
height:64px;
}
div#breadcrumb_wrap .home {
background-image: url(../images/breadcrumb/home.gif);
background-position:0 0;
background-repeat:no-repeat;
display:block;
height:64px;
width:94px;
font-weight:bold;
}
div#breadcrumb_wrap ul li a {
color:#000000;
display:block;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:12px;
font-style:italic;
margin:19px 8px 0 34px;
text-decoration:none;
text-transform:capitalize;
}
div#breadcrumb_wrap ul li a:hover{
text-decoration:underline;
}
div.wrap_news {
background-image:url(../images/bg_news.gif);
background-repeat:no-repeat;
height:114px;
left:406px;
padding:0px;
position:relative;
top:-116px;
width:561px;
margin-bottom:-64px;
[if IE 6] margin-bottom:-116px;
}
.tickerstyle {
/background:lightyellow none repeat scroll 0 0; IL CONTENITORE DELLE NEWS PER FARLE SCORRERE/
left:15px;
overflow:hidden;
position:relative;
top:-61px;
width:380px;
z-index:1;
}
.tickerstyle a {
color:#990225;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:14px;
font-style:italic;
font-weight:bold;
left:-9px;
position:relative;
top:19px;
display:block;
padding:10px
}
.tickerstyle a:hover {
text-decoration:none;
}
.messagediv {
display: none;
position:relative;
top:-16px;
}
#aggiornamenti_news {
background-image:url(../images/ultimi_aggiornamenti.png);
background-repeat:no-repeat;
height:80px;
left:386px;
position:relative;
top:17px;
width:197px;
z-index:2;
}
----HTML----
<html>
<head>
<title>Pagina Bianca</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
@import url('css/style.php');
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/news.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<!-- coppia di script per il pngfix per IE6 -->
<script type="text/javascript" src="js/pngfix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//attiviamo il png fix al caricamento
$(document).pngFix();
//istanziamo un utilizzo della colorbox
$("a.esterno").colorbox({width:"80%", height:"80%", iframe:true});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div class="wrap_news">
<div id="aggiornamenti_news"></div>
<div id="myhtmlticker" class="tickerstyle">
<div class="messagediv"> <b><a href="#">Ajax (XMLHttpRequest) reference</a></b><br />
A comprehensive, one page section on Ajax (XMLHttpRequest object) has just been added to the JavaScript Reference. </div>
<div class="messagediv"> <b><a href="#">Performing GET and POST requests using Ajax</a></b><br />
This tutorial explains Ajax frankly and gently, while also covering the important topics of fetching XML and JSON files using Ajax. </div>
<div class="messagediv"> <b><a href="#">Sorting an JavaScript array using array.sort()</a></b><br />
See how to harness the sort method of JavaScript to sort an array alphabetically, numerically, or even shuffle the array elements. </div>
</div>
</div>
<div id="breadcrumb_wrap">
<ul>
<li class="end"><a href="#">testo 1</a></li>
<li class="cent"><a href="#">testo 2</a></li>
<li class="cent"><a href="#">testo testo testo</a></li>
<li class="home"><a href="#">Home</a></li>
</ul>
</div>
<div id="wrapper">
<div id="wrap_content">
<p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very. </p>
</div>
</div>
<div id="menu_sx_wrap">
<div class="accordion"><a href="#">Link</a></div>
<div class="toggle_container">
<p>Questo testo è nascosto e si mostra nel momento in cui clicchi sul link soprastante.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Here it goes the footer</p>
</div>
</body>
</html>
Ve ne sarei grato se mi aiutasse !!!
