Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Scrolling Div tag bug

    I'm having some trouble with this code. For whatever reason, I only get the error on my machine. I've tried it on two other co-worker's pc, and it runs fine. It worked fine a few months back when I first developed the app in which it resides, but today when I went in to fix an unrelated bug, I got this error. Here's the code condensed to emphasize the error:
    Code:
    <table border="2">
       <tr><td>header</tr>
       <tr><td>
         <div style="width:50px;
                     height:100px; 
                     overflow:auto;"> 
         <table align="center">
          <tr><td> <input type="checkbox" checked /></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
                <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
          <tr><td> <input type="checkbox"/></tr>
    
       </table><!-- end table CodeContent -->
     </div>
    </table>
    I've got a scrollable list within a table nested in a div tag. When the page runs, all is fine until I run the mouse beneath the div tag and 'phantom' check boxes appear when I hover over the empty space:



    Only one check box is selected in the code, so that's actually the same check boxes on the page twice. As soon as I resize the window or minimize/maximize/restore, I get this:


    But there's more. After I refresh, it works fine.

    I can fix it by changing the div overflow to "scroll" or by removing the align="center" in the nested table.

    First, what exactly am I doing wrong with these properties?
    Second, why would this only happen on my machine?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,784
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    #1: What browser are we talking about? I've looked at it in Camino (Gecko rendering engine ≈ Fx) and it's working fine.

    #2: Your code is wrong. And not just slightly.

    #2.1: You didn't close the table cells after the inputs:
    Code:
    <tr><td> <input type="checkbox"/></td></tr>
    #2.2: You didn't close the cell and row of your outer table:
    Code:
       </table><!-- end table CodeContent -->
     </div>
    </td>
    </tr>
    </table>
    #3: Why are you actually using a table at all? Totally redundant.
    Code:
    <div style="border: 1px solid red; width: 55px;">
      <h1 style="font-size: 1em;">Title</h1>
      <div style="width:50px; height:100px; overflow:auto; text-align: center; border: 1px dotted green;">
        <input type="checkbox" checked />
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
        <input type="checkbox"/>
      </div>
    </div>
    Edit: Oh by the way: If you're using XHTML then the checked attribute must have a value; in this case it must read checked="checked".
    Also the closing slash in self-closing elements must have a white space before: <input_/>
    Last edited by VIPStephan; 01-25-2007 at 07:22 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, using IE6.

    I've always saved time by not using the optional </td> tags and the </tr> tag got lost in the copy from the app.

    I use a table since, in the app, this div has three columns with wrapping text and alternating colors for the rows. I've always just done that sort of thing with tables.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,784
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Well then... maybe the reason it doesn't work is a missing doctype? That is often the reason for IE behaving differently.
    But someone with IE 6 might be able to help you if you post the full code (meaning the header info too), not just that snippet?

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I get the error when the above code is the only thing in the html file. I'm assuming it's some patch or virus problem.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by SumDood View Post
    I've always saved time by not using the optional </td> tags…
    It’s not “optional” to leave an element open in XHTML. Even elements that don’t have end tags in HTML must be self‐closed in XHTML. I infer that you’re using XHTML because you’re using XML self‐closing syntax on the input element tags (that slash at the end). As pointed out by VIPStephan, attribute minimization is also not permitted in XHTML. checked must be written in its full form.

    Quote Originally Posted by VIPStephan View Post
    If you're using XHTML then the checked attribute must have a value; in this case it must read checked="checked".
    Just for interest, the minimized form of the attribute checked="checked" refers to the value, not the attribute name. So in checked, the attribute name is omitted, not the attribute value. The fourth paragraph in “The Form” section of this page describes this. You may want to take the corresponding Validation Quiz before you read that though since the former document provides all of the answers to it.

    Quote Originally Posted by VIPStephan View Post
    Also the closing slash in self-closing elements must have a white space before: <input_/>
    I’m pretty sure that said space is not required. It’s merely a backward‐compatibility measure for certain browsers that didn’t understand XHTML and would behave poorly if that space were not present (Netscape 4?). In my experience, the latest versions of Firefox, Internet Explorer (6/7), Netscape, and Opera seem to behave fine when the space is omitted and the XHTML document is displayed as HTML. I suppose you could call it a matter of bad practice (I don’t, personally), but then displaying XHTML as HTML is also bad practice.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •