Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry 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
    -----------------------
    Code:
    @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
    -------------------------

    Code:
    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;
    	}

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Can we get a link to your site or the html code?

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by skywalker2208 View Post
    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!

    Code:
    <!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>

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump.... Anyone?

    Please and thank you.

  • #5
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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?

    Code:
    #foo table { /*style */
    #foo table td { /* td style */
    /*etc*/
    just append a #id to each element

    then

    Code:
    <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

  • Users who have thanked met for this post:

    Buzzy (05-08-2010)

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    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?

    Code:
    #foo table { /*style */
    #foo table td { /* td style */
    /*etc*/
    just append a #id to each element

    then

    Code:
    <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!

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is a lot of useful help here.

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •