Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Fixed Table Layout and Overflow

Bottom of Page

1 to 2 of 2

  1.  
    • CommentAuthorjriddle
    • CommentTimeSep 3rd 2010
     permalink
    Good afternoon cssBeauty,

    I currently have ran into a issue that I have not been able to solve. I am in the process of styling an Asset Manager application that quite a lot of data returned to a table element. To not extend past the "shell" i have created, I set the table to fixed width (Table is 92em, body has been set with font reduction at 62.5%) While testing my css to see if it broke, i noticed if data is returned to the last cell , for example an IP address of 255.255.255.255, the cell bleeds into my "adminFunctions" cells. Does anyone know a way to circumvent this issue. I have looked all over the net for "table-layout fixed cell bleeding, and other misc terms". My Google-Fu isn't shabby. I even asked other developers and they also don't know how this is happening. Any help would be appreciated.

    Below is my entire CSS file so far.

    /*********************************/
    /* Globa l*/
    /*******************************/

    body {
    background-color: #565656;
    color: #ccc;
    font-family: arial, sans-serif;
    font-size: 62.5%;
    margin: 0em;
    padding: 0em;
    }

    * {
    margin: 0em;
    padding: 0em;
    }

    a {
    color: #888;
    font-size: 1.2em;
    }

    a img {
    border: 0em;
    }

    #footer {
    float: left;
    clear: both;
    }

    #header {
    border-bottom: 1px solid #4f4f4f;
    float: left;
    height: 6.5em;
    line-height: 6.5em;
    position: relative;
    width: 100%;
    }

    #mainContent {
    float: left;
    margin: 1em 0em;
    padding: 0em;
    width: 100%;
    font-size: 1.2em;
    }

    #shell{
    margin: 0em auto;
    padding: 0em;
    width: 92em;
    }

    .adminFunctions {
    background-color: #aaa;
    }

    .adminFunctions a {
    color: #666;
    display: block;
    font-weight: bold;
    height: 4em;
    line-height: 4em;
    text-decoration: none;
    }

    .adminFunctions a:hover {
    background-color: #bbb;
    color: #fff;
    }

    .adminFunctions img {
    margin: 0em .2em -.1em 0em;
    }

    #assetsTable {
    background-color: #ddd;
    border-collapse: collapse;
    color: #666;
    float: left;
    font-size: .8em;
    margin: 0em;
    padding: 0em;
    position: relative;
    table-layout: fixed;
    text-align: center;
    width: 100%;

    }

    #assetsTable th {
    background-color: #666;
    border-bottom: 0.2em solid #888;
    color: #fff;
    }

    #assetsTable tr {
    height: 4em;
    }

    .odd{
    background-color: #fff;
    border-bottom: .2em solid #999;
    }

    #pageSummary {
    color: #666;
    display: block;
    float: left;
    height: 6em;
    line-height: 6em;
    margin: 0em 0em 2em 0em;
    position: relative;
    width: 100%;
    }

    #pageSummary h1 {
    color: #fff;
    float: left;
    margin: 0em 0em 0em 1em;
    padding: 0em;
    }

    #pageSummary img {
    float: left;
    margin: .5em 0em 0em 0em;
    padding: 0em;
    }

    Here is my HTML
    <!DOCTYPE HTML>

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Servers: index</title>
    <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="shell">
    <div id="mainContent"
    <table id="assetsTable">
    <tr>
    <th>Brand</th>
    <th>Make</th>
    <th>Model</th>
    <th>Serial Number</th>
    <th>Part Number</th>
    <th>Order</th>
    <!--<th>Carepak Number</th>-->
    <th>Support Expires</th>
    <th>Hostname</th>
    <th>Usage</th>
    <!--<th>Notes</th>-->
    <th>IP Addresses</th>
    <th colspan="3">Administration</th>
    </tr>


    <tr class="odd">
    <td>HP</td>
    <td>Proliant</td>
    <td>DL360 G5</td>
    <td>adf</td>
    <td>asdfzxc</td>
    <td>lkj</td>
    <td>2011-02-23 15:17:00 UTC</td>
    <td>FLPDB101</td>
    <td>Database Server</td>
    <td>
    172.16.3.201
    172.16.3.201
    </td>
    <td class="adminFunctions"><a href="#">View</a></td>
    <td class="adminFunctions"><a href="#">Edit</a></td>
    <td class="adminFunctions"><a href="#">Delete</a></td>
    </tr>

    <tr class="even">
    <td>adsfas</td>
    <td>dfasdf</td>
    <td>asdfadsf</td>
    <td>adfasdf</td>
    <td>adfadsf</td>
    <td>adsfadsf</td>
    <td>2010-08-27 14:14:00 UTC</td>
    <td>fadsfafd</td>
    <td>adsfasdfa</td>
    <td>172.16.3.201
    172.16.3.201
    255.255.255.255
    255.255.255.255
    255.255.255.255
    255.255.255.255
    255.255.255.255</td>
    <td class="adminFunctions"><a href="#">View</a></td>
    <td class="adminFunctions"><a href="#">Edit</a></td>
    <td class="adminFunctions"><a href="#">Delete</a></td>
    </tr>

    </table>
    </div>
    </div>
    </body>
    </html>
    • CommentAuthorjriddle
    • CommentTimeSep 3rd 2010 edited
     permalink
    Please note I had to trim some of my original CSS out. I am pretty sure I didn't remove any attributes that were needed. Below is an image of what is happening as well....

    http://yfrog.com/16tablebleedj

1 to 2 of 2

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page