Changing

[Chris Beach]

Hi,

I am using the following little chunk of HTML and Javascript to show
and hide a form contained within a <div>:

<p><a id='commentAddPhoto544' href='#commentAnchor544'
onclick="document.getElementById('comment544').style.display =
'block'; this.style.display = 'none';">[add comment to diary
entry]</a></p>

This works but sometimes elements are not correctly repositioned on
the page when the form appears and 'expands' out. Usually, the link
below is superimposed onto the top of the form and doesn't get shifted
down the page until you hover the mouse over it. Is there any way I
can get round this, or is is just a bug in my browser (IE6)? If it is
a bug, perhaps there is a work-around?

Source code is below, and the offending page is at
http://diary.chrisbeach.co.uk

Thanks in advance for your help.

Oh, and another irritating problem is that when I select text on the
page by clicking and dragging the mouse, it seems to start the
selection from the top of the page regardless of where I start my
dragging.

Please help me out!

Chris



<div style='{width: 87%; position: relative; left: 40px; margin-top:
25px}'>
<p><a id='commentAddPhoto544' href='#commentAnchor544'
onclick="document.getElementById('comment544').style.display =
'block'; this.style.display = 'none';">[add comment to diary
entry]</a></p>
</div><div id='comment544' style='width: 87%; position: relative;
left: 40px; margin-top: 25px; display: none'><h2>add a comment</h2>
<div id='logEntryForm'>
<form action='http://www.chrisbeach.co.uk/php/classes/LogEntryActioner.php'
method='get'>
<input type='hidden' name='action' value='add' />
<input type='hidden' name='logTypeID' value='4' />
<input type='hidden' name='logEntryTitle' value='comment' />
<input type='hidden' name='parentLogEntryID' value='544' />
<div id='aliasNameContainer'>
<label for='aliasName'>your name:</label>
<input name='aliasName' maxlength='50' id='aliasName'
value='Chris' />
</div>
<div id='aliasWebsiteURLContainer'>
<label for='aliasWebsiteURL'>website (optional):</label>
<input name='aliasWebsiteURL' maxlength='100'
id='aliasWebsiteURL' value='http://www.chrisbeach.co.uk/' />
</div>
<div id='titleContainer'>
<label for='title'>comment:</label>
<input name='title' id='title' maxlength='255' />
</div>
<input type='submit' value='add comment' class='submitButton'
id='logEntryButton' />
</form>
</div></div>
<div style='{width: 87%; position: relative; left: 40px}'>
<p><a id='sectionAddPhoto544' href='#sectionAnchor544'
onclick="document.getElementById('section544').style.display =
'block'; this.style.display = 'none';">
[add photo to diary entry]</a></p>
</div><div id='section544' class='galleryContainer'
style='display: none'> <h2>add a photo</h2>
<!--<p>When you have selected your photo, please click on the 'send
photo' button once and wait while the file uploads. There is a maximum
file size of 300,000KB</p>-->
<div class="photoForm">
<form enctype="multipart/form-data"
action="http://www.chrisbeach.co.uk/php/classes/PhotoActioner.php"
method="post">
<input type="hidden" name="uploadPersonID" value="0" />
<input type="hidden" name="action" value="add" />
<input type="hidden" name="MAX_FILE_SIZE" value="300000" />
<input type="hidden" name="MAX_SIZEX" value="1024" />
<input type="hidden" name="MAX_SIZEY" value="1024" />
<input type="hidden" name="diaryLogEntryID" value="544" />
<label for='imageFile544'>File to send:</label>
<input name='imageFile' id='imageFile544' type='file'
onclick='alert( "Note that photos will not be accepted if they are
larger than 300K or 1024x1024 pixels" ); return true;' />
<input type="submit" value="Send Photo" onclick='alert( "Please
click OK and wait while the file uploads." ); return true;' />
</form>
</div>

</div>