SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to make a table the same size as the parent layer?

    <div id="a_layer">
    <table>
    <tr>
    <td>
    Some content....
    </td>
    </tr>
    </table>
    </div>

    How do I make the table the SAME WIDTH as the layer? It must be 100% of the layer width, no matter what.

    Can someone help me on this one, please?
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the parent DIV set to a percentage? If so then why even bother nesting a TABLE inside the DIV. Just add some padding to the DIV with CSS to push the contents away from the edge.

    Have you tried simply setting the TABLE witdth to 100%? I'm betting though that will screw up in at least one browser.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    layers are weird. i use dreamweaver and i cant get any table inside a layer to align. even if i put a table within a table within a layer, i cant get the central table to align with the outer table!! how do you make "parent" layer? i can make 1 or 2 or 100 layers, but how do you define the parent?

  4. #4
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Creole:
    The layer is not set to a percentage, but it is set like this:

    position: absolute;
    top: 185px;
    left: 150px;
    right: 0px;

    When I set the TABLE's WIDTH attribute to 100%, it becomes 100% of the browser window width (i.e. the wisth is set to 600 if the resolution is 800x600), and not 100% of the DIV width. Setting the width to 100% in CSS produces the same result.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  5. #5
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Geiger - layers are indeed very, very wierd.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    truelight,

    The styles you gave for the box didn't specifiy the width. If you don't specify the width I think it defaults to 100%. So as you haven't set the width the box is 100% and the table is 100% of that. And if the parent of the box is the body then both the box and table will be 100% of the browser window.

    Try adding a background colour or border colour to the box and table to make it easier to see where everything is.

  7. #7
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The table does indeed have background and stuff - can see perfectly where it is and how big it is.

    I think I understand how this works, if you are correct, but I still don't get how to solve the problem. You see - the DIV has to be 150px from the left side. I cannot set it to a percentage - it screws the page up.
    Last edited by M. Johansson; Jul 10, 2001 at 05:58.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shane..good call. I was also about to point out the fact that he is not setting the width for the DIV itself.

    truelight...

    The DIV is the "parent" element to the TABLE tag because it is fully contained inside it. The TABLE tag would be a "child" to the DIV for the same reason.

    Now, you'll have to know how wide you want the "parent" DIV to be before you can set the width of the TABLE. If you want the DIV to be 200 pixels wide then set it that way using the CSS I gave you below. But, since Netscape does not understand the width attribute of the DIV (using the method i gave you) you need to also set the width of the TABLE element.

    Does that make sense?

    #test {
    position: absolute;
    width: 150px;
    top: 185px;
    left: 150px;
    right: 0px;
    }
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I dont think that I'm making myself understood, here.

    I CAN'T set the width of the DIV to a percentage or a pixel amount. I need it to start 150px away fro the left border and stop at the right border. This is not a problem, assuming that the div only contains text. If it only contains text, it wraps nicely when it reaches the end of the div.

    However, when I put a TABLE in the DIV, it refuses to align correctly. The table must stop at the end of the div, and NOT overlap. Do you see what I'm trying to do here? I'll try to post an example.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, this may or may not answer your question but I had this same problem. If I recall, I set the DIV width how I wanted it, but then I left table width BLANK...no percentage and no pixel definition. Like Creole said, this can cause problems in NEtscape, but at least it might give you a head-start.

    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by truelight
    I dont think that I'm making myself understood, here.

    I CAN'T set the width of the DIV to a percentage or a pixel amount. I need it to start 150px away fro the left border and stop at the right border. This is not a problem, assuming that the div only contains text. If it only contains text, it wraps nicely when it reaches the end of the div.

    However, when I put a TABLE in the DIV, it refuses to align correctly. The table must stop at the end of the div, and NOT overlap. Do you see what I'm trying to do here? I'll try to post an example.
    Let me see if I understand. You want to width of the DIV to be 100% of the browser window starting at 150px from the left side?

    Let me ask you again. Why are you putting a TABLE inside a DIV anyway? YOu said yourself that you only experience the problem when you add that TABLE. Why not just leave it out?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Let me see if I understand. You want to width of the DIV to be 100% of the browser window starting at 150px from the left side?
    Almost right - the table shall spart at 150px left and end at 0px right. In other words, the layers size is not 100%, but rather 100%-150px, and aligned to the right.

    Let me ask you again. Why are you putting a TABLE inside a DIV anyway? YOu said yourself that you only experience the problem when you add that TABLE. Why not just leave it out?
    I'd love to leave it out, but the table is vBulletin, and such it is impossible to remove the table - it has to be there.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  13. #13
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, here is the page in question:

    http://www.intellected.org/cafe/index.php?

    I have added borders, so that it's easier too see the tables and borders.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  14. #14
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've got it working HERE:

    http://www.intellected.org/cafe/forumdisplay.php?forumid=2

    I don't know why it is working on that page, and not the aforementioned one. Very wierd.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  15. #15
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    HA!
    I've finally made a workaround. This is what I did:
    I just added a lot of nbsp with spaces in in between them a few hundred times at the bottom. This forces the table to maximum width. A bit crude, but it works!
    Last edited by M. Johansson; Jul 10, 2001 at 14:05.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  16. #16
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This link:

    http://www.intellected.org/cafe/foru....php?forumid=2

    the site is busted in Netscape 4.7.

    Let me see if I can consult with you here.

    1) You want the forums to START 150px from the left right? I would assume that is where your navigation will be? This might be the obvious answer but why don't you skip the DIV altogether? You could do this MUCH easier with TABLES,

    <table width="100%"> <!-- the master table -->
    <tr>
    <td width="150">
    This contains your navigation
    </td>
    <td width="100%"><!-- this cell contains the forums -->

    <table width="100%"><tr><td>
    the forums go here
    </td></tr></table>

    </td>
    </tr>
    </table>

    That would take care of your DIV problem and would ensure that everyone can see the page just like you want it to be.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  17. #17
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Euuurhghhh - Netscape 4.7...

    I'm not sure if I'm going to support that pile of junk. How big percentage is still using it?

    You see - I really like CSS alignment - it's much easier to read and maintain. I wouldn't use tables at all if it weren't for vbulletin.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  18. #18
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ... besides, I have loads of work to do on the site before supporting old browsers. Geez - vBulletin has an almost infinite amount of templates!
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  19. #19
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you mean "you wouldn't use TABLES at all if it weren't for the fact the some of your USERS are still using Netscape?"

    That should be the correct answer. No offense, but the most important thing here is to make sure that your site looks acceptable in all browsers. Various stats put NS 4.x at between 5-15% of the market share. That's enough to target.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  20. #20
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I support Netscape, just leaning towards not supporting the 4.7 one. I hate it - whenever I try to design something that supports it, it screws up - if it was because my code is sloppy, I'd accept it, but it's usually due to the fact that it's support for the standars is simply unacceptable. I love the latest mozilla builds, though, and I will support it, whatever it takes - and probably make it my default browser when it reaches 1.0.

    The problem with 4.7 is that it often demands a bunch of workarounds for it to work - i.e. specific code for netscape, and another one that complies with the W3C standards. I'm a firm beliver in standardization, and I like to write code that works in both mozilla and IE.

    My site will not be live until a few months from now, and I'm guessing 4.7 usage is dropping as we speak. However, 5%-15% IS enough to target - you are perfectly right on that one. I'm yet to decide wheter it's worth to support NS4.7. Do you have any link(s) to currect browser statistics?
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  21. #21
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.echoecho.com had browser statistics on the right. check that out

  22. #22
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll post a new thread in Web Page Design about this.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    Madison, Wisconsin
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    truelight,

    I'll go over to the Web Design forum to follow this discussion, but I was curious, if your don't have the 150px margin to the right in Netscape, what does that do to the usability of the page? Is navigation covered up? Or other content?

    If not, maybe just accept that you wont have a 150px margin in Netscape and that people are still getting the content, which is the main thing.

    Doug


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
  •