Hi there,
I have a problem with this css/div and i cannot work it out. I would
like either container to be able to push the background box to grow but
in Firefox it overflows. Can someone find a solution to the problem
contained in the code.
<!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=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<title>PAge Title</title>
<meta content="Keywords" name="keywords" />
<meta content="description" name="description" />
<meta content="My Name" name="author" />
<!--
-->
<style type="text/css" media="screen,projection">
/* CSS Document */
body {
background: #eee url("../images/bg_body.jpg") center bottom repeat-x;
margin: 0px 0 10px;
}
#mainH1 {
display: block;
margin: 0 auto;
width: 760px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #636263;
}
..h1_1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
}
..h1_2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
display: inline;
margin-left: 285px;
text-align: right;
margin-right: 0px;
}
#container {
background: #fff url(../images/bg_raster.gif) no-repeat left bottom;
display: block;
margin: 0 auto;
width: 760px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
min-height: 75em; height:75em;
clear: both;
}
#mainContentContainer {
clear: both;
padding-left:17px;
padding-right:17px;
}
#int {
width: 235px;
float: left;
padding: 2px;
margin-bottom: 15px;
margin-right: 331px;
margin-top: 5px;
}
#int img {
display: inline;
vertical-align: text-bottom;
padding-right: 5px;
}
..selectLanguage {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
..languageLabel {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: middle;
}
#phone {
float: right;
width: 154px;
margin-bottom: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #000000;
font-size: 10px;
text-align: right;
margin-top: 5px;
}
#logo {
width:215px;
float: left;
margin-bottom: 5px;
height: 33px;
}
#content_main {
width: 482px;
margin-right: 10px;
margin-bottom: 15px; height:33;
float: left;
}
..content_main_text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8C8C8C;
font-weight: normal;
margin-top: 5px;
}
..content_main_text a {color: #136798; text-decoration: none;}
..content_main_text a:visited {color: #136798; text-decoration: none;}
..content_main_text a:hover {color: #3398C3;text-decoration: underline;}
..content_main_text a:active {color: #FFFFFF;background-color:#136798}
..h1_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #EB9625;
font-size: 19px;
font-weight: bolder;
display: inline;
line-height: 20px;
}
..h2_content {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #136798;
font-size: 18px;
font-weight: bolder;
display: inline;
line-height: 20px;
}
#topNav {
float: right;
width: 360px;
z-index:2000;
margin-bottom: 4px;
margin-top: 22px;
padding: 0px;
}
#navcontainer {
float: left;
clear:left;
white-space: nowrap;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
clear: left;
width: 215px;
}
#navcontainer a {
display: block;
color: #FFF;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover {
background-color: #EBEEEE;
color: #000000;
}
#navcontainer li a {
display: block;
color: #000000;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer li li a
{
display: block;
color: #000000;
background-color: #DFE3E3;
text-decoration: none;
border-bottom: 1px solid #BCBCBC;
font-weight: bold;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin-top: 0px;
margin-bottom: 0px;
}
#flashbar {
float: left;
height: 144px;
width: 510px;
margin-bottom: 10px;
padding: 0px;
z-index: 2;
}
#left_side_resource {
float: right;
border-left: 1px solid #ccc;
font-size: 14px;
width: 55px;
width: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#quickdemo {
float: left;
height: 108px;
width: 234px;
margin-bottom: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #3398BE;
}
..imgQuickDemo {
display: inline;
padding: 3px;
vertical-align: middle;
float: left;
}
..imgQuickDemo2 {
vertical-align: middle;
}
..h2_productEvaluation {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #136798;
font-size: 18px;
font-weight: bolder;
display: block;
line-height: 20px;
margin-bottom: 5px;
}
h3{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display: inline;
margin-bottom: 0px;
}
..hooverSolutions {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size:12px;
font-weight:bolder;
margin-top: 8px;
display: block;
white-space: nowrap;
clear: left;
width: 10%;
}
a.hooverSolutions:link {color: #136798;text-decoration: none;}
a.hooverSolutions:visited {color: #136798;text-decoration: none;}
a.hooverSolutions:hover {color: #3398C3;text-decoration: underline;}
a.hooverSolutions:active {color: #FFFFFF;background-color:#136798}
#developer_solutions {
float: left;
width: 232px;
margin-bottom: 0px;
margin-right:12px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #999999;
padding-right: 2px;
}
#isp_solutions {
float: left;
width: 232px;
margin-bottom: 15px;
margin-right:12px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #999999;
padding-right: 2px;
}
#merchant_solutions {
float: left;
width: 232px;
margin-bottom: 15px;
margin-right:0px;
}
..solutions_paragraphs {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
font-weight: normal;
margin-top: 5px;
display: block;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainproduct { display: block;
}
#bottomContent {
width: 726px;
padding-top: 5px;
border-top-style: solid;
border-top-color: #999999;
border-top-width: 1px;
float: left;
height: 130px;
}
#affiliations {
width: 726px;
padding-top: 5px;
border-top-style: solid;
border-top-color: #999999;
border-top-width: 1px;
float: left;
font-weight: bold;
margin-bottom: 10px;
vertical-align: middle;
}
#affiliations p {
color:#136798;
font-size: 12px;
margin-bottom:0
}
#affiliations img {
display: inline;
padding: 3px;
vertical-align: middle;
}
#news {
float: left;
width: 232px;
margin-bottom: 15px;
margin-right:12px;
padding-right: 2px;
}
#topFeatures {
float: left;
width: 232px;
margin-bottom: 15px;
margin-right:12px;
padding-right: 2px;
}
#resources {
float: left;
width: 232px;
margin-bottom: 15px;
margin-right:0px;
}
#footer {
width: 760px;
padding-top: 5px;
margin-right: auto;
margin-left: auto;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
margin-top: 10px;
}
#divider {
width: 100%;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
display: block;
margin-bottom: 10px;
}
#maincontent_holder {
width: 555px;
float: left;
}
..imgClass {width:100%}
a:link {color:#666666;text-decoration: none;}
a:visited {color: #666666;text-decoration: underline;}
a:hover {color:#999999;text-decoration: none;}
a:active {color: #999999}
</style>
<style type="text/css" media="handheld">
<!--
@import url("lib/handheld.css");
-->
</style>
</head>
<body>
<div id="mainH1">
<h1 class="h1_1">H1 content </h1>
<h2 class="h1_2">H2 content </h2>
</div>
<div id="container">
<div id="mainContentContainer">
<div id="int">International Sites <a href="/sp/"></a></div>
<div id="phone">Contact phone number </div>
<div id="logo">
<a href="/">Company logo </a>
</div>
<!-- Start Navigation Menu -->
<div id="topNav">
Foldable Menu
</div>
<div id="divider"><img src="images/divider_solid.gif" width="31"
height="1" class="imgClass" /></div>
<div id="maincontent_holder">
<h1 class="h1_content">Firefox Problem with Div </h1>
<p class="content_main_text">This is the area that usualy overflows the
main container.</p>
<p class="content_main_text"> </p>
<p class="content_main_text">This can grow very long </p>
</div>
<div id="left_side_resource">
<p>Either container should be able to push the box to grow</p>
</div>
</div>
</div>
<div id="footer" class="clearfix"><a href="/">Home </a>| News Archive
| About Us | Newsletter | Site Map <br />
Footer area All rights reserved </div>
</body>
</html>
