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 8 of 8
  1. #1
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation Table or DIV position in place?

    I'm trying to get a table or a DIV to stay where i put it and not to grow once i put some text inside it. But ive not been able to type in it without having it stretch out...

    Could anyone show me some CSS code for doing this?

    Here is my code:
    Code:
    <table width="81" height="81" border="0" align="center" cellpadding="0" cellspacing="0" style="position: fixed;">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
    David

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    I’d really suggest you use a div because a table is only meant for tabular data. Then, as to your question: Is overflow: auto; what you are looking for?

  • #3
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks for the reply VIPStephan

    Well let me give more details about what i am doing. I have a table that has a background. The background is a button. I need the table to not go outside the button but i am unable to get a DIV to take the shape of it, only with a table i could. However, i need it not to strech out once i type inside it.

    overflow: auto; still streches it out.

    Hope that helps you out more,
    David

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Why are you using a table as a button? A button is either an image with an anchor around it (<a href=""><img …></a> or a regular text link with a background image (and optionally CSS image replacement) like so: <a href="">link text</a>.

    I suppose you chose the table because it collapses automatically to the size of its content? You can style the link to do exactly the same. An anchor is an inline-element by default so it collapses automatically as well. You can apply padding to give the background more room.
    Alteratively you can make it display: block; and assign a width or position it absolutely (or I think fixed will do as well – except in IE 6) so it collapses to the size of its content. In any case you’d need to apply a width for overflow: auto; or hidden to work. A max-width will work as well (except in IE 6 again).

  • #5
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I have attached a pic of what i am talking about.. The display: block; did not work either. It still streches the table.

    Its a picture of a blank button in the background so that i can add the text to the front of the button, hints the table im trying to type in. After doing that, i am using a CSS-P to put the overlay over the text so that it looks like its part of the button.

    Hope this helps more!

    David
    Attached Thumbnails Attached Thumbnails Table or DIV position in place?-show.jpg  

  • #6
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Current code is:
    Code:
    <table width="81" height="81" border="0" align="center" cellpadding="0" cellspacing="0" style="display: block; max-width:inherit; overflow:hidden;">
            <tr>
              <td>Derufkmn</td>
            </tr>
          </table>
    David

  • #7
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ok i got it where i need it for one of the buttons... but it STILL streches when i keep typing! I want it to do like a word-wrap!
    Code:
    style="position: absolute; top: 2695px; left: 707px; width: 80px; height: 82px;"
    David

  • #8
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ok, just got it via this link: word wrap difficulties

    Using the word-wrap:break-word style.
    Code:
    style="position: absolute; top: 2695px; left: 707px; width: 80px; height: 82px; word-wrap:break-word"
    David


  •  

    Posting Permissions

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