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
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ludacruzz

Dani AI

Generated

correctly identified the root cause: malformed markup (an opening body tag missing its closing > and invalid HTML comments containing extra --) can break rendering in some browsers. Browsers such as Firefox and Opera will often tolerate those errors, while certain IE versions will stop parsing the DOM or treat later elements differently, which can make a footer disappear. Validation and the official comment rules are useful references: the W3C Markup Validator (https://validator.w3.org/) and MDN’s note on HTML comments ().

After fixing basic markup, float/containment issues are a common secondary cause. Floated left/right columns can leave parent containers collapsed or clip following elements when overflow is used. A quick debugging method is to give the footer a temporary background and a minimum height and to force it below floated elements. Example CSS that both makes the footer visible during debugging and ensures it clears floats:

#footer {
  clear: both;
  min-height: 1.5em;
  background: #eee; /* temporary visual aid */
}

/* simple clearfix for the parent container */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Additional cleanup items observed in the original post: remove invalid properties such as align:center (use margin: 0 auto; with a set width for horizontal centering) and avoid table-specific properties like border-collapse on non-table elements. For modern work, a simple HTML5 doctype is recommended to reduce quirks; for legacy IE debugging, use source inspection and a validator first since most layout problems trace back to malformed HTML. In this thread, confirmed that fixing the markup resolved the issue.

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.