Table nightmares >:(

Snib · June 19th, 2004, 06:37 PM

http://snibworks.com/fpro

I am designing my own forum that can be viewed through the link above (it's not even close to done :-) ). Right now I have set all tables, <tr>s and <td>s to border:1px solid black; so you can see where the borders are. I may start messing with it, so if it abruptly changes, don't be alarmed :-)

The design consists of three <tr>s: banner, menu/content, and footer.

Take a close look at the menu/content row. Yup, there's the problem: a large space between the menu and content cells. I have discovered (by using text-align:right;) that the large space belongs to the menu cell. I tried setting the menu cell's width to 200px, but the border did not move. Making the content a long string (wwwwwww....) causes the border to retreat toward the menu, which is what I want.

Is there some kind of CSS property that causes the table cell to fit its contents, and no larger??

Sometimes I wonder why I use tables....

Please help before I tear out the rest of my hair :D

Also, I'm up for comments on the design so far. :D Kinda bland, but like I said, not close to done.

Thanks in advanced,

Snib

<><

Ben Horne · June 19th, 2004, 10:42 PM

Snib,

I don't want to make you feel bad or anything BUT you should not be using tables for layout purposes. Trust me, I heard this from someplace a while ago(not sure if it was here or someplace else).

Anyways, use CSS for layout as you'll have much better control over the final layout.:)

I checked out the link and it looks good so far. Is the forum going to cover Flash stuff as well? I think it might help for those people who do not know about this place. Come to think of it, I could maybe design a Flash intro for the forum:D(No. I am NOT kidding)

Whaddya say?

Ben Horne
Madison Area Technical College - Truax
3550 Anderson Street
Madison, Wisconsin 53704-2599

-------------------------
http://community.webshots.com/user/valerian114

"There are two kinds of people in the world: Those who claim to be Flash junkies and those who actually are Flash junkies"

richard.york · June 19th, 2004, 10:56 PM

Quote:

quote:
Take a close look at the menu/content row. Yup, there's the problem: a large space between the menu and content cells. I have discovered (by using text-align:right;) that the large space belongs to the menu cell. I tried setting the menu cell's width to 200px, but the border did not move. Making the content a long string (wwwwwww....) causes the border to retreat toward the menu, which is what I want.

By default, a table's content only expands enough to accomodate the content that it contains, so the behavior you describe makes sense. This said, put more content in your content cell and it will expand to fill the whole row. Personally I would avoid table-based layout. <div> elements, as block-level elements, OTOH, expand to the whole available area, regardless of content by default. So a floating <div> layout is better for fluidity.

Visit alistapart.com they have several articles detailing how to do table-less layouts. Of course for your actual forum this isn't so taboo (e.g. for what tables are intended for, the organization and association of data), but IMO, it is if you're using it for the whole site. My site also uses this technique, feel free to rummage the source code.

Here are a few unrequested observations on your styles and markup:

Code:

/* sans-serif (e.g. Arial) is the generic font family name and is non OS specific. */
* {
    font-family: sans-serif;
    font-size: 10pt;
    color: black;
}
body {
    margin: 0;
    background-color: white;
}
/* border-collapse only applies to <table> elements */
table, tr, td {
    padding: 0; 
    border-collapse: collapse;
    vertical-align: top;
    border: 1px solid black
}
a, a:visited, a:link {
    color: steelblue;
    text-decoration: none;
}
a:hover {
    color: black;
}
/* Don't need text-decoration: none here, already defined in <a> element selector */
a:active {
    color:lightsteelblue;
}
object, embed {
    margin: 0;
    padding:0;
}
input, button {
    border: 1px solid black;
    background-color: #eeeeee;
    font-size: 9pt;
}
/**********CLASSES***********/
.colored {
    padding: 0;
    margin: 0;
    border: 1px solid black;
    background-color: #eeeeee;
}
.content {}

/* monospace, generic font family name is universally accepted and not OS specific */
.location {
    font-size: 16pt;
    font-family: monospace;
    font-weight: bold;
}
.menuheader {
    background-color: black;
    color: #eeeeee;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
}
.menucontent {
    background-color: #eeeeee;
    border:1px solid black;
}
.mainContent {
    width:100%;
    word-wrap: break-word;
}

Second, it is *very* helpful if you add whitespace for readability. I realize you're probably outputting from PHP and haven't added in tab characters, but it really helps when you're trying to troubleshoot your markup.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="SHORTCUT ICON" href="images/favicon.ico">
        <link href="test.css" rel="stylesheet" type="text/css">
        <script src="scripts.js" language="javascript" type="text/javascript"></script>
        <title>SnibWorks FPro</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="keywords" content="web development forums php mysql html dhtml css javascript jscript asp asp.net">
    </head>
    <body>
        <table class='mainContent'>
            <tr>
                <td class='banner' colspan='2'>
                    <table>
                        <tr>
                            <td>
                                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="fpro_flash_banner" align="middle">
                                    <param name="allowScriptAccess" value="sameDomain" />
                                    <param name="movie" value="fpro_flash_banner.swf" />
                                    <param name="quality" value="high" />
                                    <param name="bgcolor" value="#ffffff" />
                                </object>
                            </td>
                            <td>
                                <span class="location">fpro.home</span><br>
                                <a href="http://snibworks.com/">[SnibWorks.com]</a> <a href="javascript:openPrinterFriendly()">[printer friendly]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class='menu'>
                    <table>
                        <tr>
                            <td class='menuheader'>
                                member_info {
                            </td>
                        </tr>
                        <tr>
                            <td class='menucontent'>
                                <form method='POST' action="login.php">
                                    [log in below, or <a href="register.php">register</a>]<br>
                                    <input type='text' size=15 name="user" value="username" onFocus="this.value = ''" /><br />
                                    <input type='text' size=15 name="pass" value="password" onFocus="changeToPassword(this)" /><br />
                                    <input type='submit' value="Log in &gt;">
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td class=menuheader>
                                } with(fpro) {
                            </td>
                        </tr>
                        <tr>
                            <td class=menucontent>
                                <a href="index.php">home</a><br />
                                <a href="profile.php">profile</a><br />
                                <a href="active.php">active_topics</a><br />
                                <a href="members.php">members</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="menuheader">
                                }
                            </td>
                        </tr>
                    </table>
                </td>
                <td class='content' id='content'>
                    content test content test content test content test content test content 
                    test content test content test content test content test content test content test
                    content test content test content test content test content test content test content 
                    test content test content test content test content test content test
                     content test content test content test content test content test content test content test
                      content test content test content test content test content test content test content test
                       content test content test content test content test content test content test content test
                        content test content test content test content test content test content test content test
                </td>
            </tr>
            <tr>
                <td class='footer' colspan="2">
                    <p style="text-align: center">
                        <a href="http://validator.w3.org/check?uri=referer">
                            <img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88" />
                        </a>
                        <img border="0" src="images/fpro_logo01.png" alt="Powered by SnibWorks FPro Forum Software Version 1.1, using PHP 4.3.2" />
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

You should *never* use HTML entities as their literal in HTML source. Always use the encoded equivalent. The W3C validator should complain about this as well. For instance, > is encoded as > (greater than) < is < (less than), etc. Get in the habit of quoting your attribute values, this will take you closer to XHTML compliant markup, which is where markup is going.

Your Flash movie also does not play in Mozilla! Have a closer look at the alistapart article posted to the other thread, the author explains in detail how to get compatibility with Mozilla/NS. (I use Moz 1.8 exclusively)

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

richard.york · June 19th, 2004, 11:01 PM

The other *simple* solution to your problem, is simply define a fixed width for the table cell that contains the menu. Then, you're not reliant upon how much content appears in the content cell.

td.menu {
width: 200px;
}

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Snib · June 21st, 2004, 06:44 AM

Rich,

Thanks for the help. The reason I didn't add whitespace in my HTML is because I am using Dreamweaver,
which works well with PHP and such, adding whitespace that looks
OK in DW, then messes it up in the actual page.

So if I put a <div> with width:100%; within the content area, it would expand to the maximum. I'll experiment with it and tell you how it works.

Thanks again,

Snib

<><

richard.york · June 21st, 2004, 01:30 PM

No, a div with width: 100%; would not be ideal, percentage widths make it difficult to utilize margins, padding and borders. A floating div layour where one <div> has a fixed width and the other has a width of width: auto; would be better suited. As a block-level element, width: auto; is the default width value, and that means it will expand to fill all the available space, but not expand beyond that available space if you add padding, margins and borders.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

richard.york · June 21st, 2004, 02:33 PM

Quote:

quote:Originally posted by Snib

Thanks for the help. The reason I didn't add whitespace in my HTML is because I am using Dreamweaver, which works well with PHP and such, adding whitespace that looks OK in DW, then messes it up in the actual page.

Ever the problem with WYSIWYG.. as long as its coherent to you, though here again you're the one asking for help and providing messy source code for us to look at!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Snib · June 21st, 2004, 02:52 PM

Rich,

Thanks for all the help. I'm still experimenting with the <div> and <table> stuff.

Please revisit the site and let me know if the Flash movie plays correctly in Mozilla. I reread the alistapart article and I think I got everything in there.... It takes a split second to load in IE, but it doesn't bother me right now; I'd rather finish the project first :-)

Also, I added the exact code you gave me:

td.menu {
width: 200px;
}

to the stylesheet, and nothing happened. Let me know if I missed something there.

Thanks for helping,

Snib

<><

richard.york · June 21st, 2004, 03:18 PM

It works for me, of course I'm using Mozilla! It seems a hack is in order to get it working in IE.

In the CSS add:

Code:

table, tr, td {
    padding: 0; 
    border-collapse: collapse;
    vertical-align: top;
    border: 1px solid black
}
table#contentbody {
    width: 100%;
    table-layout: fixed;
}
td.menu {
    width: 142px;
}
a, a:visited, a:link {
    color: steelblue;
    text-decoration: none;
}

In the HTML:

Code:

                               <span class="location">fpro.home</span><br>
                                <a href="http://snibworks.com/">[SnibWorks.com]</a> <a href="javascript:openPrinterFriendly()">[printer friendly]</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table id='contentbody'>
            <tr>
                <td class='menu'>
                    <table>
                        <tr>
                            <td class='menuheader'>
                                member_info {
                            </td>
                        </tr>
                        <tr>

HTH!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

richard.york · June 21st, 2004, 03:23 PM

You might want to do some experimentation with the table-layout: fixed; declaration. This forces the table cells into the width specified for that cell. If the content is larger than the cell it will be *clipped*. This can be controlled with the overflow property. Shouldn't be a problem here though. In Mozilla, if the content is larger than the cell it will overflow the edges of the cell, as though overflow: visible; were applied. overflow: hidden; corrects that (IE treats the extra content like overflow: hidden; were applied). overflow: auto; will display scroll bars, if necessary.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::