SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie6 unnecessary horizontal scroll bar

    hi to all

    In ie6 horizontal scroll bar always exists but not in firefox. I tried to add "height:100%" in (html,body) below but the problem is the vertical scroll bar became double. Once you resize your browser and scroll to the right you will notice this vertical scroll bar.

    Please help.

    Thanks in advance

    here is the link
    http://webberzsoft.com/clients/cssla...t/template.php

    here is the code

    Code:
    <style type="text/css">
    
    * {margin:0;padding:0;}
    
    html,body { overflow: auto;}
    body {
        font-size:100%;
        background:#777;
    }
    #wrapper{
        min-height:100%;
        width: 1240px;
        margin:0 auto;
        background: #FFFFFF;
        border-left:1px solid #000;
        border-right:1px solid #000;
    }
    #header {
        background:#77F;
        border-bottom:1px solid #000;
    	height: 70px;
    }
    #content{
        overflow:hidden;/*contain floats*/
    }  
        #left-index {
            float:left;
            width:220px;
        }
        #right-index {
            float:right;
            width:180px;
        }
        #middle-index {
            float:left;
            width:840px;
            overflow:hidden;/*contain floats*/
        }  
    </style>
    
    <body>
    <div id="wrapper">
        <div id="header">
            <h1 align="center">Header</h1>
        </div>
        <div id="content">
            <div id="left-index">
                <h3>Left</h3>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
            </div>
            <div id="middle-index">
                <h3>Middle</h3>
                <p>Lorem ipsum sed pede non adipiscing nulla lacinia ipsum quis ac Integer. Ut consectetuer Cras fringilla 
                Ut non gravida morbi Maecenas semper vel. Vestibulum quis In Nulla Vivamus Sed feugiat Quisque et 
                ipsum tincidunt. Semper vitae cursus metus risus enim gravida tellus id dignissim nec. Justo laoreet 
                dui commodo Integer malesuada vel quis vel consequat metus. Nec id dolor Aliquam Nullam gravida 
                libero montes nunc ante Nulla. Tortor id.</p>
                <p>Lorem ipsum sed pede non adipiscing nulla lacinia ipsum quis ac Integer. Ut consectetuer Cras fringilla 
                Ut non gravida morbi Maecenas semper vel. Vestibulum quis In Nulla Vivamus Sed feugiat Quisque et 
                ipsum tincidunt. Semper vitae cursus metus risus enim gravida tellus id dignissim nec. Justo laoreet 
                dui commodo Integer malesuada vel quis vel consequat metus. Nec id dolor Aliquam Nullam gravida 
                libero montes nunc ante Nulla. Tortor id.</p>             
                <p class="lgmarg">testing text for scrolling</p>  
                <p class="lgmarg">testing text for scrolling</p>
                <p class="lgmarg">testing text for scrolling</p>
                <p class="lgmarg">testing text for scrolling</p>  
                <p class="lgmarg">testing text for scrolling</p>
                <p class="lgmarg">testing text for scrolling</p>  
                <p class="lgmarg">testing text for scrolling</p>
                <p class="lgmarg">testing text for scrolling</p>
                <p class="lgmarg">testing text for scrolling</p>  
                <p class="lgmarg">testing text for scrolling</p>        
            </div>      
            <div id="right-index">
                <h3>Right</h3>
                <p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida 
                rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus 
                eget urna wisi id Suspendisse ullamcorper.</p>
                <p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio 
                sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>            
            </div>                     
        </div><!--end content-->
    </div> 
    </body>

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not tested.

    I think if you get rid of this:
    Code:
    html, body {
      overflow:auto;
      }
    it will solve your scrollbar problem.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi gary,

    thanks for your immediate replied. I did your suggestion but unnecessary vertical scroll bar exists even the content is limited only.

    Please have a look at this link

    http://webberzsoft.com/clients/cssla...t/template.php

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you don't mean 'horizontal scrollbar' rather than 'vertical' and that most likely will be down to the wrapper width as I didn't see any unnecessary 'vertical' bar.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi xhtmlcoder,

    I mean unnecessary vertical scroll bar is like a hidden vertical scroll bar. I used ie6 and the link that I was provided, there was.

    Thanks

    Tirso

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no scrollbar. IE preserves the space for a vertical scrollbar even when not needed. You will find that IE has that dummy scrollbar one any page that does not otherwise need one.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple solution to this:

    STOP CODING FOR IE6!

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mick,

    That's not really a solution, is it? The issue is not about coding for IE6, it is about understanding how the various vendors' products act.

    As for not supporting IE6, shall we drop IE7 also? The same root cause of most IE6 woes is extant in IE7. If we fix something in one, we often automagically fix it in the other.

    As for numbers, don't confuse market share with visitors. Just 1&#37; of the US users is still 22.7M people. (227,719,000 total users as of 8/09 per Nielsen Online) What's your marketing demographic? Businesses that still run IE6 because of an inventory of internal web-apps that depend on it. What about Joe Sixpack and Helen Housewife who are running XP, and haven't upgraded because of whatever. They're happy with their browsing, email, and word processor. Seniors are the fastest growing segment of the web market. How many of them are using computers handed down from their children, and still running the original software?

    The IE6 bugs and their fixes or work-arounds are well known. There is no good reason to deliver a broken page to IE6. It need not have all the bells and whistles available to more modern browsers, but a professional knowledge of its limitations will allow you to code for a graceful degradation without extraordinary effort.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not wanting to get into a long winded discussion about this as nobody will ever agree but the sooner people stop catering for a defunct browser then people will be forced to upgrade to a standards compliant(ish) browser

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi gary,

    how to remove the space for a vertical scrollbar in ie6, it is not possible? If i put html,body { overflow: auto;height:100%} it was removed. But the problem like what was I mentioned on my first post is unnecessary horizontal scroll bar always exists.

    Any solution for this.

    Thanks a lot gary

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

    Do this:

    Code:
    html,body{height:100&#37;}
    html{overflow:auto}
    #wrapper {
        min-height:100%;
        width: 1240px;
        margin:0 auto;
        background: #FFFFFF;
        border-left:1px solid #000;
        border-right:1px solid #000;
    }
    * html #wrapper{height:100%}

    If you apply overflow:auto to html and body you get the 2 scrollbars in IE6 so just apply it to html and only one will appear when needed.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ...What about Joe Sixpack and Helen Housewife who are running XP...
    I've always wondered what Joe's wife was called.

    I still write for functionality in IE6. My bank (rabobank) still uses it, and they're not going to upgrade to another browser until someone purchases the banking software that works on a better browser (the browser also works with some goofy Java program where they fill in all the client information). Sorry, that's no free upgrade, that's a lot of money... and having more and more sites unusable (rather than simply ugly) in IE6 isn't going to make them switch any faster, because it's dependent on budget and technology.

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Paul,

    Thank you so much for your solution. Using your code, double vertical scroll bar already solve, it became 1. but the problem is unnecessary horizontal scroll bar still there. Please have a look at the link below


    http://webberzsoft.com/clients/cssla...t/template.php

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

    You need this fix to make IE6 behave:

    Code:
    * html,* html body{position:relative}/* make ie6 behave with scrollbars*/
    #content {/*just to create top padding without tampering with min-height:100&#37; on #inner*/
        overflow:hidden;/*contain floats*/
        width:100%;/* contain floats and haslayout */
    }
    You should also remove the align=center from the header and use css instead.

    e.g.
    h1{text-align:center}

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Paul,

    It works perfectly!

    Thank you so much

    Tirso


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
  •