IE 7 Problem - Footer gets over a long piece of content

Question

fantasma 0 Junior Poster in Training

15 Years Ago

Greetings,

I've been pulling of all of my hair with this old piece of junk called IExplorer 7 because, my footer is over the content div. I've tried Sticky hack and it didn't solve anything so, you're pretty much my last hope of getting this done. In all other major browsers, including IE 8, all looks fine

The page can be viewed here:

My css (i'll post only the one that looks relevant to me):

/*###################################################################################
#####################################################################################
####  PAGE CONTAINER / OTHERS
#####################################################################################
###################################################################################*/

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;	
	
	
}


/*###################################################################################
#####################################################################################
####  FOOTER
#####################################################################################
###################################################################################*/



#footer_container
{
	
	width: 840px; 
    margin: 0px auto;
    text-align: left;
	padding:0;
	background-color:#5a6f5d;		
	
}
.esp_rdp
{
	
	width:840px;
	
	height:20px;
	float:left;
}

.rodape {
	
	
	margin-top:15px;
	padding:0;
	
	background-color:#5a6f5d;
	
	width: 100%;
	height:50px;
	border:none;
	
	}
.logo_signed{
	
	width:200px;
	height:13px;
	float:left;
	font-size:11px;
	text-align:left;
	
}
.copyright{
	
	padding-top:10px;
	width:240px;
	line-height:13px;
	float:left;
	font-size:8px;
	text-align:left;
	font-family:'aller_b';
	color:#bdbebd;
	text-decoration:none;
	\left:0px;
	
}
/* ----------------------------------------------------- */
.div_espaco_rod{

	width:420px;
	height:105px;
	float:left;
	
	font-size:11px;
	text-align:left;
	
}
.rp_separador{
	width:10px;
	height:90px;
	float:left;
	font-size:0px;
}


/* ----------------------------------------------------- */

.copywrite{
	
	padding-top:10px;
	width:240px;
	line-height:13px;
	float:left;
	
	font-size:8px;
	text-align:left;
	font-family:'aller_b';
	color:#FFFFFF;
	text-decoration:none;
	\left:0px;
	
}

.rp_coluna3{
	width:120px;
	height:105px;
	float:left;
	font-size:11px;
	text-align:left;
	right:20%;
	
}
.partilha_texto{
	width:120px;
	height:13px;
	font-size:11px;
	text-align:left;
	font-family:'aller_b';
	color:#FFFFFF;
	text-decoration:none;
}
.partilha_bloco{
	width:120px;
	height:20px;
	text-align:left;
}
.menu_idioma
{
	margin-top:10px;
	height:105px;
	float:right;
	
}
.menu_idioma_lang
{
	float:left;
	

}
.separador{
	float:left;
	margin-top:-10px;
	width:10px;
	height:20px;
	background:url(../gfx/menu_separador.png) center top no-repeat;
}
a.link_footer_active
{
	font-size:9px;
	line-height:10px;
	font-family:'aller';
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	float:left;
}
.degrade_rodape
{
	
	
	background:url(../gfx/pattern2.png);
	background-repeat: repeat-x; 	
}
/* ----------------------------------------------------- */

a.link_footer
{
	font-size:9px;
	line-height:10px;
	font-family:'aller';
	color:#C4C4C4;
	text-decoration:none;
	font-weight:bold;
}
a.link_footer:link {
	color:#C4C4C4;
	text-decoration:none;
}
a.link_footer:visited {
	color:#C4C4C4;
	text-decoration:none;
}
a.link_footer:hover {
	color:#FFFFFF;
	text-decoration:none;
}
a.link_footer:active {
	color:#FFFFFF;
	text-decoration:none;
}

/* ----------------------------------------------------- */
a.link_facebook {
	float:left;
	margin-right:2px;
	height:17px;
	width:15px;
	display:block;
	border:none;
	background:url(../gfx/r_facebook_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_facebook:link {
	background:url(../gfx/r_facebook_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_facebook:visited {
	background:url(../gfx/r_facebook_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_facebook:hover {
	background:url(../gfx/r_facebook_32.png) bottom center no-repeat;
	text-decoration:none;
}
a.link_facebook:active {
	background:url(../gfx/r_facebook_32.png) top center no-repeat;
	text-decoration:none;
}
/*-------------------------------------------------------------*/
a.link_linkedin {
	float:left;
	margin-right:2px;
	height:17px;
	width:15px;
	display:block;
	border:none;
	background:url(../gfx/r_linkedin_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_linkedin:link {
	background:url(../gfx/r_linkedin_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_linkedin:visited {
	background:url(../gfx/r_linkedin_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_linkedin:hover {
	background:url(../gfx/r_linkedin_32.png) bottom center no-repeat;
	text-decoration:none;
}
a.link_linkedin:active {
	background:url(../gfx/r_linkedin_32.png) top center no-repeat;
	text-decoration:none;
}
/*-------------------------------------------------------------*/
a.link_twitter {
	float:left;
	margin-right:2px;
	height:17px;
	width:15px;
	display:block;
	border:none;
	background:url(../gfx/r_twitter_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_twitter:link {
	background:url(../gfx/r_twitter_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_twitter:visited {
	background:url(../gfx/r_twitter_32.png) top center no-repeat;
	text-decoration:none;
}
a.link_twitter:hover {
	background:url(../gfx/r_twitter_32.png) bottom center no-repeat;
	text-decoration:none;
}
a.link_twitter:active {
	background:url(../gfx/r_twitter_32.png) top center no-repeat;
	text-decoration:none;
}
/*-------------------------------------------------------------*/
a.link_signed {
	float:left;
	height:13px;
	width:100px;
	
	border:none;
	background:url(../gfx/signed.png) top left no-repeat;
	text-decoration:none;
}
a.link_signed:link {
	background:url(../gfx/signed.png) top left no-repeat;
	text-decoration:none;
}
a.link_signed:visited {
	background:url(../gfx/signed.png) top left no-repeat;
	text-decoration:none;
}
a.link_signed:hover {
	background:url(../gfx/signed.png) bottom left no-repeat;
	text-decoration:none;
}
a.link_signed:active {
	background:url(../gfx/signed.png) top left no-repeat;
	text-decoration:none;
}



/*###################################################################################
#####################################################################################
####  PAGE CONTENTS
#####################################################################################
###################################################################################*/

.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;
}

Thanks in advance for all your support ;)

user-interface web-design

2 Contributors
4 Replies
104 Views
8 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Kraai

Dani AI

Generated 9 Months Ago

As discovered, the symptom you saw (footer sitting on top of content in IE7) is the classic case of floated content not being contained by its parent. Floats remove their height from the normal flow, so the wrapper can collapse and the footer ends up overlapping. was right to try padding/margins, but those move the footer itself — they do not make the parent wrap its floated children.

Three reliable fixes to choose from (pick one that fits your project):

Use a simple clearfix on the wrapper that contains the floated columns. Add the class to that wrapper.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  zoom: 1; /* triggers hasLayout in IE7 */
}

Insert a clearing element just before the footer (fast and simple, good for debugging):

<div style="clear: both;"></div>

Give the wrapper a containment trigger by using overflow (works well but watch for unwanted scrollbars):

.wrapper { overflow: auto; }  /* or overflow: hidden; */

Notes and cautions:

Avoid relying on fixed heights for page areas (the footer had a fixed height in the thread); letting elements size naturally avoids overlaps when content grows.
The zoom:1 line is an IE-specific way to trigger hasLayout and will not hurt modern browsers; use conditional CSS if you prefer to target only IE7.
If you must support old IE only, use the clearfix or the clear div. If you can drop IE7 support, remove hacks and use standard flow or modern layout techniques (flexbox/grid).

These approaches explain why moving the footer inside the main wrapper worked (it put the footer into the same flow), and give safer alternatives so fixes do not break other browsers.

All 4 Replies

Kraai 56 Senior Poster

15 Years Ago

See if it helps if you ad some padding value here:

#
.rodape {
#
 
#
 
#
margin-top:15px;
#
padding:0;
#
 
#
background-color:#5a6f5d;
#
 
#
width: 100%;
#
height:50px;
#
border:none;
#
 
#
}

And/or here see what happens by adding values to margin and padding:

#footer_container {
background-color:#5A6F5D;
margin:0 auto;
padding:0;
text-align:left;
width:840px;

And/or see if you can insert some padding here:

esp_rdp {
float:left;
height:20px;
width:840px;

Hope this helps.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

fantasma 0 Junior Poster in Training · Answer 1 · 2010-11-16T17:55:56+00:00

No luck mate. The footer hides the content div, and if add padding or margins, it just limits to come down in front of the content div, and, helps to mess up with other browser's perfect view....

fantasma 0 Junior Poster in Training · Answer 2 · 2010-11-16T18:49:50+00:00

Solved... Just by putting footer container inside the div container of the pages

Kraai 56 Senior Poster Featured Poster · Answer 3 · 2010-11-16T18:53:37+00:00

Kraai 56 Senior Poster

15 Years Ago

Cool, so we all learn, thanks for posting te solution.

IE 7 Problem - Footer gets over a long piece of content

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers