SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    England
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling an overflow

    I have a div that contains a javascript based menu. I set the overflow to auto and in IE this did what I hoped it would, it created a vertical scroll bar when the menu was expanded (its one of those folder/icon menus). However in Firefox, instead of doing this the menu just expands, thats not so bad, the problem is the menu also expands horizontally; which I really do not want.

    So I set the overflow to scoll after reading http://www.w3schools.com/css/pr_pos_overflow.asp but this dosen't help really because now it creates horizontal scroll bars in the div which I also do not want.

    Is there a way to force vertical scroll bars if needed, but nothing else?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,278
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    However in Firefox, instead of doing this the menu just expands,
    Sounds odd - The overflow should cut in I would have thought - have you got some code.

    Is there a way to force vertical scroll bars if needed, but nothing else?
    You could force vertical scrollbars with -moz-scrollbars-vertical (which will soon be valid I'm led to believe) but that probably won't sort the issue if content is inaccessible horizontally.

    -moz-scrollbars-horizontal: Indicates that horizontal scrollbars should appear.
    -moz-scrollbars-vertical: Indicates that vertical scrollbars should appear.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    England
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is going to be messy because it is generated externally. The thing is that there is no horizontal content, it is only whitespace; if that. Its just an expanding menu that goes down which for some unknown reason Firefox wants to expand horizontally for as well. It even expands when compression the menu, any interaction makes the div grow.

    I will try that moz command, maybe setting overflow:auto and the -moz-scrollbars-vertical will make it work for both IE and firefox. Also going to try and simplyfy the code to try and get an example up of the actual problem.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    England
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, after spending about 2 hours going through the code I found the problem. You can actually see what I had here, compare it in firefox/ie. Anyway, I have no idea why I was using a table for the outer container, and changing that to a div with a fixed width made it work in firefox. No reason for it to not work as a table, but for some reason it didn't!

    HTML Code:
    <style text="text/css">
    .section {
    	border: 1px solid #CCCCCC;
    	padding-left: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-top: 5px;
    	background: #BFCFFF;
    	width: 100%;
    }
    
    .part {
    	WIDTH:100%;
    	OVERFLOW: auto;
    }
    </style>
    
    <div id=b onclick="document.getElementById('links').innerHTML+='Some Text<br /><br />and more<br />'">Click here to test</div><br />
    
    <table style="margin-left: 10px;" width="720" border="0" cellspacing="0" cellpadding="0"><tr><td>
    
    <div class="section" id="nav">
    <div class="part" style="font-size:13px; height:250; text-align:left;" id="links">
    
    
    </div>
    </div>
    
    </td></tr></table>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •