form not contained in div

[npqster]

I have a form working in conjunction with a table and it's not rendering within the div in IE only. It's fine in Firefox. I tried applying a widht to the form but it's not working...

what can I do?

http://www.ltcproduction.com/landing_page_rvb/riverbed_landing_page.html

Here is the code below


The external css code for the divs


#grey_sidebar {
position:relative;
float: left;
background-image:url('grey.gif');
height:620px;
width:170px;
background-repeat: no-repeat;
text-align: left;
padding-top: 11px;
margin-left: 18px;
padding-left:13px;
}

#main {
position:absolute;
padding-left:14px;
width:390px;
top:238px;
left:204px;
text-align: left;
}

The html doc


<div>
<img src="header.gif" style="border:0;" alt-"Riverbed: Think fast"/>
</div>
<!--Header div ends-->

<!--Paris Istanbul div starts-->
<div id='parist'>
<img src="paristanbul.gif" border="0"/>
</div>
<!--Paris Istanbul div ends-->

<!--Last row div starts-->
<div>
<!--sidebar div starts-->
<div id="grey_sidebar">
<table cellspacing="2" style="vertical-align: top;" width=150><tr><th colspan=3>AGENDA:</th></tr>

<tr><td class='orange_time'>9:30</td><td></td><td class='agenda_text'>Registration</td></tr>

<tr><td class='orange_time'>10:00</td><td></td><td class='agenda_text'>Welcome and introduction</td></tr>

<tr><td class='orange_time'>10:15</td><td></td><td class='agenda_text'>See the Steelhead appliances in action </td></tr>

<tr><td class='orange_time'>11:15</td><td></td><td class='agenda_text'>Break</td></tr>

<tr><td class='orange_time'>11:30</td><td></td><td class='agenda_text'>Customer presentation:<br /> Kema will discuss how Riverbed's Steelhead appliances enabled them to achieve their goal of having a global VPN</td></tr>

<tr><td class='orange_time'>12:00</td><td></td><td class='agenda_text'>Going Serverless at the Branch Office with Infoblox and Riverbed - Infoblox</td></tr>

<tr><td class='orange_time'>12:15</td><td></td><td class='agenda_text'>"NetX - Optimising Application Delivery" - NetDialog</td></tr>

<tr><td class='orange_time'>12:30</td><td></td><td class='agenda_text'>"Optimisation by Security Consolidation"
- Fortinet</td></tr>

<tr><td class='orange_time'>13:00</td><td></td><td class='agenda_text'>Q & A</td></tr>

<tr><td class='orange_time'>13:10</td><td></td><td class='agenda_text'>Lunch</td></tr>

<tr><td class='orange_time'>15:00</td><td></td><td class='agenda_text'>Close</td></tr></table>
</div>
<!--sidebar div ends-->

<!--Main div starts-->
<div id='main'>
<form action="form_process.php" method="post" enctype="text/plain" style="height:620px;">
<table>
<tr><th colspan=2>Over 5,000 customers are running applications over their WANs up to 100x faster. It's time to find out how it's done.</th></tr>
<tr><td colspan=2><p>Complete the form below to register for this event:</p></td></tr>
<tr><td width=140 class='main_orange_text'>First Name:</td><td><input name="first_name" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Last Name:</td><td><input name="last_name" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Email Address:</td><td><input name="email" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Telephone Number:</td><td><input name="tel_number" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Company:</td><td><input name="company" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Title:</td><td><input name="title" type="text" size="26"></td></tr>
<tr><td class='main_orange_text'>Town/City:</td><td><input name="city" type="text" size="26"></td></tr>


<tr><td class='main_orange_text'>Country:</td><td>
<select name="country" id="country">
<option>Select from list------------</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
<option>France</option>
<option>Germany</option>
<option>Egypt</option>
<option>Argentina</option>
<option>China</option>
<option>South Africa</option>
<option>Japan</option>
</select></td></tr>

<tr><td class='main_orange_text'>Industry:</td><td><select name="Idustry" id="Industry">
<option>Select from list------------</option>
<option></option>
</select></td></tr>

<tr><td><span class='main_orange_text'>Project Time Frame:</span> </td><td>
<select name="project_time_frame" id="project time frame">
<option>Select from list------------</option>
</select></td></tr>
<tr><td style="padding-top: 2px; vertical-align:top;"><span class='orange_blurb'>I am unable to attend the seminars but would like further information from:</span></td><td>
<table><tr>
<td class='generic'>Riverbed Technology</td>
<td><input type="checkbox" value="Riverbed Technology" /></td></tr>

<tr><td class='generic'>InfoBlox</td><td><input type="checkbox" value="InfoBlox" /></td></tr>

<tr><td class='generic'>Fortinet</td><td><input type="checkbox" value="Fortinet" /></td></tr>

<tr><td class='generic'>NetDialog</td><td><input type="checkbox" value="NetDialog" /></td></tr>

<tr><td class='generic'>Zycko training</td><td><input type="checkbox" value="Zycko training" /></td></tr></table></td></tr>

<tr><td class='generic'></td><td>
<p>Fill out the form to register now.</p>
<input type="submit"
onclick=""
value="Submit">&nbsp;&nbsp;
<input type="submit"
onclick=""
value="Cancel">
</td></tr>
<tr><td colspan=3> <img src="sponsor_logos.gif" border=0/> </td></tr>
</table>
</form>



</div>
<!--Main div ends-->

</div>

[Four Staples]

Apply display: inline to the sidebar and see what happens.

[npqster]

I just tried and it didn't fix it

is there a code for changing the height of form fields?

[peachskittle]

Hi...

I think you've got a bit of a padding/width inconsistency going on here.

Firefox is lenient when you've exceeded the width of space you have available, but IE will not be as kind. Make sure that, when you calculate how much widith you want for each of those sections (sidebar and main) that your padding is added in there as part of the width for each section, and the margin you ask for is in the total too...

EDIT: Okay, a few more things going on here now that I have it running locally. Your sidebar has position relative so that the main content will be placed in relation to that. Not the way I would do it, but should work. However, you also have a float left, margin left on the sidebar. In IE this is triggering double margin (if you look at it in IE, the margin on the left of the sidebar is actually too much.) But your main is still at 204px to the left of the sidebar and will overlap with your sidebar. The added width from this may or may not be throwing off the vertical position for it too, but we can do this one thing at a time...

[Four Staples]

EDIT: Okay, a few more things going on here now that I have it running locally. Your sidebar has position relative so that the main content will be placed in relation to that. Not the way I would do it, but should work. However, you also have a float left, margin left on the sidebar. In IE this is triggering double margin (if you look at it in IE, the margin on the left of the sidebar is actually too much.) But your main is still at 204px to the left of the sidebar and will overlap with your sidebar. The added width from this may or may not be throwing off the vertical position for it too, but we can do this one thing at a time...
The fix for this is to add display: inline to the sidebar and anything else floated left against it, as I mentioned in my last post ;)

[peachskittle]

The fix for this is to add display: inline to the sidebar and anything else floated left against it, as I mentioned in my last post ;)

:D yeah, I'm not sure if op is there, looks like this has not resolved, so the hope is to point out exactly what that's supposed to help resolve and we can go from there, as it looks like the live link is still having this issue.