SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie7 not showing scrollbars when display: none and overflow: auto

    i've been searching the forums for an hour and i can't seem to find any posts related to my problem, so hopefully someone can help me out.

    i have an image that you can click to toggle the display of a div. the problem is that when this div is toggled to be visible (display: block) it does not get scrollbars in ie7, even though it has overflow: auto specified.

    when the page is loaded, the div starts out with display: none and i know that ie does strange things with the hasLayout trigger. if i take out the display: none, i get my scrollbars, but obviously this is not desirable.

    the actual code is very complex because it is an asp.net website and there are lots of nested controls that each generate a bit of this html. i can try to post examples if i am unclear in my description of the problem.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happens if, instead of specifying display:none in css, make it happen onload using JS?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thought about doing that, but i'd really like to avoid using javascript.

  4. #4
    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 think you may need to make a working demo as I have done a simple test here and it seems to work ok in iE7.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    .outer{
        width:200px;
        height:200px;
        background:red;
        overflow:auto;
    }
    .outer p{
        width:300px;
        height:300px;
        background:blue;
     display:none;
    }
    
    </style>
    <script type="text/javascript">
    function hideShow(thisDiv) {
        if (document.getElementById) {
            obj = document.getElementById(thisDiv);
            obj.style.display = (obj.style.display == "block" ) ? "none" : "block";
        }
    }
    </script>
    </head>
    <body>
    <div class="outer">
        <h1 onclick="hideShow('test')"><a href="#">Hide/show</a></h1>
        <p id="test">Testing</p>
    </div>
    </body>
    </html>
    Perhaps you can modify my code above to show the problem you are having.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul,

    thanks for helping me out. i extracted the source from our project to show you what is happening.

    i understand that the code is horribly ugly and non-standards and unfortunately there's not much i can do about that (it's a battle i've lost many times with my coworkers and managers). as you can see from my example, it works in firefox but not in ie7.

    to see what i mean, click the "help" button and then click the "show/hide" button. the lorem ipsum text in there is cut off and no scrollbars are shown.

    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" xml:lang="en" lang="en">
    <head id="Head">
        <!--**********************************************************************************-->
        <!-- DotNetNuke? - http://www.dotnetnuke.com                                          -->
        <!-- Copyright (c) 2002-2006                                                          -->
        <!-- by DotNetNuke Corporation   -->
        <!--**********************************************************************************-->
        <title>Test </title>
    
        <script type="text/javascript">
    function toggleRow( el ) {
      el.style.display = ( el.style.display != 'none' && el.style.display != '' ? 'none' : 'block' );
    }
        </script>
    
    </head>
    <body id="Body">
        <table style="width: 100%">
            <tr>
                <td width="50%" valign="top">
                    <fieldset>
                        <legend class="topLegend">Legend</legend>
                        <div class="fsImg">
                            <img alt="img" />
                        </div>
                        <div class="fsDataWithImg">
                            <table cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td nowrap="nowrap">
                                        <table style="vertical-align: top;">
                                            <tr>
                                                <td rowspan="4">
                                                </td>
                                                <td>
                                                    <label for="dnn_ctr465_ViewContacts_txtFindFirstName" id="dnn_ctr465_ViewContacts_lblFindFirstName">
                                                        First Name</label>
                                                </td>
                                                <td>
                                                    <input name="dnn$ctr465$ViewContacts$txtFindFirstName" type="text" id="dnn_ctr465_ViewContacts_txtFindFirstName" /></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label for="dnn_ctr465_ViewContacts_txtFindLastName" id="dnn_ctr465_ViewContacts_lblFindLastName">
                                                        Last Name</label>
                                                </td>
                                                <td>
                                                    <input name="dnn$ctr465$ViewContacts$txtFindLastName" type="text" id="dnn_ctr465_ViewContacts_txtFindLastName" /></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label for="dnn_ctr465_ViewContacts_txtFindEmail" id="dnn_ctr465_ViewContacts_lblFindEmail">
                                                        E-mail</label>
                                                </td>
                                                <td>
                                                    <input name="dnn$ctr465$ViewContacts$txtFindEmail" type="text" id="dnn_ctr465_ViewContacts_txtFindEmail" /></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label for="dnn_ctr465_ViewContacts_txtFindUsername" id="dnn_ctr465_ViewContacts_lblFindUsername">
                                                        Username</label>
                                                </td>
                                                <td>
                                                    <input name="dnn$ctr465$ViewContacts$txtFindUsername" type="text" id="dnn_ctr465_ViewContacts_txtFindUsername" /></td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td valign="top" nowrap="nowrap">
                                        <div>
                                            <a href="javascript:;" onclick="toggleRow(document.getElementById('divHelpViewerContactsFind'))">
                                                <img alt="Help" style="border: 0;" />
                                            </a>
                                        </div>
                                        <div id='divHelpViewerContactsFind' style="display: none;">
                                            <div id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_pnlHelpViewer" style="height: 300px;
                                                width: 100%; overflow: auto;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="400" style="background-color: #eee;">
                                                    <tr>
                                                        <td>
                                                            <fieldset>
                                                                <legend>Help</legend>
                                                                <table cellpadding="0" cellspacing="0">
                                                                    <tr valign="top">
                                                                        <th valign="top" nowrap="nowrap" width="20%">
                                                                            Module Name:
                                                                        </th>
                                                                        <td valign="top" width="80%">
                                                                            <span id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_lblName">Module
                                                                                Name</span>
                                                                        </td>
                                                                    </tr>
                                                                    <tr valign="top">
                                                                        <th valign="top" nowrap="nowrap">
                                                                            Module Help:
                                                                        </th>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="2">
                                                                            <hr />
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td valign="top" colspan="2">
                                                                            <div id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_pnlSectionsReadOnly">
                                                                                <fieldset>
                                                                                    <legend>
                                                                                        <img alt="show/hide" onclick="toggleRow(document.getElementById('dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0divhelpHelpItemSection0')); changeImg(document.getElementById('dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0imghelpHelpItemSection0'));"
                                                                                            id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0imghelpHelpItemSection0" />
                                                                                        <span id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0_lblSectionName">
                                                                                            Test Help</span></legend>
                                                                                    <div id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0divhelpHelpItemSection0"
                                                                                        style="display: none;">
                                                                                        <table cellpadding="0" cellspacing="0">
                                                                                            <tr valign="top">
                                                                                                <td valign="top">
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td valign="top" colspan="2">
                                                                                                    <span id="dnn_ctr465_ViewContacts_HelpViewerContactsFind_helpHelpItem_helpHelpItemSection0_lblSectionBody">
                                                                                                        <p class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                            <font size="2"><font face="Verdana">Lorem Ipsum is simply dummy text of the printing
                                                                                                                and typesetting industry. </font></font>
                                                                                                        </p>
                                                                                                        <p class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                            <font size="2"><font face="Verdana"><b style="mso-bidi-font-weight: normal"></b></font>
                                                                                                            </font>&nbsp;</p>
                                                                                                        <p class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                            <font size="2"><font face="Verdana"><b style="mso-bidi-font-weight: normal">Test Text:</b><span
                                                                                                                style="mso-spacerun: yes">&nbsp; </span>Neque porro quisquam est qui dolorem ipsum
                                                                                                                quia dolor sit amet, consectetur, adipisci velit...</font></font></p>
                                                                                                        <ul>
                                                                                                            <li>
                                                                                                                <div class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                                    <font face="Verdana" size="2">First Name</font></div>
                                                                                                            </li>
                                                                                                            <li>
                                                                                                                <div class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                                    <font face="Verdana" size="2">Last Name</font></div>
                                                                                                            </li>
                                                                                                            <li>
                                                                                                                <div class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                                    <font face="Verdana" size="2">E-mail Address</font></div>
                                                                                                            </li>
                                                                                                            <li>
                                                                                                                <div class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                                    <font face="Verdana" size="2">Username</font></div>
                                                                                                            </li>
                                                                                                        </ul>
                                                                                                        <p class="MsoNormal" style="margin: 0in 0in 0pt">
                                                                                                            <font face="Verdana" size="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                                                                                Proin dictum leo imperdiet lorem. Mauris in orci. Sed eleifend nisl vitae mauris
                                                                                                                iaculis laoreet. Aliquam pharetra. Ut eu sapien id ligula sodales dapibus. Phasellus
                                                                                                                enim odio, convallis at, fermentum vitae, pellentesque mollis, turpis. Sed massa.
                                                                                                                Ut eu massa. Cras semper, libero malesuada sagittis semper, magna felis condimentum
                                                                                                                orci, sit amet blandit erat augue vel justo. In hac habitasse platea dictumst. Sed
                                                                                                                nulla.</font> <font face="Verdana" size="2">Lorem ipsum dolor sit amet, consectetuer
                                                                                                                    adipiscing elit. Proin dictum leo imperdiet lorem. Mauris in orci. Sed eleifend
                                                                                                                    nisl vitae mauris iaculis laoreet. Aliquam pharetra. Ut eu sapien id ligula sodales
                                                                                                                    dapibus. Phasellus enim odio, convallis at, fermentum vitae, pellentesque mollis,
                                                                                                                    turpis. Sed massa. Ut eu massa. Cras semper, libero malesuada sagittis semper, magna
                                                                                                                    felis condimentum orci, sit amet blandit erat augue vel justo. In hac habitasse
                                                                                                                    platea dictumst. Sed nulla.</font> <font face="Verdana" size="2">Lorem ipsum dolor sit
                                                                                                                        amet, consectetuer adipiscing elit. Proin dictum leo imperdiet lorem. Mauris in
                                                                                                                        orci. Sed eleifend nisl vitae mauris iaculis laoreet. Aliquam pharetra. Ut eu sapien
                                                                                                                        id ligula sodales dapibus. Phasellus enim odio, convallis at, fermentum vitae, pellentesque
                                                                                                                        mollis, turpis. Sed massa. Ut eu massa. Cras semper, libero malesuada sagittis semper,
                                                                                                                        magna felis condimentum orci, sit amet blandit erat augue vel justo. In hac habitasse
                                                                                                                        platea dictumst. Sed nulla.</font></p>
                                                                                                        <p class="MsoNormal" style="margin: 0in 0in 0pt 0.5in">
                                                                                                            <font face="Verdana" size="2"></font>&nbsp;</p>
                                                                                                    </span>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </table>
                                                                                    </div>
                                                                                </fieldset>
                                                                            </div>
                                                                            <!-- Sections Here -->
                                                                            <!-- Sections Here -->
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </fieldset>
                                                            <div align="center">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <div class="imgButtonNav">
                                <a class="imgButton" href="javascript:__doPostBack('dnn$ctr465$ViewContacts$cmdFindContacts$ctl00','')">
                                    <img id="dnn_ctr465_ViewContacts_cmdFindContacts_img1" src="/images/treefrog/button_search.png"
                                        style="height: 16px; width: 16px; border-width: 0px;" /><span id="dnn_ctr465_ViewContacts_cmdFindContacts_lblText"
                                            style="margin: 0 6px;">Find</span></a> <span id="dnn_ctr465_ViewContacts_lblViewAllContacts">
                                                <span class="note">
                                                    <img class="noteImg" title="Note" src="/images/treefrog/note.png" alt="Note: " style="height: 16px;
                                                        width: 16px; border-width: 0px;" />
                                                    To view all contacts search without parameters</span></span>
                            </div>
                        </div>
                    </fieldset>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </body>
    </html>

  6. #6
    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,

    It looks like a "haslayout" issue so try adding this.

    Code:
    fieldset.test{width:100&#37;}
    Code:
    <body id="Body">
        <table style="width: 100%">
            <tr>
                <td width="50%" valign="top">
                    <fieldset class="test">
                        <legend class="topLegend">Legend</legend>

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help paul.

    that fix does indeed work on the sample code i gave, however i can't get it to work on the production site. since i can't post the html in its entirety i think i'm pretty much on my own on this one... it must be a problem with a div or table that this code is contained inside of.

  8. #8
    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)
    it must be a problem with a div or table that this code is contained inside of.
    It's likely to be a wrapper such as a fieldset that doesn't have layout (or perhaps needs a width instead). Try forcing layout on all fieldsets.

    Code:
    fieldset{width:100&#37;}
    It's just a process of elimination and you should be able to narrow the problem down.


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
  •