...

View Full Version : CSS in IE



lamby
02-28-2009, 09:31 AM
Hello,
I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE.

If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below.
I hope someone can help me make sense of this.




form{
display:block;
width:566px;
margin:0px;
padding:0px;
}


#form_table{
border-style:solid;
border-color:black;
border-width:thin;
border-spacing:0px;
border-collapse: collapse;
float:right;
width:564px;
margin:0px 0px 50px 0px;
padding:0px;
}


#form_table thead tr{
color:white;
text-align:left;
background-color:#1B1B1B;
border:solid black thin;
}


#form_table tbody tr td{
float:right;
display:block;
}


#country_list{
list-style-type:none;
margin:0px;
padding:5px 0px 0px 0px;
}


.td_spacer{
display:block;
margin:0px;
padding:10px 0px 0px 0px;
}


.input{
width:300px;
}


#message_box{
width:558px;
height:286px;
}




<form name="jobs" action="php/rtProcessor.php" method="post">
<table id="form_table" summary="post form">
<thead>
<tr>
<th><span class="">Post</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="float:left;">
<ul id="country_list">
<li id="china"><input type="radio" name="color" value="red" />red</li>
<li id="japan"><input type="radio" name="color" value="green" />green</li>
<li id="korea"><input type="radio" name="color" value="blue" />blue</li>
<li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
<li id="other"><input type="radio" name="color" value="Other" />Other</li>
</ul>
</td>
<td class="td_spacer">
<label for="companyname">Company Name:</label>
<input type="text" id="companyname" name="companyname" class="input" />
</td>
<td class="td_spacer">
<label for="email">E-Mail Address:</label>
<input type="text" id="email" name="email" class="input" />
</td>
<td class="td_spacer">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="input" />
</td>
</tr>
<tr>
<td>
<label for="message">Listing:</label>
<textarea id="message_box" name="message" rows="16" cols="67"></textarea>
</td>
</tr>
<tr>
<td>
<label for="hii">1+1 is?</label>
<input type="text" id="hii" name="hii" class="input" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="submit" />
</td>
</tr>
</tbody>
</table>
</form>

abduraooft
02-28-2009, 10:04 AM
Know why tables for layout is really bad (http://www.hotdesign.com/seybold/). (Also check, how to make a table less layout for form, www.alistapart.com/articles/prettyaccessibleforms)

Could you post a link to your page? (Otherwise we need your complete html+CSS, including DOCTYPE)

lamby
02-28-2009, 12:12 PM
Thanks for the advice I will definitely look into not using a table here.
Here is the page I am referring to: http://www.eslassembly.com/recruit.php

Also I just realized that its not only that one page that is having the problem other pages on the site having the same problem as well. They work in FF but not in IE.

abduraooft
02-28-2009, 12:51 PM
To expect a cross browser support, we need to supply a valid markup. See the errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.eslassembly.com%2Frecruit.php&charset=%28detect+automatically%29&doctype=Inline&group=0)

lamby
02-28-2009, 02:31 PM
Oh I didn't know there were so many errors!
I made some adjustments and now the markup comes up valid.
Unfortunately the things in IE haven't really improved.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum