SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    overflow scroll bars - if thats what they're called

    if i use

    overflow: scroll;

    in a div with a specific height and width, is it possible for me to stop the horizontal bar from appearing at all and only have the vertical scroll bar.

    Sorry if this seems like a pretty basic question but i'm fairly new to css layout etc.

    all input gratefully recieved.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can do it for ie only using proprietary ie (invalid) css. But then users won't be able to see any content when its required.

    e.g.
    Code:
    overflow-x:hidden;
    However what I think may be more useful is to use overflow:auto. This will apply a scrollbar to the element only when its needed and will only apply it vertically or horizontally when required.

    This means that if height is greater then only a vertical scrollbar appears etc.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, i tried the

    overflow: auto;

    and for some reason in ie it still adds the x-scroll bar, and in mozilla somthing altogether stranger happens.

    So 2 questions here, sry.

    1. If i specify the width of the div shouldn't the text stay within the width.

    2. In mozzila when i add the overflow: auto it offsets the <div>. it's content and my background about 70px to the right!?

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I've made a complet mess of the css code here it is:[QUOTE]/* CSS Document */
    /* General body & styles */
    * {
    padding:0;
    margin:0;
    }
    body {
    text-align: center;
    margin: 0;
    padding: 0;
    background-image: url(file:////eidetic_root/img/bg_slim.gif);
    background-color: ##FBFBFB;
    background-repeat: repeat-y;
    background-position: top;
    font-family: Geneva, Arial, sans-serif;
    }
    p {
    font-family: Geneva, Arial, sans-serif;
    text-align: left;
    font-size: 10px;
    color: #666666;
    }
    p2 {
    font-family: Geneva, Arial, sans-serif;
    text-align: right;
    font-size: 10px;
    color: #666666;
    }
    h3 {
    font-family: Geneva, Arial, sans-serif;
    text-align: left;
    font-size: 10px;
    color: #B1CDDD;
    }
    /* main layout & position */
    div#wrap {
    position: relative;
    margin: 0 auto;
    width: 640px;
    }
    #header {
    text-align: left;
    margin: 0 6px 0 6px;
    padding: 0;
    width: 628px;
    height: 80px;
    }
    /* repeated code per header */
    #h1, #h1 span {
    width: 628px;
    height: 80px;
    background-image: url(file:////eidetic_root/img/header_logo01.gif);
    background-repeat: no-repeat;
    }
    /* z-axis code */
    #h1 span {
    margin-bottom: -80px;
    }
    h1 span {
    display: block;
    position: relative;
    z-index: 1;
    }
    #nav {
    text-align: right;
    margin: 0 0 0 0;
    padding: 0;
    }
    #nav ul{
    margin:0;
    padding:0;
    }
    #nav li{
    display: inline;
    list-style: none;
    margin: 0 6px 0px 15px;
    padding: 0;
    }
    #feature{
    background-image: url(file:///eidetic_root/img/feature_bkg.gif);
    background-repeat: no-repeat;
    width: 628px;
    margin: 0px 6px 0 6px;
    height: 250px;
    padding: 0;
    }
    #main {
    margin: 10px 0px 0px 8px;
    padding: 0;
    float: left;
    height: 250px;
    width: 340px;
    text-align: left;
    }
    #sidebar {
    text-align: left;
    padding: 0;
    height: 250px;
    width: 252px;
    margin: 10px 6px 0px 370px;
    overflow: auto;
    }
    #wrap > #sidebar {
    width: 255px;
    }
    #footer {
    text-align: right;
    margin: 10px;
    clear: both;
    }
    /* Navagation - buttons */
    a.nav:link {
    font-size: 10px;
    text-decoration: none;
    color: #666666;
    font-weight: bold;
    }
    a.nav:active {
    font-size: 10px;
    text-decoration: none;
    color: #666666;
    font-weight: bold;
    }
    a.nav:visited {
    font-size: 10px;
    text-decoration: none;
    color: #666666;
    font-weight: bold;
    }
    a.nav:hover {
    font-size: 10px;
    text-decoration: none;
    background-color: #666666;
    color: #FBFBFB;
    font-weight: bold;
    }


    probably a disaster!!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I need to see you html as well - or even better a link

    I'm not sure what problems you are having but this code only produces a vertical scrollbar in ie6 and moz.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #sidebar {
    text-align: left;
    padding: 0;
    height: 250px;
    width: 252px;
    margin: 10px 6px 0px 370px;
    overflow: auto;
    }
    </style>
    </head>
    <body>
    <div id="sidebar"> 
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
      <p>Hello this is some text : Hello this is some text : Hello this is some text 
    	: Hello this is some text : Hello this is some text : Hello this is some text 
    	: </p>
    </div>
    </body>
    </html>
    The display looks the same in ie6 and moz as well.

    Obviously when the scrollbar appears then there is less room for the content so the content will be shifted around to fit. How else can this work as the scroll bar isn't added to the div but placed inside it?

    A horizontal scrollbar will only appear if you have something in that div that is wider than the area allowed. If for example you have typed in some unbroken text then this will not wrap and will force a scrollbar.

    I assume these are the things that you are experiencing.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have no link it's not up but here's the code xhtml.

    Oh and yes it does create a single vert scroll bar in ie but still getting the offset prob in mozilla!!!

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Three-Column Layout Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="threecoldemo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrap">
    <div id="header">
    <h1 id="h1"><span></span>eideticmedia</h1>
    </div>
    <div id="nav">
    <ul>

    <li><a href="#" class="nav">Home</a></li>
    <li><a href="#" class="nav">About</a></li>
    <li><a href="#" class="nav">Services</a></li>
    <li><a href="#" class="nav">Contact</a></li>
    </ul>
    </div>
    <div id="feature">
    </div>

    <div id="main">
    <h3>Eidetic Web Design</h3><br>
    <p>There are many approaches to research an essential part of every business and profession and many ways to document findings.
    The library has books which will help you, and most English composition textbooks contain chapters on research techniques and style.
    It is important to follow consistently and accurately a recommended format that is clear and concise and that has been approved by your teacher.
    The formatting of citations recommended in this guide is based on Modern Language Association recommendations. If your instructor requires another format,
    you can ask that instructor how such a format will be different from the recommendations we have made and make the appropriate adjustments.</p>
    </div>
    <div id="sidebar">
    <h3>News</h3><br>
    <p>There are many approaches to research an essential part of every business and profession and many ways to document findings.
    The library has books which will help you, and most English composition textbooks contain chapters on research techniques and style.
    It is important to follow consistently and accurately a recommended format that is clear and concise and that has been approved by your teacher.
    The formatting of citations recommended in this guide is based on Modern Language Association recommendations. If your instructor requires another format,
    you can ask that instructor how such a format will be different from the recommendations we have made and make the appropriate adjustments.
    (Pay special attention to the material on "Footnotes and Endnotes" appearing in the section called "Parenthetical Documentation.")
    This guide may suffice for most students' needs for most academic purposes in Humanities disciplines, but for advanced research projects it is by no
    means a substitute for the Modern Language Association Handbook for Writers of Research Papers Sixth Edition (2003). That handbook can be purchased in most
    bookstores and copies should be available in every college and municipal library. A Guide similar to this one, but based on the APA style,
    is also available online (see link on the navigation bar). Your best source of advice on all these matters is, of course, your instructor and library professionals.
    </p>
    </div>

    <div id="footer">
    <p id="p2">&copy;2004 eidetic design</p>
    </div>
    </div>
    </body>
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try this code and see if this is what you are trying to do
    Code:
    #main {
    margin: 10px 20px 0px 8px;
    padding: 0;
    float: left;
    height: 250px;
    width: 340px;
    text-align: left;
    display:inline;/* ie fix*/
    }
    * html #main {margin-right:-3px}/* ie 3 pixel jog */
    #sidebar {
    text-align: left;
    padding: 0;
    height: 250px;
    width: 255px;
    margin: 10px 6px 0px 0px;
    overflow: auto;
    }
    Replace your styles with mine above.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh happy days, you are a life saver!!!!! Thanks a lot

    A couple of questions though......

    Obviously this

    * html #main {margin-right:-3px}/* ie 3 pixel jog */

    is self explanitory, the 3px fix.

    But it's not necessary for me to set the left margin for the #sidebar now.

    Sorry about the noob questions!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    But it's not necessary for me to set the left margin for the #sidebar now.
    No just use the right margin on the float to push stuff away.

    You have to remember that floats are basically removed from the flow therefore the margin on static content alongside a float is taken from the edge of the window and not the float itself. It seems mozilla got confused when overflow:auto was introduced and applid the margin from the float instead.

    Paul

  10. #10
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Ireland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    understood.

    Thx for all your help Paul.


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
  •