ie6 unnecessary horizontal scroll bar

HTML & CSS
1

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/csslayouttest/template.php

here is the 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

Not tested.

I think if you get rid of this:

html, body {
  overflow:auto;
  }

it will solve your scrollbar problem.

cheers,

gary

3

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/csslayouttest/template.php

4

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

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

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

7

Simple solution to this:

STOP CODING FOR IE6!

8

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

9

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

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

Hi,

Do this:


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

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

…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

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/csslayouttest/template.php

14

Hi,

You need this fix to make IE6 behave: :slight_smile:


[B]* html,* html body{position:relative}/* make ie6 behave with scrollbars*/[/B]
#content {/*just to create top padding without tampering with min-height:100&#37; on #inner*/
    overflow:hidden;/*contain floats*/
   [B] width:100%;/* contain floats and haslayout */[/B]
}

You should also remove the align=center from the header and use css instead.

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

15

hi Paul,

It works perfectly!

Thank you so much

Tirso