#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    126
    Rep Power
    18

    Question Overflow problem in firefox


    hi
    the following img will help u understand the layout of my page.


    my page content is in <td id="cont">
    my links are in <div id="scroll">
    i have got several links in that div and i made the div scrollable with the following code.

    Code:
    <table id="tab"><tr>
    
    	<td id="iframe">
    		<div id="scroll">
    			<ul>
    			%%links%%
    			</ul>
    		</div>
    	</td>
    	
    	<td id="cont">%%content%%</td>
    	
    </tr></table>
    Code:
    #tab{width: 100%;}
    
    #iframe{width: 25%;
    vertical-align: top;
    padding-top: 3em;
    }
    
    /* only for ie  */
    * html #scroll{overflow: auto;  
    width: auto;
    height: 100%; 
    text-align: left;
    }
    
    /* only for firefox */
    #scroll{overflow:auto;
    width: auto;
    height: auto;
    text-align: left;
    }
    
    #cont{width: 75%;
    height: 100%;
    vertical-align: top;
    text-align: center;
    padding: 2em; 
    }
    my links <div> is scrollable in ie but not in firefox. in firefox i see all the links with no scrollbar. i know i would get a scrollbar in firefox if i say height:400px; instead of height: auto;

    but that's the problem. i want the height of <div id="scroll"> to depend on <td id="cont">. that means the height of the scrollable links should depend upon the height of the content.

    thank you
    Attached Images
  2. #2
  3. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    I don't follow. Do you want a scrollbar or not?
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    126
    Rep Power
    18
    yes. i want a scrollbar. i want a scrollbar in <div id="scroll">. i get a perfect scrollbar in ie. but not in firefox.

    the way ie renders it is such that the height of <div id="scroll"> adjusts according to the height of <td id="cont">.

    see, sometimes the height of <td id="cont"> will be more. sometimes it may be less. it depends on the amount of content in the <td id="cont">. this content is generated by php code from the database. so there is no way i can specify the actual height.

    the line -- height: 100%; -- works in ie but not in firefox. so i had tried -- height: auto; -- for the firefox code. but that doesn't work. i get no scrollbar in firefox. instead i see all the links in the <div id="scroll">.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    126
    Rep Power
    18
    anybody??
    does anybody have any suggestions ??
  8. #5
  9. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    i want the height of <div id="scroll"> to depend on <td id="cont">. that means the height of the scrollable links should depend upon the height of the content.
    [...]
    the line -- height: 100%; -- works in ie but not in firefox. so i had tried -- height: auto; -- for the firefox code. but that doesn't work. i get no scrollbar in firefox. instead i see all the links in the <div id="scroll">.
    You do realize that if the links fit the available space there is no need to display the scroll bar; that, coupled with "overflow: auto" and they definitely won't use a scrollbar if they naturally fit.

    Use "overflow: scroll;" if you absolutely want one there, but it won't necessarily scroll.

    There are also "overflow-x" and "overflow-y" properties, but they're not fully supported.

    You should also consider laying out your design without tables. It's old school and not even remotely as powerful as CSS.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    126
    Rep Power
    18
    thank you for replying. i will try out your suggestions.
    You should also consider laying out your design without tables. It's old school and not even remotely as powerful as CSS.
    i wanted to remove the table for a long time and replace it with either span or div instead. but i am always afraid, i might create a new mess.

    again, thank you for the reply.
  12. #7
  13. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Don't be afraid. Build a side project to work on. Read tutorials about the box model and get something working. There's no reason for you to test on a production Web site. This is essential knowledge for any Web developer. Don't get stuck in the 90s.

    Here's a tutorial to get you started: http://css-tricks.com/the-css-box-model/
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids

IMN logo majestic logo threadwatch logo seochat tools logo