CSS Class not working with id

[cstadnyk1]

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!

[CrocoDillon]

div.scrollableContainer {
position:fixed;

I think that’s your problem.

EDIT: I’m too slow.

[Author]

Posts