Jump to content

Footer a passear no meio dos conteúdos no IE 7


fantasma
 Share

Recommended Posts

Boas novamente

Estou encalhado com este problema de cross browsing do IE 7 e estou na esperança que alguem aqui me possa ajudar, visto, ser a minha unica esperança neste momento...

Tenho um footer que funciona perfeitamente em todos os browsers, excepto, pasmem-se, no IExplorer 7. insiste em ficar a conviver no meio dos conteudos da página, e acontece apenas nesta pagina, que tem um conteudo mais longo. Agradecia uma ajuda pf 😞

HTML:

</head>


<body>
<div id="container_top">
<div id="top">

<div class="container_logo"></div>

<div class="container_menu">
<a href="index.php" class="link_menu">A Quinta</a>
	<span class="only_space">   </span>
<a href="carne.php" class="link_activo">Carne</a>
	<span class="only_space">   </span>
<a href="mel.php" class="link_menu">Mel</a>
	<span class="only_space">   </span>
<a href="vinho.php" class="link_menu">Vinho</a>
	<span class="only_space">   </span>
<a href="compotas.php" class="link_menu">Compotas</a>
	<span class="only_space">   </span>
<a href="encomendas.php" class="link_menu">Encomendas</a>
	<span class="only_space">   </span>
<a href="contactos.php" class="link_menu">Contactos</a>
	<span class="only_space">   </span>
<a href="galeria.php" class="link_menu">Galeria</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Notícias</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Newsletter</a>

</div>

  </div>
  
</div>
<!-- DEGRADE MENU/CORPO -->
  <div class="degrade"></div>
<div id="container">

<div id="corpo">
<div class="corpo_submenu">
	<div class="submenu_links_mod">
	<ul>
		<li><a href="#" class="link_lista" onclick="menuActivo(this)">História</a></li>
		<li><a href="#" class="link_lista">Processos</a></li>
		<li><a href="#" class="link_lista">Produtos</a></li>
		<li><a href="#" class="link_lista">Certificados</a></li>

	</ul>	
	</div>
<div class="contentor_quote">
	<div class="esp"></div>
	<div class="aspas_mod"></div>
	<div class="corpo_quote_esq">
	<span class="quotebg">
	Um sítio maravilhoso para quem pretende ter um jantar tranquilo, ao som de boa música depois de um longo dia de trabalho
	</span>
	</div>
</div>
</div>


<div class="corpo_slider"><?php include 'banner.php'?>

	<div class="transparencia">

	</div>

</div>
<div class="separador_content_mod">
<div class="out_titulo">
<span class="cont_tit_out">Titulo</span>
<span class="separador2">   </span>
<span class ="subtitulo_out">Subtitulo</span>
</div>
</div>
<div class="cont_container_mod">

				<div class="content_container">
				<div class="border1"></div>
					<div class="content_titulo">Titulo</div>

					<div class="content_texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					<br><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					<br><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					<br><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</div>
				</div>
			</div>
			<div class="clearfix"/></div>
<div class="sep_cf"></div>
</div>



</div>



</div>
<div id="footer_container">
<div class="linha_sep"></div>
<?php include "mod_rodape.php";?>
</div>

</html>

CSS para a página (ocultei o resto)

body
{
background-color:#5a6f5d;	
margin:0;
padding:0;
}
#container
{
width: 100%; 
    margin: 0px auto;
    text-align: center;
background-color:#5a6f5d;	

}
#container_top
{

    margin: 0px auto;
    text-align: center;

background-color:#FFFFFF;	


}


.corpo_slider
{
position:relative;
width:625px;
height:390px;
text-align:center;
float:right;
margin-top:20px;
}
.bn_imagem img
{
width:625px;
height:390px;
overflow:hidden;
}
/*###################################################################################
#####################################################################################
####  BANNER
#####################################################################################
###################################################################################*/

#slider_ban {
width:625px;
height:390px;
}

#slider_ban ul, #slider_ban li 
{
	margin:0;
	padding:0;
	list-style:none;
	}

#slider_ban li {
/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:625px;
	height:390px;
	overflow:hidden; 
	}
}
#slider_ban ul {
width:30000px;
}		

#sld_bt_esq a
{
display:block;
position:relative;
float:left;
margin-left:10px;
width:6px;
height:12px;
background:url(../gfx/sld_seta_esq.png) no-repeat;
z-index:1000;
margin-top:-15px;
}
#sld_bt_dir a
{
display:block;
position:relative;
float:right;
margin-right:10px;

width:8px;
height:12px;
background:url(../gfx/sld_seta_dir.png) no-repeat;
z-index:1000;
margin-top:-15px;
}
a#sld_bt_esq:link {
background:url(../gfx/sld_seta_esq.png) top center no-repeat;
text-decoration:none;
}
a #sld_bt_esq:visited {
background:url(../gfx/sld_seta_esq.png) bottom center no-repeat;
text-decoration:none;
}
a #sld_bt_esq:hover {
background:url(../gfx/sld_seta_esq.png) bottom left no-repeat;
text-decoration:none;
}

a #sld_bt_esq:active {
background:url(../gfx/sld_seta_esq.png) top left no-repeat;
text-decoration:none;
}
a #sld_bt_dir:link {
background:url(../gfx/sld_seta_dir.png) top left no-repeat;
text-decoration:none;
}
a #sld_bt_dir:visited {
background:url(../gfx/sld_seta_dir.png) bottom left no-repeat;
text-decoration:none;
}
a#sld_bt_dir:hover {
background:url(../gfx/sld_seta_dir.png) bottom left no-repeat;
text-decoration:none;
}
a#sld_bt_dir:active {
background:url(../gfx/sld_seta_dir.png) top left no-repeat;
text-decoration:none;
}


.pre_transp
{
width:1px;
z-index:-1;

}
.transparencia
{
position:relative;
margin-top:-20px;
width:625px;
height:20px;
z-index:1;
background-color:#FFFFFF;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;


}
.corp_submenu ul {}
.corpo_submenu ul
{
position:relative;
list-style-image:url(../gfx/listtype.png);
margin-top:10px;
}

.corpo_submenu
{
width:175px;
height:389px;
float:left;
margin-top:10px;

}

.submenu_links_mod
{
float:left;
height:210px;
font-family:'aller_i';
font-size:11px;

}
.link_lista_activo
{
color:#FFFFFF;
text-decoration:underline;
}
a.link_lista:link
{	
color:#FFFFFF;
text-decoration:none;
}
a.link_lista:visited

{
color:#FFFFFF;
text-decoration:none;

}
a.link_lista:hover {
color:black;
text-decoration:none;

}
a.link_lista:active {

color:#FFFFFF;
text-decoration:underline;

}

.contentor_quote
{
width:195px;
height:195px;
float:left;
}

.esp
{
height:20px;
width:195px;
}
.aspas_mod
{

width:50px;
height:48px;
margin-left:-10px;
background:url(../gfx/aspas.png) no-repeat;
}
.corpo_quote_esq
{

height:130px;
text-align:left;
font-family:'aller_i';
font-size:14px;
line-height:25px;
font-style:oblique;
font-weight:bold;
color:#5a6f5d;	

}
.separador_content_mod
{
width:840px;
height:40px;
float:left;
}

.out_titulo
{
width:123px;
height:20px;
float:left;
margin-top:20px;
font-family:'aller_bi';
text-align:center;
background-color:#FFFFFF;
}
.cont_tit_out
{
font-size:13px;
font-weight:600;

line-height:20px;


}
.separador2{
position:relative;
background:url(../gfx/menu_separador2.png) center no-repeat;

}
.subtitulo_out
{
font-size:13px;
font-weight:300;
color:#3f4c42;

}

.content_titulo
{
width:530px;
float:left;
margin-left:10px;
height:40px;
line-height:40px;
font-family:'aller_bi';
font-size:13px;
color:#3f4c42;
border: 5px;
}
.cont_container_mod
{
width:840px;
height:auto;
float:left;
background-color:#FFFFFF;



}
.content_texto
{

width:530px;
float:left;
color:#3f4c42;
font-family:'aller_i';
font-size:13px;
border: 10px solid #FFFFFF;
}
.border1
{
width:215px;
height:400px;
float:left;
clear:left;
}
.sep_cf
{

height:20px;
width:840px;
float:left;
}

Espero que me possam ajudar, visto que, já nao sei mais o que fazer, e tenho bastante urgência.

Já experimentei vários hacks, e um clear antes do footer e no proprio footer, mas nada....

Um abraço,

Link to comment
Share on other sites

Acho que a melhor maneira para evitar problemas é fazer o seguinte esquema de divs

topo

menu

Conteúdo

        Col01

        Col02

Rodape

Isto é, sempre que tenhas divs que seja para aparecer lado a lado deves criar uma div anterior como fiz com a div conteúdo

Assim o teu rodapé não se perde

Epsero ter ajudado

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.