Firefox - divs and scrollbars

  • houndour
  • Graduate
  • Graduate
  • houndour
  • Posts: 201
  • Loc: Surrey, UK

Post 3+ Months Ago

I have a set of divs on a page which are displayed using display: block and hidden using display: none.

In firefox a div containing lots of info expands the page and the scrollbar appears. But when a div with hardly any info is chosen the page height stays the same as if the old info was there...and the scroll bar stays.

In IE6 it shrinks the page like you would expect and the scrollbar disappears like you would expect.

Any clues as to what I need to look into here?

I wouldn't be _that_ fussed but the issue is more with the way the page has been designed, and it has a footer...so the footer once pushed off the page stays off...if you see what I mean.
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

have you got a link so we could see what you mean?
  • houndour
  • Graduate
  • Graduate
  • houndour
  • Posts: 201
  • Loc: Surrey, UK

Post 3+ Months Ago

No link. I'll have to try and reproduce it with some sample code.
  • houndour
  • Graduate
  • Graduate
  • houndour
  • Posts: 201
  • Loc: Surrey, UK

Post 3+ Months Ago

OK, excuse the crude sample....I've just knocked this up quickly to show you what I mean:

Code: [ Select ]
<html><head><title>Test</title>

        

<style>
body {
    background: #e1b107;
}

body, p, td, ol, ul {
    font-family: arial, helvetica;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff
}

#main, #left{
    background: #2f2f2f;
}

#main {
    text-align: center;
}

.error {
    color: #e30b00;
    font-size: 12px;
}

.curved_bg {
    background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
}


#header_right {
    background: url(images/header_bg.gif) 0 0 no-repeat;    
}

</style>

<script>
function show( x )
{
    document.getElementById( 'one' ).style.display = "none";
    document.getElementById( 'two' ).style.display = "none";
    document.getElementById( 'three' ).style.display = "none";

    document.getElementById( x ).style.display = "block";
    
}
</script>

</head>

<body>
    

    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
        <tr>
            <td valign="top" width="280">
                <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">

                    <tbody><tr>
                        <td height="20">Top Image</td>
                    </tr>
                    <tr>
                        <td id="logo" height="77">Logo</td>
                    </tr>
                    <tr>
                        <td valign="top">Nav bar</td>
                    </tr>
                    <tr>
                        <td height="20" bgcolor="#ff0000">Bottom Image</td>
                    </tr>

                </tbody></table>
            </td>
            <td width="20">&nbsp;</td>
            <td valign="top" width="700">
                <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
                    <tr>
                        <td>Header - <input type="button" value="one" onclick="show( 'one' );" /><input type="button" value="two"

onclick="show( 'two' );" /><input type="button" value="three" onclick="show( 'three' );" /></td>                                
                    </tr>    
                    <tr>
                        <td colspan="2" class="curved_bg" align="center" height="100%" valign="top">

                            <div id="one" style="display: block;">Div 1<br/></div>
                            <div id="two" style="display: none;" >Div

2<br/>test<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>test</div>
                            <div id="three" style="display: none;" >Div

3<br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>

test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<b

r/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br

/><br/></div>

                        </td>

                    </tr>                                                    
                    <tr>
                        <td colspan="2" bgcolor="#ff0000">Bottom Image</td>
                    </tr>                                    
                </tbody></table>
            </td>
        </tr>
    </tbody></table>


</body>

</html>
  1. <html><head><title>Test</title>
  2.         
  3. <style>
  4. body {
  5.     background: #e1b107;
  6. }
  7. body, p, td, ol, ul {
  8.     font-family: arial, helvetica;
  9.     font-size: 14px;
  10.     font-weight: bold;
  11.     color: #ffffff
  12. }
  13. #main, #left{
  14.     background: #2f2f2f;
  15. }
  16. #main {
  17.     text-align: center;
  18. }
  19. .error {
  20.     color: #e30b00;
  21.     font-size: 12px;
  22. }
  23. .curved_bg {
  24.     background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
  25. }
  26. #header_right {
  27.     background: url(images/header_bg.gif) 0 0 no-repeat;    
  28. }
  29. </style>
  30. <script>
  31. function show( x )
  32. {
  33.     document.getElementById( 'one' ).style.display = "none";
  34.     document.getElementById( 'two' ).style.display = "none";
  35.     document.getElementById( 'three' ).style.display = "none";
  36.     document.getElementById( x ).style.display = "block";
  37.     
  38. }
  39. </script>
  40. </head>
  41. <body>
  42.     
  43.     <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
  44.         <tr>
  45.             <td valign="top" width="280">
  46.                 <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  47.                     <tbody><tr>
  48.                         <td height="20">Top Image</td>
  49.                     </tr>
  50.                     <tr>
  51.                         <td id="logo" height="77">Logo</td>
  52.                     </tr>
  53.                     <tr>
  54.                         <td valign="top">Nav bar</td>
  55.                     </tr>
  56.                     <tr>
  57.                         <td height="20" bgcolor="#ff0000">Bottom Image</td>
  58.                     </tr>
  59.                 </tbody></table>
  60.             </td>
  61.             <td width="20">&nbsp;</td>
  62.             <td valign="top" width="700">
  63.                 <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  64.                     <tr>
  65.                         <td>Header - <input type="button" value="one" onclick="show( 'one' );" /><input type="button" value="two"
  66. onclick="show( 'two' );" /><input type="button" value="three" onclick="show( 'three' );" /></td>                                
  67.                     </tr>    
  68.                     <tr>
  69.                         <td colspan="2" class="curved_bg" align="center" height="100%" valign="top">
  70.                             <div id="one" style="display: block;">Div 1<br/></div>
  71.                             <div id="two" style="display: none;" >Div
  72. 2<br/>test<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>test</div>
  73.                             <div id="three" style="display: none;" >Div
  74. 3<br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>
  75. test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<b
  76. r/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br
  77. /><br/></div>
  78.                         </td>
  79.                     </tr>                                                    
  80.                     <tr>
  81.                         <td colspan="2" bgcolor="#ff0000">Bottom Image</td>
  82.                     </tr>                                    
  83.                 </tbody></table>
  84.             </td>
  85.         </tr>
  86.     </tbody></table>
  87. </body>
  88. </html>


If you try the above in IE, click on the "three" button the text should go off the page and the left hand column expands with it. Then click on button "one" and the page then resizes to fit.

If you try the same in Firefox, when you click back on "one" after clicking on "three" the page stays long with a big scrollbar...so the footer would be way off the page.

Hope that makes a little more sense?
  • gonzoka
  • Student
  • Student
  • gonzoka
  • Posts: 75
  • Loc: Bristol, UK

Post 3+ Months Ago

I've also found that when using display to hide and show divs in firefox, the page uses the largest one, and doesnt shrink back too. Would be interested in finding a solution for this!
  • Katmandu
  • Student
  • Student
  • Katmandu
  • Posts: 69
  • Loc: Spain, Mallorca

Post 3+ Months Ago

gonzoka wrote:
I've also found that when using display to hide and show divs in firefox, the page uses the largest one, and doesnt shrink back too. Would be interested in finding a solution for this!


Ok, I'm not big at Javascript, but I noticed that actually the element not shrinking back is the table cell and not the div, because the script changes the div displayed but does not change the <td>. Try changing from table design to div design.

I have tested a few options but only came up with the following code. The problem is that the resulting <div id="one"> does not expand to the bottom on default. But if you don't mind this it could be a solution for you.

Just deleted the Table the div's where in and changed them by divs

Code: [ Select ]
<html><head><title>Test</title>

   

<style>
body {
  background: #e1b107;
}

body, p, td, ol, ul {
  font-family: arial, helvetica;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff
}

#main, #left{
  background: #2f2f2f;
}

#main {
  text-align: center;
}

#one, #two, #three{
    text-align:center;
    color:#FFFFFF;
}

#bottom {
    background-color:red;
    color:white;
}
.error {
  color: #e30b00;
  font-size: 12px;
}

.curved_bg {
  background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
}


#header_right {
  background: url(images/header_bg.gif) 0 0 no-repeat; 
}

</style>
<script>
function show( x )
{
  document.getElementById( 'one' ).style.display = "none";
  document.getElementById( 'two' ).style.display = "none";
  document.getElementById( 'three' ).style.display = "none";

  document.getElementById( x ).style.display = "block";
 
}
</script>


</head>

<body>
 

  <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
   <tr>
     <td valign="top" width="280">
      <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">

        <tbody><tr>
         <td height="20">Top Image</td>
        </tr>
        <tr>
         <td id="logo" height="77">Logo</td>
        </tr>
        <tr>
         <td valign="top">Nav bar</td>
        </tr>
        <tr>
         <td height="20" bgcolor="#ff0000">Bottom Image</td>
        </tr>

      </tbody></table>
     </td>
     <td width="20">&nbsp;</td>
     <td valign="top" width="700">
      <div>Header - <input type="button" value="one" onClick="show( 'one' );" /><input type="button" value="two"

onclick="show( 'two' );" /><input type="button" value="three" onClick="show( 'three' );" /></div>
<div style="background-color:#2f2f2f;">
          <div id="one" style="display: block;">Div 1</div>
           <div id="two" style="display: none;" >Div

2<br/>test<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>test</div>
           <div id="three" style="display: none;" >Div

3<br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>

test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<b

r/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br

/><br/></div></div>
<div id="bottom">Bottom Image</div>
     </td>
   </tr>
  </tbody></table>


</body>

</html>
  1. <html><head><title>Test</title>
  2.    
  3. <style>
  4. body {
  5.   background: #e1b107;
  6. }
  7. body, p, td, ol, ul {
  8.   font-family: arial, helvetica;
  9.   font-size: 14px;
  10.   font-weight: bold;
  11.   color: #ffffff
  12. }
  13. #main, #left{
  14.   background: #2f2f2f;
  15. }
  16. #main {
  17.   text-align: center;
  18. }
  19. #one, #two, #three{
  20.     text-align:center;
  21.     color:#FFFFFF;
  22. }
  23. #bottom {
  24.     background-color:red;
  25.     color:white;
  26. }
  27. .error {
  28.   color: #e30b00;
  29.   font-size: 12px;
  30. }
  31. .curved_bg {
  32.   background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
  33. }
  34. #header_right {
  35.   background: url(images/header_bg.gif) 0 0 no-repeat; 
  36. }
  37. </style>
  38. <script>
  39. function show( x )
  40. {
  41.   document.getElementById( 'one' ).style.display = "none";
  42.   document.getElementById( 'two' ).style.display = "none";
  43.   document.getElementById( 'three' ).style.display = "none";
  44.   document.getElementById( x ).style.display = "block";
  45.  
  46. }
  47. </script>
  48. </head>
  49. <body>
  50.  
  51.   <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
  52.    <tr>
  53.      <td valign="top" width="280">
  54.       <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  55.         <tbody><tr>
  56.          <td height="20">Top Image</td>
  57.         </tr>
  58.         <tr>
  59.          <td id="logo" height="77">Logo</td>
  60.         </tr>
  61.         <tr>
  62.          <td valign="top">Nav bar</td>
  63.         </tr>
  64.         <tr>
  65.          <td height="20" bgcolor="#ff0000">Bottom Image</td>
  66.         </tr>
  67.       </tbody></table>
  68.      </td>
  69.      <td width="20">&nbsp;</td>
  70.      <td valign="top" width="700">
  71.       <div>Header - <input type="button" value="one" onClick="show( 'one' );" /><input type="button" value="two"
  72. onclick="show( 'two' );" /><input type="button" value="three" onClick="show( 'three' );" /></div>
  73. <div style="background-color:#2f2f2f;">
  74.           <div id="one" style="display: block;">Div 1</div>
  75.            <div id="two" style="display: none;" >Div
  76. 2<br/>test<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>testtest<br/><br/><br/>test</div>
  77.            <div id="three" style="display: none;" >Div
  78. 3<br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>
  79. test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<b
  80. r/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br/><br/>test<br/><br
  81. /><br/></div></div>
  82. <div id="bottom">Bottom Image</div>
  83.      </td>
  84.    </tr>
  85.   </tbody></table>
  86. </body>
  87. </html>
  • houndour
  • Graduate
  • Graduate
  • houndour
  • Posts: 201
  • Loc: Surrey, UK

Post 3+ Months Ago

That does kind of help, but I have the problem in that I need the background and the footer also. So I still can't get it working to achieve everythingI need.
  • Sakthi
  • Born
  • Born
  • Sakthi
  • Posts: 4
  • Loc: Tamil Nadu - India

Post 3+ Months Ago

Hi houndour,
I got the same problem with <td> in Firefox.
Did you find any solution for this?
Waiting for the solution...
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: India

Post 3+ Months Ago

Try This!

After <body> add this <div style="height:98%; position:absolute; ">PLACE YOUR HTML CODE CODE HERE</div></body>
  • dav
  • Born
  • Born
  • dav
  • Posts: 1

Post 3+ Months Ago

routhu wrote:
Try This!

After <body> add this <div style="height:98%; position:absolute; ">PLACE YOUR HTML CODE CODE HERE</div></body>


i just have to register to say THANKS to you!
it works! :D

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.