Border and bg issues.

[euphoriastudio]

So this is weird I know...but my problems are not in IE . In firefox my border is not showing up around my #content div. Nor is the background image showing up in that same div. More than anything i need a fresh pair of eyes to tell me where my code went wrong. Any ideas?

Here is the link to the page: http://euphoriastudio.freehostia.com...tric/home.html

and here is the css:

body {
  background-color: #404040;
  font-family: Verdana;
  font-size: 10px;
  color: #808080;
}
a, a:visited {
  color: #313bfd;
  text-decoration: none;
}
a:active {
  color: #c0c0c0;
  text-decoration: none;
}
a:hover {
  color: #c0c0c0;
}
#main {
  background: #ffffff url(header.png);
  background-repeat:no-repeat;
  width: 776px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#menu {
  border-top: 1px dotted #c0c0c0;
  border-bottom: 1px dotted #c0c0c0;
  background: #ffffff;
  float: right;
  top: 15px;
  width: 438px;
  height: 28px;
  margin-right: 7px;
  margin-bottom: 8px;
  text-align: left;
  font-family: Verdana;
  font-size: 16px;
  line-height: 28px;
  word-spacing: 15px;
  position: relative;
}
#phone {
  background: transparent;
  float: right;
  clear: both;
  top: 14px;
  width: 216px;
  height: 160px;
  margin-right: 220px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 4px;
  padding-right: 4px;
  font:bold 15px Verdana;
  color: #c0c0c0;
  position: relative;
}
hr {
  top:17px;
  border-style: none none dotted;
  border-color: #c0c0c0;
  border-width: 1px;
  color: #c0c0c0;
  margin-left: 7px;
  margin-right: 7px;
  clear: both;
  position:relative;
}
#content {
  top:5px;
  border: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  background: #ffffff url(contentbg.png);
  left: 7px;
  width: 760px;
  clear: both;
  font-size: 12px;
  font-weight: bold;
  position: relative;
}
.hleft {
  border-style: none;
  margin: 0px 3px;
  padding-top: 10px;
  background: transparent;
  float: left;
  width: 207px;
}
.hmiddle {
  border-style: none;
  margin: 0px 7px;
  padding-top: 10px;
  background: transparent;
  float: left;
  left: 216px;
  width: 323px;
}
.hright {
  border-style: none;
  margin: 0px 3px 7px;
  padding-top: 10px;
  background: transparent;
  float: right;
  width: 203px;
}
#footer {
  background: transparent;
  clear: both;
  left: 7px;
  width: 762px;
  padding-top: 10px;
  padding-bottom: 30px;
  color: #c0c0c0;
  position: relative;
}

[euphoriastudio]

lol at least i'm not the only one that cant figure this out. i thought i was going crazy or missing something in my code haha!

[wang1989sg]

Well,that's easy
In fact, the border is not showing up around you #content div, but its height is 0 in firefox.
So, the problem is that you #content div can not increase the height adaptively.
Here is the solution:
add float:left: into your #content div

#content {
  top:5px;
  border: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  background: #ffffff url(contentbg.png);
  left: 7px;
  width: 760px;
  clear: both;
  font-size: 12px;
  font-weight: bold;
  position: relative;
  float:left;
}

(I'm a Chinese, my English is no very good,I think, and my English is not esay to understand)

[euphoriastudio]

holy cow ur right! it totally worked. and thank you so much, you're English is just fine . again the help is much appreciated!

this thread can now be marked as resolved ty