New css affecting earlier code

Hello,

I am using the below css from a template but modified for my needs. The below works fine.

My problem is the below "Table" code from here:

http://icant.co.uk/csstablegallery/index.php?css=85#r85

is not performing as intended. The elements or classes from orig css is affecting the add in css of the table.

I tried divs but must be doing it wrong. Can someone help me with how to implement the "table" (both css and html) so the table does not inherit attributes from the earlier css?

Many thanks!

------------------------
ORIG CSS
-----------------------


@charset "utf-8";
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
color: #000000;
}
h1 {
color:#383838;
font-size:21px;
}
#container {
width: 898px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}

#container2 {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #000000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}

#header {
background: #DDDDDD;
width: 900px;
height: 316px;
}
#header .headerBackground {
width:900px;
height:270px;
background:url(../images/topbanner3.jpg) no-repeat left top;


<div class="imgmap_css_container" id="imgmap201034153646"><a style="position: absolute; top: 67px; left: 510px; width: 59px; height: 33px;" alt="" title="" href="index.html" target="_self" ><em></em></a><a style="position: absolute; top: 11px; left: 7px; width: 302px; height: 70px;" alt="" title="" href="index.html" target="_self" ><em></em></a><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></div>



}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 230px 372px 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-family:Times, Arial, Helvetica, sans-serif;
color:#5f5f5f;
text-align:right;
font-size:17px;
}
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 228px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
margin:34px 40px 20px 0;
color:#222222;
font-weight: normal;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

#sidebar1 a {
color:#222222;
font-weight: normal;
}

#sidebar1 h1 {
color:#222222;
font-weight: normal;
font-family:Arial, Helvetica, Times New Roman;
font-size:18px;
}

#sidebar1 h2 {
color:#222222;
font-weight: bold;
font-family:Times New Roman;
font-size:14px;
}

#mainContent a {
color:#222222;
font-weight: bold;
}

#mainContent2 a {
color:#222222;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:right;
}

#mainContent3 a {
color:#222222;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:right;
}

#mainContent a:link {color:#222222} /* unvisited link */
#mainContent a:hover {color:#ba1b06} /* mouse over link */

#mainContent2 a:link {color:#ba1b06} /* unvisited link */
#mainContent2 a:hover {color:#222222} /* mouse over link */

#mainContent3 a:link {color:#222222} /* unvisited link */
#mainContent3 a:hover {color:#ffffff} /* mouse over link */

#sidebar1 a:link {color:#708090} /* mouse over link */
#sidebar1 a:hover {color:#ba1b06} /* mouse over link */


#mainContent {
margin: 20px 280px 20px 40px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
.imageFile {
float:left;
margin:0 20px 15px 0;
}
#footer {
height:90px;
background:url(../images/footerBackground_b.jpg) repeat-x left top;
}
.rss {
float:right;
width:212px;
margin:16px 0 0 20px;
}
#footer p {
padding-top:28px;
margin:0 0px 0 0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
}
.footerLink {
color:#ffffff;
text-decoration:underline;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*begin main menu*/
#navcontainer {
margin:auto 0;
width:900px;
text-align:center;
}
#navcontainer ul {
padding: 0;
margin: auto 0;
background: url(../images/menuBackground.gif) repeat-x left top;
float: left;
width: 100%;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
color: #626161;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
font-size:16px;
padding:11px 35px;
}
#navcontainer ul li a:hover {
background: url(../images/menuBackgroundActive_b.gif) repeat-x left top;
color: #fff;
}
#navcontainer ul li #current {
background: url(../images/menuBackgroundActive_b.gif) repeat-x left top;
color: #fff;
}

.contactform {width:500px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

/*end main menu*/
/* begin border corners*/
.t {background: #ffffff url(../images/dot.gif) 0 0 repeat-x;}
.b {background:url(../images/dot.gif) 0 100% repeat-x}
.l {background:url(../images/dot.gif) 0 0 repeat-y}
.r {background:url(../images/dot.gif) 100% 0 repeat-y}
.bl {background:url(../images/bl.gif) 0 100% no-repeat}
.br {background:url(../images/br.gif) 100% 100% no-repeat}
.tl {background:url(../images/tl.gif) 0 0 no-repeat}
.tr {background:url(../images/tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end border corners*/
/* begin news border corners*/
.n_t {background: #eeeeee url(../images/n_dot.gif) 0 0 repeat-x;}
.n_b {background:url(../images/n_dot.gif) 0 100% repeat-x}
.n_l {background:url(../images/n_dot.gif) 0 0 repeat-y}
.n_r {background:url(../images/n_dot.gif) 100% 0 repeat-y}
.n_bl {background:url(../images/n_bl.gif) 0 100% no-repeat}
.n_br {background:url(../images/n_br.gif) 100% 100% no-repeat}
.n_tl {background:url(../images/n_tl.gif) 0 0 no-repeat}
.n_tr {background:url(../images/n_tr.gif) 100% 0 no-repeat; padding:1px 20px}
/* end news border corners*/



-------------------------
TABLE CSS
-------------------------



table {
width: 550px;
border:1px solid #000000;
border-spacing: 0px; }

table a, table, tbody, tfoot, tr, th, td {
font-family: Arial, Helvetica, sans-serif;
}

table caption {
font-size: 1.8em;
text-align: left;
text-indent: 100px;
background: url(../images/bg_caption.gif) left top;
height: 40px;
color: #FFFFFF;
border:1px solid #000000; }

thead th {
background: url(../images/bg_th.gif) left;
height: 21px;
color: #FFFFFF;
font-size: 0.8em;
font-family: Arial;
font-weight: bold;
padding: 0px 7px;
margin: 20px 0px 0px;
text-align: left; }

tbody tr { background: #ffffff; }

tbody tr.odd { background: #f0f0f0; }

tbody th {
background: url(../images/arrow_white.gif) left center no-repeat;
background-position: 5px;
padding-left: 40px !important; }

tbody tr.odd th {
background: url(../images/arrow_grey.gif) left center no-repeat;
background-position: 5px;
padding-left: 40px !important; }

tbody th, tbody td {
font-size: 0.8em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
padding: 10px 7px;
border-bottom: 1px solid #800000;
text-align: left; }

tbody a {
color: #000000;
font-weight: bold;
text-decoration: none; }

tbody a:hover {
color: #ffffff;
text-decoration: underline; }

tbody tr:hover th {
background: #800000 url(../images/arrow_red.gif) left center no-repeat;
background-position: 5px;
color: #ffffff; }

tbody tr.odd:hover th {
background: #000000 url(../images/arrow_black.gif) left center no-repeat;
background-position: 5px;
color: #ffffff; }

tbody tr:hover th a, tr.odd:hover th a {
color: #ffffff; }

tbody tr:hover td, tr:hover td a, tr.odd:hover td, tr.odd:hover td a {
background: #800000;
color: #ffffff; }

tbody tr.odd:hover td, tr.odd:hover td a{
background: #000000;
color: #ffffff; }

tfoot th, tfoot td {
background: #ffffff url(../images/bg_footer.gif) repeat-x bottom;
font-size: 0.8em;
color: #ffffff;
height: 21px;
}

Can we get a link to your site or the html code?

Can we get a link to your site or the html code?

Sure. The site is not uploaded anywhere. Work in progress.

When I make a separate page with just the "table" html and call just the table css (i.e. no other formating css), it works fine as illustrated in this link:
http://icant.co.uk/csstablegallery/index.php?css=85#r85 which leads me to conclude it is inheriting other elements from the original css.

Basically, I am trying to use this to incorporate a basic directory. (name, email, phone.) As you can see from the working example it alternates (even / odd) from white to offwhite with black text. Upon mousing over any part, the backgrounds alternate (again even/odd) to red and black bg with WHITE text.

Mine works with the exception of the name area (i.e. Joe blow, etc.) The name remains black instead of white on mouse over. Only if you mouse directly on "joe" does it turn white w/ underline.

Sorry for the long response - I am a newbie and this frusterates me!

Here is the HTML code and I am most appreciative of yours (or anyones) help.

tHANKS!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site name</title>
<link href="../css/style2.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
</head>
<body>
<!-- begin #container -->
<div id="container2">
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="headerBackground"><h1>www.whatever.com</h1></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="../index.html" id="current">About </a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<!-- begin #sidebar1 -->
<div id="sidebar1">
<div class="n_t">
<div class="n_b">
<div class="n_l">
<div class="n_r">
<div class="n_bl">
<div class="n_br">
<div class="n_tl">
<div class="n_tr">
<h1>side bar title here.</i></h1>
<p>
Side bar text paragraph here

</p>
<!--
<p>
<b>August 1, 2009</b><br />
Tempus Duis tempor posuere diam. Suspendisse quis nunc malesuada porta.<br />
<a href="">see more...</a>
</p>
<p>
<b>July 28, 2009</b><br />
Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br />
<a href="">see more...</a>
</p>
-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<!--
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
-->
<h1></h1>
<p><A HREF="contact.html"><img src="../images/contact_img.gif" border=0></a>
</p>
<p><img src="../images/about_gr.jpg">
</p>
<!--
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-->
</div>
<!-- end #sidebar1 -->
<!-- begin #mainContent -->
<div id="mainContent">
<FONT FACE=ARIAL SIZE=1 COLOR=999999><B>whatever.com</B></FONT FACE=ARIAL SIZE=1 COLOR=999999>
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<h1>Main content title</h1>
<p>
PAGE TEXT HERE

</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">

<!-- begin #mainContent3 -->
<div id="mainContent3">
<table summary="pi listing">

<caption>DIRECTORY TITLE</caption>

<thead>

<tr>

<th scope="col">Name</th>

<th scope="col">ADDRESS</th>

<th scope="col">PHONE</th>


</tr>

</thead>

<tfoot>

<tr>

<th scope="row">TOTAL </th>

<td colspan="4">41</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="col"><a href="url.html">Joe Blow</a></th>

<td>123 anywhere AVE</a></td>

<td>416-1982</td>


</tr>

<tr class="odd">

<th scope="row"><a href="url.htm">Johnny Couch</a></th>

<td>324 here rd</td>

<td>416-1987</td>

</tr>

</tr>
</tbody>
</table>
</div></div>

<div id="mainContent2">
<img src="images/arrow_right2.gif" alt="" align="left" /><a href=""><i>Other areas ...</i></a><br /><BR />
</div id="mainContent">
</p><br />

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end #mainContent -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- begin #footer -->
<div id="footer">
<p>
<b>www.sitename.com</b><br />
<a href="index.html" class="footerLink"> | Home |</a><br>
<a href="about_top_toronto_lawyers.html" class="footerLink">About |</a>
<a href="find.html" class="footerLink">Find |</a>
<a href="contact.html" class="footerLink">contact|</a>
<a href="sitemap.html" class="footerLink">SiteMap</a>
</p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
<P>
</body>
</html>

Bump.... Anyone?

Please and thank you.

its too hard (annoying) to diagnose with out a link

If i get you correctly, you want only tables you specify to have a certain style?


#foo table { /*style */
#foo table td { /* td style */
/*etc*/


just append a #id to each element

then


<div id="foo">
<table><!--etc-->
</div>


the css only applies to table/td/th elements within a #foo div.

alternatively

table#foo applies to any table with an ID of foo.

you also have an awful lot of <DIVS> in your code, which is messy

its too hard (annoying) to diagnose with out a link

If i get you correctly, you want only tables you specify to have a certain style?


#foo table { /*style */
#foo table td { /* td style */
/*etc*/


just append a #id to each element

then


<div id="foo">
<table><!--etc-->
</div>


the css only applies to table/td/th elements within a #foo div.

alternatively

table#foo applies to any table with an ID of foo.

you also have an awful lot of <DIVS> in your code, which is messy

ARE YOU FREAK'N KIDDING ME?! FOO! FOO?

I Drove myself bonkers for 2 days before posting here for f@$k'n foo!

Thank you mate. Works like it should now.

As for the divs.... I'm an idiot...a newb if you will...... Just learning - yet know enough to be dangerous.

Many thanks!:thumbsup:

There is a lot of useful help here (http://www.exitfegs.co.uk/Sources.html).

Use the search facility. The fewer the search words, the better.

Frank