What's wrong with my css?

Giganews Newsgroups
Subject: What's wrong with my css?
Posted by:  Terry (terry.murr…@rogers.com)
Date: Sun, 12 Aug 2007

Hi everyone.

I am hoping that someone can help me out with my css.  I will post a
file showing what I am trying to achieve (called terrysdesign).

I am wondering why, unless I give a specific height for the division
"contentcontainer", my borders do not extend to go around my content.
I am also having a hard time applying padding to the divs
"contentright" and "contentleft"

Lastly, If I refresh the page it will jump in IE. This does not occur
with Firefox or Netscape.

Any help, is greatly appreciated. I am also posting a screenshot of
what I have now in IE.  It is called terrysiescreenshot.

Below is the css file as well as the html page.

body {
text-align: center;
margin-left: 0px;
margin-top: 0px;

}

#containerfx {
  width: auto;
  height: auto;

}

#container {
  position: relative;
  /*overflow; hidden;*/
  top: 0;
  left: 0;
  text-align: left;
  width: 778px;
  padding: 0;
  margin:auto;
  border: 2px solid #999999; padding: 0;

}

#header {
  position: relative; /*absolute;*/
  background-image: url(images/header-with-veg-rest.jpg);
  top:0;
  left:0;
  width: 778px;
  height: 242px;
  border:0;
  margin: 0;
  padding: 0;

}

#navcontainer {
  position: absolute;
  /*float: left;*/
  top: 217px;
  left: 0;
  width: 778px;
  height: 31px;

}

..navigations {
  float:left;
  padding-left:22px;
  text-align:center;
  font: 14px arial;

}

a.nav:link {
  color: #333333;
  text-decoration: none;

}

a.nav:visited {
  color: #333333;
  text-decoration: none;

}

a.nav:hover {
  color: #006633;
  text-decoration: none;

}

#contentcontainer {
  background-color: orange;
  position: relative;
  text-align: left;
  width: 100%;
  /* height: 400px; */
  border: 2px solid red; padding: 0;
  /*padding: 0;*/
  /*margin:auto;*/

}

#contentleft {
  background-color: blue;
  position: absolute;
  top: 5px;
  left:0px;
  margin-right: 30%;
  padding-right: 10px;
  /*margin: auto;*/
  float: left;
  width: 33%;
  /*display:inline;*/
  /*overflow:hidden;*/
  border-right: 2px dotted #999999;margin:0; padding: 0;

}

#contentright {
  background-color: green;
  top: 5px;
  position: absolute;
  margin-left: 34%;
  /*padding-left:3px;*/
  width: 66%;
  /*display:inline;*/

}

#gap {
  position: relative;
  width: 778px;
  height:2px;
  padding:0;
  margin:0;

}

Below is the html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>headertasty</title>
<META HTTP-EQUIP="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="STYLESHEET" href="styles1.css" type="text/css">
</head>
<body>
  <div id="containerfx">
  <div id="container">
      <div id="header"></div>
      <div id="navcontainer">
            <div class="navigations"><a class="nav" href="">about us</
a></
div>
            <div class="navigations"><a class="nav"
href="">reservations</
a></div>
            <div class="navigations"><a class="nav" href="">drink</
a></div>
            <div class="navigations"><a class="nav" href="">our food</
a></
div>
            <div class="navigations"><a class="nav" href="">contacts</
a></
div>
      </div>

      <div id="contentcontainer">
        <div id="contentleft">
            Well let's see if this works. I am certainly hoping that
it will.  But you never
            know.  Sometimes these things are temperamental.Well
let's
see if this works. I am certainly hping        that it will. But you
never know.  Sometimes these things are temperamental.<br>
            So it remains to be seen what is going to happen.
        </div>
          <div id="contentright">
            Well let's see if this works. I am certainly hoping that
it will.  But you never
            know.  Sometimes these things are temperamental.<br>
            So it remains to be seen what is going to happen.
        </div>
      </div>
  </div>
  </div>
</body>
</html>

Replies