IE 6 overflow:auto problem

HTML & CSS
1

Hello. I’m new here :slight_smile:

I have a problem with overflow: auto in IE 6
My code works perfectly in the latest Opera.
My site is almost finished, but decided to rebuild the code and set all the sizes on the percentages so that the site occupied more space on higher resolutions.
Look at my template on Opera, and then on IE 6.
I don’t know what I must change in code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
body
{
   background-color: #02233c;
   font-family: Verdana, Tahoma;
   font-size: 11px;
   color: #000;
}
#wrapper
{
   margin: 0 auto;
   width: 95%;
}
#header
{
   margin: 0;
   height: 65px;
   background: #008800;
}
#site_body
{
   width: 100%;
   background-color: #f0f9ff;
   border-left: 1px solid #065fa1;
   border-right: 1px solid #065fa1;
   overflow: hidden;
}
#site_body td {vertical-align: top}
#col1
{
   width: 20%;
   background-color: #f0f9ff;
   min-height: 300px;
   padding: 10px 10px 0 10px;
}
#col2
{
   width: 60%;
   background-color: #f0f9ff;
   min-height: 300px;
}
#col3
{
   width: 20%;
   background-color: #f0f9ff;
   min-height: 300px;
   padding: 10px 10px 0 10px;
}
#content-container
{
   margin: 10px 0 10px 0;
   height: 780px;
   background-color: #fff;
   border: 1px solid #065fa1;
   padding: 10px;
}
#footer
{
   margin: 0;
   width: 100%;
   height: 32px;
   background: #008800;
}
table.menu {width: 100%; margin: 0 0 10px 0}
table.menu td.h {width: 100%}
table.menu td.h table.h {width: 100%}
table.menu td.h table.h td.l
{
   width: 7px;
   background: #043e69 url('l.png') top left no-repeat; /* 7x32px */
}
table.menu td.h table.h td.m
{
   height: 32px;
   background: #043e69 url('m.png') top left repeat-x; /* 1x32px */
   line-height: 32px;
   text-align: left;
   color: #fff;
   font-weight: bold;
}
table.menu td.h table.h td.r
{
   width: 7px;
   background: #043e69 url('r.png') top left no-repeat; /* 7x32px */
}
table.menu td.c
{
   width: 100%;
   border-left: 1px solid #065fa1;
   border-bottom: 1px solid #065fa1;
   border-right: 1px solid #065fa1;
   background-color: #fff;
   padding: 5px;
}
</style>
<body>
<div id="wrapper">
   <div id="header">Logo.</div>
   <table cellspacing="0" cellpadding="0" id="site_body">
      <tr>
         <td id="col1">
            <!-- MENU -->
            <table cellspacing="0" cellpadding="0" class="menu">
            <tr>
            <td class="h">
            <table cellspacing="0" cellpadding="0" class="h">
            <tr>
            <td class="l"></td><td class="m">Menu</td><td class="r"></td>
            </tr>
            </table>
            </td>
            </tr>
            <tr>
            <td class="c">
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            </td>
            </tr>
            </table>
            <!-- MENU -->
            <table cellspacing="0" cellpadding="0" class="menu">
            <tr>
            <td class="h">
            <table cellspacing="0" cellpadding="0" class="h">
            <tr>
            <td class="l"></td><td class="m">Menu</td><td class="r"></td>
            </tr>
            </table>
            </td>
            </tr>
            <tr>
            <td class="c">
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            </td>
            </tr>
            </table>
         </td>
         <td id="col2">
            <div id="content-container">
               Tresc
               <span style="font-size: 14px; font-weight: bold">Title of article</span><br>
               <div style="overflow: auto; word-wrap: break-word">
                  Content of article<br>
                  123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890aa
                  <br><img src="../gfx/logo.png" width="1000" alt="">
               </div>
               <br><span style="font-size: 14px; font-weight: bold">Comments</span><br><br>
               Username | Date<br>
               <div style="overflow: auto; word-wrap: break-word">
                  Cooooooooooommeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeennnnnnnnnnnntttttt.
               </div>
               Jaki&#347;_nick | Jaka&#347; data<br>
               <div style="overflow: auto">
                  Normal comment.
               </div>
               <br>
               <br>
            </div>
         </td>
         <td id="col3">
            <!-- MENU -->
            <table cellspacing="0" cellpadding="0" class="menu">
            <tr>
            <td class="h">
            <table cellspacing="0" cellpadding="0" class="h">
            <tr>
            <td class="l"></td><td class="m">Menu</td><td class="r"></td>
            </tr>
            </table>
            </td>
            </tr>
            <tr>
            <td class="c">
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            Link<br>
            </td>
            </tr>
            </table>
         </td>
      </tr>
   </table>
   <div id="footer">Footer</div>
</div>

</body>
</html>

PS. Sorry for my english, I’m from Poland, but in polish forums is difficult to get help :slight_smile:
I hope that you are more willing to help :slight_smile:

2

Hi, you use word-wrap:break-word but that is CSS3 and it’s not supported everywhere :slight_smile:
You can add some character entities in your code but I forget what they are off the top of my head, and you will need to go into the HTML to add them

3

Yes, I know. This is only for test in IE. Now I’m using wordwrap() in PHP.

4

Hi,

You could try this but it may change the way the content is distributed.


table{table-layout:fixed}
5

I tried this before, but this causes the frame cut off the right side and scrollbars are not visible.

6

The scrollbars are not visible because you set the word:wrap to break the words so there wont be any scrollbars because the words will wrap and a scrollbar won’t be needed :slight_smile:

The blue line is missing on the right in IE6 because you have 1000px wide image pushing the border into outer space. IE6 will always try to accomodate it’s content.

There’s simply no point in setting fluid widths and then placing a fixed width element of 1000pixels in it because that will make the whole thing much to big for anyone to see. remove the image and you will see it working with the code I gave you.

You may need to re-think your strategy a little. If you want fluid widths as you really need to supply fluid content so that it can scale with the page.

There are also some logic errors in your code also where you have widths of 20%,20%, and 60% but you have also added margins and padding making them too big already. You would need to put the padding on inner elements.

IE6 never adds up correctly either so it will make 50% + 50% = 101% where the pixels are an odd number so always round down a bit.

Hope that helps :slight_smile:

7

I want auto widths and I still do not know how to do it.
I Experimented with widths, margins, paddings, etc.
Users have the ability to add HTML code to articles etc., so they can send too big images - then browser should show the scrollbars.

8

That should be trapped serverside and clipped to fit the layout. You can’t let your users upload massive images that will break your layout.

However you could contain the image within an element set to overflow and with a width set.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
body {
    background-color: #02233c;
    font-family: Verdana, Tahoma;
    font-size: 11px;
    color: #000;
}
#wrapper {
    margin: 0 auto;
    width: 95%;
}
#header {
    margin: 0;
    height: 65px;
    background: #008800;
}
#site_body {
    width: 100%;
    background-color: #f0f9ff;
    border-left: 1px solid #065fa1;
    border-right: 1px solid #065fa1;
    overflow: hidden;
}
#site_body td {
    vertical-align: top
}
#col1 {
    width: 20%;
    background-color: #f0f9ff;
    min-height: 300px;
    padding: 10px 0 0;
}
#col2 {
    width: 60%;
    background-color: #f0f9ff;
    min-height: 300px;
}
#col3 {
    width: 20%;
    background-color: #f0f9ff;
    min-height: 300px;
    padding: 10px 0 0 0;
}
#content-container {
    margin: 10px;
    background-color: #fff;
    border: 1px solid #065fa1;
    padding: 10px;
}
#footer {
    margin: 0;
    width: 100%;
    height: 32px;
    background: #008800;
}
table.menu {
    width: 100%;
    margin: 0 0 10px 0
}
table.menu td.h {
    width: 100%
}
table.menu td.h table.h {
    width: 100%
}
table.menu td.h table.h td.l {
    width: 7px;
    background: #043e69 url('l.png') top left no-repeat; /* 7x32px */
}
table.menu td.h table.h td.m {
    height: 32px;
    background: #043e69 url('m.png') top left repeat-x; /* 1x32px */
    line-height: 32px;
    text-align: left;
    color: #fff;
    font-weight: bold;
}
table.menu td.h table.h td.r {
    width: 7px;
    background: #043e69 url('r.png') top left no-repeat; /* 7x32px */
}
table.menu td.c {
    width: 100%;
    border-left: 1px solid #065fa1;
    border-bottom: 1px solid #065fa1;
    border-right: 1px solid #065fa1;
    background-color: #fff;
    padding: 5px;
}
table {
    table-layout:fixed
}
</style>
<body>
<div id="wrapper">
    <div id="header">Logo.</div>
    <table cellspacing="0" cellpadding="0" id="site_body">
        <tr>
            <td id="col1"><!-- MENU -->
                <table cellspacing="0" cellpadding="0" class="menu">
                    <tr>
                        <td class="h"><table cellspacing="0" cellpadding="0" class="h">
                                <tr>
                                    <td class="l"></td>
                                    <td class="m">Menu</td>
                                    <td class="r"></td>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td class="c"> Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                        </td>
                    </tr>
                </table>
                <!-- MENU -->
                <table cellspacing="0" cellpadding="0" class="menu">
                    <tr>
                        <td class="h"><table cellspacing="0" cellpadding="0" class="h">
                                <tr>
                                    <td class="l"></td>
                                    <td class="m">Menu</td>
                                    <td class="r"></td>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td class="c"> Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                        </td>
                    </tr>
                </table></td>
            <td id="col2"><div id="content-container"> Tresc <span style="font-size: 14px; font-weight: bold">Title of article</span><br>
                    <div style="overflow: auto;overflow-y:hidden; word-wrap: break-word;width:100%;"> Content of article<br>
                        123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890aa <br>
                        <img src="../gfx/logo.png" width="1000" alt=""> </div>
                    <br>
                    <span style="font-size: 14px; font-weight: bold">Comments</span><br>
                    <br>
                    Username | Date<br>
                    <div style="overflow: auto; word-wrap: break-word"> Cooooooooooommeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeennnnnnnnnnnntttttt. </div>
                    Jaki&#347;_nick | Jaka&#347; data<br>
                    <div style="overflow: auto"> Normal comment. </div>
                    <br>
                    <br>
                </div></td>
            <td id="col3"><!-- MENU -->
                <table cellspacing="0" cellpadding="0" class="menu">
                    <tr>
                        <td class="h"><table cellspacing="0" cellpadding="0" class="h">
                                <tr>
                                    <td class="l"></td>
                                    <td class="m">Menu</td>
                                    <td class="r"></td>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td class="c"> Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                            Link<br>
                        </td>
                    </tr>
                </table></td>
        </tr>
    </table>
    <div id="footer">Footer</div>
</div>
</body>
</html>

Of course you shouldn’t be using tables for this but that’s another question :slight_smile:

9

Ok thanks Paul O’B :slight_smile: