CODEWITHSUNDEEP
htmlcss
Corey Stadnyk
Corey Stadnyk

Reputation: 57

CSS class conflicting with CSS id

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:

<body>
<div id="container">
<div id="header">
  <h1>

  </h1>
</div>

<div id="navigation">
  <ul>

  </ul>
</div>


    <div id="content">
    <h2>

    </h2>   

      <div class="scrollableContainer">
        <div class="scrollingArea">

         <table class="cruises scrollable">
          <thead>

            <tr> 
            </tr> 

          </thead>

           <tbody>

            <tr> 
            </tr> 

           </tbody>

          </table>  
         </div>
         </div> 

    </div>

      <div id="footer">

      </div>
 </div>
</body>

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!

Upvotes: 0

Views: 160

Answers (2)

lockedown
lockedown

Reputation: 614

One thing you might want to remember in the future is CSS specificity. It takes 256 chained classes to override a single id rule. Don't use id's unless you have a good reason to, and you will find that some of your problems will dissipate.

http://css-specificity.webapp-prototypes.appspot.com/

Upvotes: 0

Adam Tal
Adam Tal

Reputation: 5961

Remove the position:fixed from your .scrollableContainer in your css. It is what causing your table to float.

Here is a JSFiddle of your code: http://jsfiddle.net/wpkaJ/

Here it is after my suggestion: http://jsfiddle.net/wpkaJ/1/

Upvotes: 1

Related Questions