ie6 unnecessary horizontal scroll bar

**tirso** · Apr 4, 2010 22:30

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>

**gary.turner** · Apr 4, 2010 23:45

Not tested.

I think if you get rid of this:

Code:

html, body {
  overflow:auto;
  }

it will solve your scrollbar problem.

cheers,

gary

**tirso** · Apr 5, 2010 04:59

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

**xhtmlcoder** · Apr 5, 2010 05:21

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.

**tirso** · Apr 5, 2010 07:42

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

**gary.turner** · Apr 5, 2010 09:17

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

**Mick Eden** · Apr 5, 2010 10:47

Simple solution to this:

STOP CODING FOR IE6!

**gary.turner** · Apr 5, 2010 13:03

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% 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

**Mick Eden** · Apr 5, 2010 13:07

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

**tirso** · Apr 5, 2010 23:30

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

**Paul O'B** · Apr 6, 2010 02:14

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.

**Stomme poes** · Apr 6, 2010 05:35

...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.

**tirso** · Apr 6, 2010 19:03

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

**Paul O'B** · Apr 7, 2010 12:09

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}

**tirso** · Apr 7, 2010 21:36

hi Paul,

It works perfectly!

Thank you so much

Tirso

User Tag List

Thread: ie6 unnecessary horizontal scroll bar

Thread Tools

Display

ie6 unnecessary horizontal scroll bar

Bookmarks

Bookmarks

Posting Permissions