...

View Full Version : Scrolling Div tag bug



SumDood
01-25-2007, 06:43 PM
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:


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

http://i151.photobucket.com/albums/s138/ifyouseakay/anomaly.jpg

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:

http://i151.photobucket.com/albums/s138/ifyouseakay/Anomaly2.jpg
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?

VIPStephan
01-25-2007, 08:14 PM
#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:


<tr><td> <input type="checkbox"/></td></tr>

#2.2: You didn't close the cell and row of your outer table:


</table><!-- end table CodeContent -->
</div>
</td>
</tr>
</table>


#3: Why are you actually using a table at all? Totally redundant.


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

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_/>

SumDood
01-25-2007, 09:40 PM
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.

VIPStephan
01-25-2007, 10:32 PM
Well then... maybe the reason it doesn't work is a missing doctype (http://alistapart.com/stories/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?

SumDood
01-25-2007, 10:44 PM
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.

Arbitrator
01-26-2007, 01:28 AM
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.


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 (http://lachy.id.au/log/2005/05/validation-quiz-explanation#form) describes this. You may want to take the corresponding Validation Quiz (http://lachy.id.au/log/2005/05/validation-quiz) before you read that though since the former document provides all of the answers to it.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum