Member Avatar for ludacruzz

I am trying to design a website but I get stucked by the css.
I have a problem with my divs, maybe I've made a mistake somewhere but my div for footer is not visible in IE7, and when I try to do other nested divs, it gives me a lot of problems.

here is my html code and the css:

<!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>

Hope to get a good help from all of you, thank you!

  • 2 Contributors
  • 2 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ludacruzz

Recommended Answers

All 2 Replies

Member Avatar for ShawnCplus

You can't have multiple -- in an HTML comment aside from the --> at the end, it's invalid. Secondly, you forgot the > on the beginning body tag.

<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>
Member Avatar for ludacruzz

That was the only problem I had? Thank you, Let me try it out!

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.