Back To Website Design Forum

Firefox - divs and scrollbars

  • houndour
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Nov 08, 2004
  • Posts: 201
  • Loc: Surrey, UK
  • Status: Offline

Post May 5th, 2006, 8:55 am

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 5th, 2006, 8:55 am

  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Joined: Oct 12, 2004
  • Posts: 861
  • Loc: BKNY
  • Status: Offline

Post May 5th, 2006, 12:29 pm

have you got a link so we could see what you mean?
  • houndour
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Nov 08, 2004
  • Posts: 201
  • Loc: Surrey, UK
  • Status: Offline

Post May 8th, 2006, 1:07 am

No link. I'll have to try and reproduce it with some sample code.
  • houndour
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Nov 08, 2004
  • Posts: 201
  • Loc: Surrey, UK
  • Status: Offline

Post May 8th, 2006, 1:50 am

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>
  3.         
  5. <style>
  6. body {
  7.     background: #e1b107;
  8. }
  10. body, p, td, ol, ul {
  11.     font-family: arial, helvetica;
  12.     font-size: 14px;
  13.     font-weight: bold;
  14.     color: #ffffff
  15. }
  17. #main, #left{
  18.     background: #2f2f2f;
  19. }
  21. #main {
  22.     text-align: center;
  23. }
  25. .error {
  26.     color: #e30b00;
  27.     font-size: 12px;
  28. }
  30. .curved_bg {
  31.     background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
  32. }
  35. #header_right {
  36.     background: url(images/header_bg.gif) 0 0 no-repeat;    
  37. }
  39. </style>
  41. <script>
  42. function show( x )
  43. {
  44.     document.getElementById( 'one' ).style.display = "none";
  45.     document.getElementById( 'two' ).style.display = "none";
  46.     document.getElementById( 'three' ).style.display = "none";
  48.     document.getElementById( x ).style.display = "block";
  49.     
  50. }
  51. </script>
  53. </head>
  55. <body>
  56.     
  58.     <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
  59.         <tr>
  60.             <td valign="top" width="280">
  61.                 <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  63.                     <tbody><tr>
  64.                         <td height="20">Top Image</td>
  65.                     </tr>
  66.                     <tr>
  67.                         <td id="logo" height="77">Logo</td>
  68.                     </tr>
  69.                     <tr>
  70.                         <td valign="top">Nav bar</td>
  71.                     </tr>
  72.                     <tr>
  73.                         <td height="20" bgcolor="#ff0000">Bottom Image</td>
  74.                     </tr>
  76.                 </tbody></table>
  77.             </td>
  78.             <td width="20">&nbsp;</td>
  79.             <td valign="top" width="700">
  80.                 <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  81.                     <tr>
  82.                         <td>Header - <input type="button" value="one" onclick="show( 'one' );" /><input type="button" value="two"
  84. onclick="show( 'two' );" /><input type="button" value="three" onclick="show( 'three' );" /></td>                                
  85.                     </tr>    
  86.                     <tr>
  87.                         <td colspan="2" class="curved_bg" align="center" height="100%" valign="top">
  89.                             <div id="one" style="display: block;">Div 1<br/></div>
  90.                             <div id="two" style="display: none;" >Div
  92. 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>
  93.                             <div id="three" style="display: none;" >Div
  95. 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/>
  97. 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
  99. 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
  101. /><br/></div>
  103.                         </td>
  105.                     </tr>                                                    
  106.                     <tr>
  107.                         <td colspan="2" bgcolor="#ff0000">Bottom Image</td>
  108.                     </tr>                                    
  109.                 </tbody></table>
  110.             </td>
  111.         </tr>
  112.     </tbody></table>
  115. </body>
  117. </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
  • No Avatar
  • Joined: Jul 30, 2005
  • Posts: 75
  • Loc: Bristol, UK
  • Status: Offline

Post May 8th, 2006, 3:55 am

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
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 8th, 2006, 10:33 am

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>
  3.    
  5. <style>
  6. body {
  7.   background: #e1b107;
  8. }
  10. body, p, td, ol, ul {
  11.   font-family: arial, helvetica;
  12.   font-size: 14px;
  13.   font-weight: bold;
  14.   color: #ffffff
  15. }
  17. #main, #left{
  18.   background: #2f2f2f;
  19. }
  21. #main {
  22.   text-align: center;
  23. }
  25. #one, #two, #three{
  26.     text-align:center;
  27.     color:#FFFFFF;
  28. }
  30. #bottom {
  31.     background-color:red;
  32.     color:white;
  33. }
  34. .error {
  35.   color: #e30b00;
  36.   font-size: 12px;
  37. }
  39. .curved_bg {
  40.   background: #2f2f2f url(images/main_top_bg.gif) 0 0 no-repeat;
  41. }
  44. #header_right {
  45.   background: url(images/header_bg.gif) 0 0 no-repeat; 
  46. }
  48. </style>
  49. <script>
  50. function show( x )
  51. {
  52.   document.getElementById( 'one' ).style.display = "none";
  53.   document.getElementById( 'two' ).style.display = "none";
  54.   document.getElementById( 'three' ).style.display = "none";
  56.   document.getElementById( x ).style.display = "block";
  57.  
  58. }
  59. </script>
  62. </head>
  64. <body>
  65.  
  67.   <table border="0" cellpadding="0" cellspacing="0" height="100%" width="1000">
  68.    <tr>
  69.      <td valign="top" width="280">
  70.       <table id="left" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
  72.         <tbody><tr>
  73.          <td height="20">Top Image</td>
  74.         </tr>
  75.         <tr>
  76.          <td id="logo" height="77">Logo</td>
  77.         </tr>
  78.         <tr>
  79.          <td valign="top">Nav bar</td>
  80.         </tr>
  81.         <tr>
  82.          <td height="20" bgcolor="#ff0000">Bottom Image</td>
  83.         </tr>
  85.       </tbody></table>
  86.      </td>
  87.      <td width="20">&nbsp;</td>
  88.      <td valign="top" width="700">
  89.       <div>Header - <input type="button" value="one" onClick="show( 'one' );" /><input type="button" value="two"
  91. onclick="show( 'two' );" /><input type="button" value="three" onClick="show( 'three' );" /></div>
  92. <div style="background-color:#2f2f2f;">
  93.           <div id="one" style="display: block;">Div 1</div>
  94.            <div id="two" style="display: none;" >Div
  96. 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>
  97.            <div id="three" style="display: none;" >Div
  99. 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/>
  101. 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
  103. 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
  105. /><br/></div></div>
  106. <div id="bottom">Bottom Image</div>
  107.      </td>
  108.    </tr>
  109.   </tbody></table>
  112. </body>
  114. </html>
  • houndour
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Nov 08, 2004
  • Posts: 201
  • Loc: Surrey, UK
  • Status: Offline

Post May 9th, 2006, 3:47 am

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
  • No Avatar
  • Joined: Aug 24, 2007
  • Posts: 4
  • Loc: Tamil Nadu - India
  • Status: Offline

Post August 27th, 2007, 6:57 am

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
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post August 28th, 2007, 3:23 am

Try This!

After <body> add this <div style="height:98%; position:absolute; ">PLACE YOUR HTML CODE CODE HERE</div></body>
  • dav
  • Born
  • Born
  • No Avatar
  • Joined: Oct 03, 2007
  • Posts: 1
  • Status: Offline

Post October 3rd, 2007, 1:56 am

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 163 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.