Border and bg issues.

[euphoriastudio]

So this is weird I know...but my problems are not in IE :p. 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/Airport%20Electric/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 :)