SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Table With Colspan Problems

    Hello, I'm currently having problems with tables and putting a COLSPAN="3" on a TD. I put a picture and the code below.

    My problem is when I put the code below it acts as if the colspan=3 is not working because it makes the left side of the table smaller and the right side bigger. It did work for the small text at the top of the table, it didn't make either side change, worked fine.
    Code:
    <td colspan="3"><div align="left">
      <textarea name="fs" cols="70" rows="10" class="box" id="fs" tabindex="24"></textarea>
    </div></td>
    The top portion of the picture is the HTML code without the colspan=3. The bottom half includes the colspan=3 with the textarea and it gets messed up.



    Here is the full code:
    Code:
          <table width="450" border="1" cellpadding="0" cellspacing="0">
            <tr>
              <td colspan="3"><div align="center"><span class="smallGreyText">Fields marked with an asterisk <span class="star">*</span> are required.</span></div><br /></td>
            </tr>
            <tr>
              <td width="155"><div align="right"><label for="username"><span class="star">* </span>Username:</label></div></td>
              <td width="20"></td>
              <td width="275"><div align="left">
                text here
              </div></td>
            </tr>
            <tr>
              <td colspan="3"><div align="left">
                <textarea name="fs" cols="70" rows="10" class="box" id="fs" tabindex="24"></textarea>
              </div></td>
            </tr>
          </table>
    Also, here is the a picture of the bottom of the table where the actual TEXTAREA and colspan=3 are. You can see the COLSPAN looks like it worked fine but it still messes up the rest of the table.


    Please help, thanks.

    EDIT: It does seem to load fine in FIREFOX but in Internet Explorer it doesn't. I don't think it's browser related though.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Welcome!
    It's not the colspan that is throwing off the layout - it's the cols attribute on the textarea.

    If you remove this and give the text area a style attribute with a set width it will fix it.
    But I wouldn't use tables either, i'm part of the XHTML/CSS fanclub

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    yeah but, to get the forms all lined up and stuff how wud u do that with DIV's? only way i know how is to use tables to make them all lined up like that. cause im pretty sure by xhtml/css you mean divs.

    EDIT: I applied a style width to the textarea and it still messes up the tables... just like before. Your suggestions didnt work . Here's the code I used:
    Code:
    <tr>
      <td colspan="3"><div align="left">
        <textarea name="about" cols="" rows="" class="box" id="about" style="width: 440px;"></textarea>
      </div></td>
    </tr>

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Using CSS to define textarea width and height should solve it

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yep, so..

    Code:
    CSS
    #fs {
    	width: 440px; /* or 100% */
    	height: 100px; /* whatevr height you want here */
    }
    
    HTML
    <td colspan="3"><textarea name="fs" id="fs"></textarea></td>
    Delete the rows and cols all together and the class might not be necessary depending on what else you have in the page..

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    If I was replacing this without tables I would do something like..

    Code:
    CSS
    form { width: 500px; }
    .row { clear: both; }
    .row label { 
      float: left; 
      width: 150px;
    }
    .row textarea {
      float: right;
      width: 350px;
    }
    
    HTML
    <form>
      <div class='row'>
        <label for='about'>About Me</label>
        <textarea id='about' name='about'></textarea>
      </div>
    </form>

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The "rows" and "cols" attributes of textarea elements are required. If you specify width and height in the CSS, they will be overridden.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks Kravvitz,
    I wasn't aware of that.

    Cheers,


Bookmarks

Posting Permissions

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