cloud09 0 Junior Poster in Training

I have an options section for my editable gallery that displays fine in Chrome, FF, Safari, Opera, and even IE7. But not IE8 - which once again finds a way to make my life harder. Can anyone explain why this:

<td colspan="2" style="width: 800px;max-width: 800px; text-align: center;">
     <img src="galleryopt.png" height="34px" width="187px" style="margin: 10px 20px; margin-right: 90%; float: left;clear: right;" alt="Gallery Options"/><br/>
     <div style="width: 760px; margin: 5px 20px; text-align: left;" >
       <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="options" enctype="multipart/form-data" id="options">
         <div id="displayOpt" style="float: left;border: thin black solid;padding: 5px; width: 350px; ">
           <input type="text" size="12" class="titleInput m2" value="Title"
            onfocus="if(this.value == 'Title') {this.value = ''}"
            onblur="if(this.value == '') {this.value = 'Title'}"/><br/>
           <textarea rows="2" class="titleInput m2" id="gdescription"
            onfocus="if (this.value == 'Description') {this.value = ''}"
            onblur="if (this.value == '') {this.value = 'Description'}"
           >Description</textarea><br/><hr/>
           <label>Pictures Per Page</label>&nbsp;
             <input name="picsPerPage" type="text" maxlength="3" size="1" onkeyup="fieldcheck(this)"/><br/><hr/>
         <span>Display Style</span><br/>
         <p class="sublabel">Choose action when image is clicked/hovered over.</p>
         <select class="m2">
           <option>None</option>
           <option>Hover Image</option>
           <option>Popup</option>
           <option>Link</option>
         </select>
         <hr/>
         <label for="gwidth">Gallery Width</label>
           <input type="text" maxlength="4" size="4" value="" name="gwidth" id="gwidth" onkeyup="fieldcheck(this)"/>
       <span class="sublabel">Minimum 620px</span><br/>
       <hr/>
       <label>Background</label><br/>
         <input class="color1" name="gbg" id="gbg" onchange="var area=document.getElementById('testarea'); area.style.backgroundColor = '#' + this.value"/><br/>
       <span class="sublabel" style="position:relative; top: 7px;">or</span>
       <div class="upload1">
         <br/>
         <div class="fakefile">
           <input type="text" name="fake_bgfile" id="fake_bgfile" class="fakefile1"/>
         </div>
         <input type="file" name="bgfile" id="bgfile" class="realfile" onchange="this.form.fake_bgfile.value = this.value"/>
       </div>
       <hr/>
       <span>Font</span><br/>
       <div id="font" style="width: 182px; float: left;">
     	<label for="gfont-family" class="sublabel m2">Family</label>
     	<select name="gfont_family" class="m2" id="gfont-family" onchange="var sample=document.getElementById('test'); sample.style.fontFamily = this.value">       
     	  <option style="font-family: Arial;">Arial</option>
	 	  <option style="font-family: Roman">Roman</option>
	 	  <option style="font-family: Verdana">Verdana</option>
	 	  <option style="font-family: 'Trebuchet MS'">'Trebuchet MS'</option>
	 	  <option style="font-family: 'Comic Sans MS'">'Comic Sans MS'</option>
	 	  <option style="font-family: Calibri">Calibri</option>
        </select>
        <br/>
        <label for="gfont-size" class="sublabel m2">Size&nbsp;&nbsp;&nbsp;</label>
          <select name="gfont_size" class="m2" id="gfont-size" onchange="var sample=document.getElementById('test'); sample.style.fontSize = this.value + 'px' "> 
       		<option>10</option>
	   		<option>11</option>
	   		<option>12</option>
	   		<option>13</option>
	   		<option>14</option>
	   		<option>15</option>
	   		<option>16</option>    
      	  </select>
     	  <br/>
     	  <label for="gfont-color" class="sublabel m2">Color&nbsp;</label>
     		<input class="color1 m2" style="width: 120px;" id="gfont-color" name="gfont_color" onchange="var sample=document.getElementById('test'); sample.style.color = '#' + this.value"/>
     	</div>
     	<div class="optContainer m2 test" id="testarea" style="background-color: white;">
       	  <div class="center">
            <span id="test">Sample</span>
          </div>
     	</div>
     	<input type="submit" name="saveGallery" value="Save Changes"/>
     	</div>
     	</form>
     <div style="float: left; width: 382px;">
       <div class="optContainer m2l" id="border" style="width: 382px;max-width: 382px;"/>
         <form name="imgOpt" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <span>Image Border and Margins</span>
         <div style="float: left; width: 100%">
           <div style="float: left; width: 170px;"/>
       		 <label for="borderwidth" class="sublabel">Width</label>
       		 <select name="borderwith" id="borderwidth" class="m2">
         	   <option>None</option>
         	   <option>Thin</option>
         	   <option>Medium</option>
         	   <option>Thick</option>
       		 </select><br/>
       		 <label for="bordercolor" class="sublabel">Color</label>
       		   <input class="color1 m2" name="bordercolor" id="bordercolor" style="width: 100px"/><br/>
       		 <label for="borderstyle" class="sublabel" style="margin-right: 12px;">Style</label>
       		   <select class="m2" name="borderstyle">
         		 <option>None</option>
         		 <option>Solid</option>
         		 <option>Dashed</option>
         		 <option>Dotted</option>
         		 <option>Groove</option>
         		 <option>Ridge</option>
         		 <option>Inset</option>
         		 <option>Outset</option>     
       		   </select>
       		</div>
       		<div id="a" style="text-align:center;">
       		  <p class="sublabel m2"><strong>Margins</strong>(in pixels)</p>
       		  <label class="sublabel" for="mtop">Top&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
         		<input type="text" name="mtop" maxlength="2" size="1" id="mtop" class="m2"
           		  onkeyup="fieldcheck(this)"/>
       		  <label class="sublabel" for="mright">Right</label>
         		<input type="text" name="mright" maxlength="2" size="1" id="mright" class="m2"
         		  onkeyup="fieldcheck(this)"/><br/>
       		  <label class="sublabel" for="mbottom">Bottom</label>
         		<input type="text" name="mbottom" maxlength="2" size="1" id="mbottom" class="m2"
         		  onkeyup="fieldcheck(this)"/>
       		  <label class="sublabel" for="mleft">Left&nbsp;&nbsp;</label>
         		<input type="text" name="mleft" maxlength="2" size="1" id="mleft" class="m2"
         		  onkeyup="fieldcheck(this)"/>
       		</div><br/>
       	  <div style="float:left; width: 100%;">
       		<label>Image Size</label>
       		<p class="sublabel">Maximum Size is 600x600</p>
       		  <input type="text" maxlength="3" size="2" name="iwidth" onkeyup="fieldcheck(this)"/> X <input type="text" maxlength="3" size="2" name="iheight" onkeyup="fieldcheck(this)"/>
       	  </div>
       	  <input type="submit" name="saveGallery" value="Save Changes"/>
       	  </form>
       	</div>
     </div><br/>
     <div class="optContainer m2" style="width: 382px; max-width: 382px;">
       <span>Account Options</span><br/>
       <span style="font-size: .85em;"><i>Change Password</i></span>
       <div style="float: left;width: 100%">
         <label class="sublabel" for="oldPass">Old Password&nbsp;</label>
           <input id="oldPass" name="oldPass" size="20" type="password" class="m2"/><br/>
         <label class="sublabel" for="newPass">New Password</label>
           <input id="newPass" name="newPass" size="20" type="password" class="m2"/><br/>
         <label class="sublabel" for="ConfirmPass">Confirm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
           <input id="ConfirmPass" name="newPass" size="20" type="password" class="m2" /><br/><br/>
       </div>
       <div style="float: left; width: 100%;">
         <span style="font-size: .85em"><i>Contact Info</i></span><br/>
         <span style="font-size: .85em"><?php echo $email; ?>example@yoursite.com</span><br/>
         <label class="sublabel" for="newEmail">Change E-mail</label>
           <input id="newEmail" name="newEmail" size="40" type="text" class="m2" style="margin-bottom: 10px;"/>
       </div>
       <div style="float:left; width: 100%">
         <span>Contact Administrator</span>
         <form name="contactAdmin" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
           <textarea rows="3" cols="55" class="titleInput m2"
             onfocus="if(this.value == 'Message') {this.value = ''}"
             onblur="if(this.value == '') {this.value ='Message'}"
           >Message</textarea>
         </form>
       </div>
     </div>
 </td>
</tr>

Causes what is in the attached image?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.