Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS in IE

  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    4
    Thanked 1 Time in 1 Post

    CSS in IE

    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.



    Code:
    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;
            }


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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Know why tables for layout is really bad. (Also check, how to make a table less layout for form, http://www.alistapart.com/articles/p...ccessibleforms)

    Could you post a link to your page? (Otherwise we need your complete html+CSS, including DOCTYPE)
    Last edited by abduraooft; 02-28-2009 at 09:06 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    4
    Thanked 1 Time in 1 Post
    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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    To expect a cross browser support, we need to supply a valid markup. See the errors in your markup
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    4
    Thanked 1 Time in 1 Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •