...

View Full Version : Divs not shown in IE7 but very well in the rest of browsers



ludacruzz
06-03-2009, 05:14 PM
I have a problem with my nested divs, I am creating a website but I can't see my footer in IE, what could be the problem? here is my code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Igihe|Kinyarwanda</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

/*-------------------------------------my page--------------------------------*/
#bodypos{ position:relative; overflow: hidden; max-width: 1000px; align:center; border-collapse:collapse;}

/*--------------------------------------my header--------------------------------*/
#header{
width: 1000px;
height: 229px;
background-color:#CCCCCC;
border : 2px groove #0033FF;
margin: 0px 0px 10px;
}
#logoposition{
height:119px;
width:170px;
background-image: url(images/Logo.gif);
float:left;
}
#banposition{
height:120px;
width:660px;
background-image:url(images/banner.png);
margin-left: 171px
}
#headpub{
height:80px;
width:990px;
background-color: black;
margin-left: 5px;
}
#menu{
height:30px;
width:1000px;
background-image:url(images/homemenu2.gif);
}
/*---------------------------------my body----------------------------*/
#contbd{
position: relative; overflow:hidden;
}
/*-------left column.............*/
#leftcol{
width: 170px;
height: auto;
background-color:#CCCCCC;
float:left;
border: 1px groove #999999;
overflow:visible;
}
/*-----center and right column------------*/
#rightngb{
float: left; margin-left: 15px; max-width: 900px; border: 1px solid #CCCCCC; overflow:hidden;
}
/*------center---------*/
#centcont{
width: 400px;
height: 700px;
background-color:#CCCCCC;
float:left;
border: 1px groove #999999;
}
.centcontpad{
margin-left: 10px
}
#headnews{ width: 300px; height: 30px; color:#003366; text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bolder; margin-left: 20px; padding: 5px}
#newscont{ width: 400px; height: 300px; border:groove 1px #CCCCCC; background-color:#FFFFFF;}
.newsp{ font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/*--------right column-------*/

#rgtcol{
width: 390px;
height: 700px;
background-color:#CCCCCC;
border: 1px groove #999999;
float: right;
}
</style>
</head>
<body
<!--body positioning------>
<div id="bodypos">
<!-- header-->
<div id="header">
<div id="logoposition">
</div>
<div id="banposition">
</div>
<div id="headpub">
</div>
<div id="menu">
</div>
</div>
<!--header ends here--->
<!--body content-->
<div id="contbd">
<!--left column-->
<div id="leftcol">
</div>
<!--left column ends here-->
<!--center and right column-->
<div id="rightngb">
<div id="centcont">
<div id="headnews">Amakuru yo mu Rwanda no hanze</div>
</div>
<div id="rgtcol"></div>
</div>
<!--center and right column end here-->
<!--footer-->
<div id="footer"></div>
</div>
<!--body content ends here-->
</div>
<!--body positioning ends here-->
</body>
</html>

Thanks!

Rowsdower!
06-03-2009, 05:29 PM
Hello and welcome!

I'm confused. There is nothing in your footer for content and no style for the footer that would give any height, coloration, or background image to the otherwise empty <div> element. What is it that you ARE seeing in other browsers? It seems like the footer shouldn't appear anywhere to begin with.

Do you have a link to a live test page for this?

P.S. Please edit your original post to wrap
tags around your code block -- it makes things much easier to read.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum