Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Class not working with id

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #45060
    cstadnyk1
    Member

    Hi everyone, first time poster here so go easy. I have an html form with a table in it and I have a seperate CSS file. Before I added in the table everything worked. Here is the html page:

    And the corresponding CSS:

    #container
    {
    width: 100%;
    margin: 0 auto;
    background: #CCC;
    font-family:”Arial”;
    }

    #header
    {
    background: #6C0;
    padding: 20px;
    }

    #header h1 { margin: 0; }

    #navigation
    {
    float: left;
    width: 100%;
    background: #666;
    }

    #navigation ul
    {
    margin: 0;
    padding: 0;
    }

    #navigation ul li
    {
    list-style-type: none;
    display: inline;
    }

    #navigation li a
    {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
    }

    #navigation li a:hover { background: #383; }

    #content
    {
    float:left;
    width: 100%;
    padding: 20px 0;
    margin: 1%;
    }

    table.cruises {
    table-layout:auto;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0;
    border-collapse: collapse;
    width: 100%;
    }

    table.cruises th, table.cruises td {
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 2px 4px;
    }

    table.cruises th {
    background: #6b6164;
    color: white;
    font-variant: small-caps;
    width:100%;
    }

    table.cruises td {
    background: #eee;
    overflow:hidden;
    }

    div.scrollableContainer {
    position:fixed;
    padding-top: 1.7em;
    margin: 40px;
    border: 1px solid #999;
    background: #aab;
    background: #6b6164;
    }

    div.scrollingArea {
    height: 200px;
    overflow: auto;
    }

    table.scrollable thead tr {
    left: -1px; top: 0;
    position: absolute;
    width:100%;
    }

    table.cruises td.operator { background: #ebcb4d; }
    table.cruises td.tonnage { background: white; }
    table.cruises td.name { background: #C7E0C1; }
    table.cruises td.began { background: #B7C3E8; }

    table.cruises .name { width: 108px; }
    table.cruises .operator { width: 126px; }
    table.cruises .began { width: 76px; text-align:center; }
    table.cruises .tonnage { width: 60px; text-align:center; }
    table.cruises .status { width: 160px; }

    #content h2
    {
    margin: 0;
    }

    #footer
    {
    clear: both;
    background: #6C0;
    text-align: right;
    padding: 20px;
    height: 1%;
    }

    Now the table is displayed fine on my page. But it is like the table is just floating in the middle. I believe the problem is to do with the classes and the ids and they are conflicting in some way but I do not know how to fix this. I want it to be between the header and footer but it just overlaps the footer and looks gross. If someone knows why it isnt working that would be great!

    Thanks!

    #136249
    CrocoDillon
    Participant

    div.scrollableContainer {
    position:fixed;

    I think that’s your problem.

    EDIT: I’m too slow.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.