472,978 Members | 2,407 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,978 software developers and data experts.

Firefox problem with overflow

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">&nbsp;</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>

Jan 19 '06 #1
1 2951
books1999 wrote:

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.

Please provide an URL. Especially since there are images.

Which one is the "background box?"
Which are the "either container?"

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jan 19 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: paulroskilly | last post by:
Hello, Can anyone help with this, I have a div tag : <div style="overflow:scroll; overflow-x:hidden; height=315px"> In IE this renders the DIV fine, it is 315 pixels high and has a...
1
by: Marek Mänd | last post by:
I have question regarding CSS overflow atribute. <body> <table style="height:100%" id="pagetable"> <td style="vertical-align:top;"> <div...
2
by: matthewmacchia | last post by:
I believe this is a Firefox bug but I was hoping someone found a workaround. I have implemented drag and drop functionality, but if I try to drag an element from a div that happens to have a div...
1
by: Mickey | last post by:
Hi, I have a script which works in both IE but is sluggish in Firefox. The script is a simple text scroller. It works perfectly in IE however in Firefox, the text scroll slower and eventually...
2
by: Stewart | last post by:
Originally posted in comp.lang.javascript: Newsgroups: comp.lang.javascript From: "Stewart" Date: 23 Aug 2005 02:50:04 -0700 Local: Tues, Aug 23 2005 10:50 am Subject: FireFox, RemoveChild,...
18
by: matt | last post by:
hello, i am experiencing a little problem w/ regards to IE & Firefox compatibility (works as expected in firefox, doesnt in IE). i have a container-div element, which contains 1 image, and 2...
6
by: alejandro | last post by:
I just noticed that in FireFox, onmouseover and onmouseout events do not work properly when a div's overflow is set to hidden/auto/scroll. If you click and hold inside the div with onmouseover/out...
2
by: esteuart | last post by:
I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has...
4
by: sbettadpur | last post by:
hello, i have created one website using div i.e total layout is designed using div only. if i saw that pages in Internet Explorer vesion 6, its showing very fine, but if i open same pages in...
1
by: newbie009 | last post by:
How can I disable horizontal scroll in textbox for FireFox? Right now 1 textbox has vertical scroll and other textbox has horizontal scroll. It only looks like this on FireFox but it looks ugly....
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.