www.webdeveloper.com
Results 1 to 3 of 3

Thread: simple <td> styling inside of a table.

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Unhappy simple <td> styling inside of a table.

    Here's my styling in a div that's around the table...

    .rxtrk { padding: 20px 40px 20px 20px;
    height: 175px; background:#dde;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
    position: relative; top: 1040px; z-index: 99999;

    }

    <div class="rxtrk">

    <table><tr><td></td></tr></table>
    </div>


    How do i call out specific styling on the td??? i forget.. sorry for such a noob question..

    Shouldn't it be something like: .rxtrk td { padding: 20px 40px 20px 20px; }


    thanks in advance.

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    WHY ? ? ? Why are you using a <table>? (Hopefully not for layout.)
    Why are enclosing the <table> in a <div>? Why don't you directly set up the CSS for the table?

    You can specify "contextual" or specific for an element as you show .rxtrk td { padding: 20px 40px 20px 20px; }

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    Jeffrey Zeldman's "Designing with Web Standards" http://alistapart.zeldman.com/dwws gave examples of styling <table> with CSS to move developers away from relying on <table> layout. Used following JZ CSS at http://www.ppbloch.com

    Code:
    @charset "UTF-8";
    /* CSS Document *//* CSS Document */
        /* J.Zeldman XHML sample i3forum.com  Jeffrey Zeldman's "Designing with Web Standards" http://alistapart.zeldman.com/dwws */
    body	{
    	color: #000;
    	background: #f5f2e9;
    	margin: 25px 0 25px 0;
    	padding: 0;
    	}
    	
    .hide	{
    	display: none;
    	}
    
    img {
    	display: block;
    	border: 0;
    	}
    	
    a:link {
    	font-weight : bold; 
    	text-decoration : none;
    	color: #c30;
    	background: transparent; 
    	}
    
    a:visited {
    	font-weight : bold; 
    	text-decoration : none;
    	color: #c30;
    	background: transparent; 
    	}
    
    a:hover {
    	font-weight : bold; 
    	text-decoration : underline;
    	color: #f60;
    	background: transparent; 
    	}
    
    a:active {
    	font-weight : bold; 
    	text-decoration : none;
    	color: #f90;
    	background: transparent;  
    	}
    	
    p, td, li, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6	{
    		font-family: Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
    		}
    
    h1	{
    	color: #000000; /* #dcd9d2; */
    	background: transparent;
    	font-size: 1.15em;
    	font-weight: bold;
    	font-style: italic;
    	}
    
    h2	{
    	font-size: 1em;
    	font-weight: normal;
    	margin-bottom: 0.25em;
    	margin-top: 0.5em;
    	}
    h3	{
    	color: #FFCC00;
    	background: transparent;
    	font-size: 1.15em;
    	font-weight: bold;
    	font-style: italic;
    	line-height: 1.3em;
    	}
    
    html p	{
    	margin-top: 0;
    	margin-bottom: 1em;
    	text-align: left;
    	font-size:  0.85em;
    	line-height: 1.5;
    	}
    
    #footer p	{
    	font-size: 11px;
    	margin-top: 10px;
    	margin-right: 50px;
    	margin-left: 50px;
    	line-height: normal;
    	}
    	
    /* Basic page divisions */
    
    #primarycontent	{
    	padding-left: 25px;
    	padding-top: 25px;
    	background-color:  #FFFFFF; /*floral white #FFFAF0; */
    	}
    #primarycontent	p {
    	font-family: Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
    	text-align: left;
    	text-indent: 2em;
    	margin-top: 0px;
    	margin-right: .5em;
    	margin-bottom: .5em;
    	margin-left: .5em;
    		}
    #content {
    	background: #FFFFFF; /* #FFFFFF url(/images/arrow.gif) no-repeat center bottom; */
    	border: thick outset #dcd9d2;
    	}
    
    /* Sidebar display attributes */
    
    #sidebar p	{
    	font-style: italic;
    	text-align: right;
    	margin-top: 0.5em;
    	}
    
    #sidebar img	{
    	margin: 30px 0 15px 0;
    	}
    	
    #sidebar h2	{
    	font-size: 1em;
    	font-weight: normal;
    	font-style: italic;
    	margin: 0;
    	line-height: 1.5;
    	text-align: right;
    	}
    
    /* Navigation bar components */
    
    table#nav	{
    	border-bottom: 1px solid #000;   /*bordercolor="#dcd9d2"*/
    	border-left: 1px solid #000;
    	background: transparent url(../MSNpics/Panorama.jpg) center repeat;
    	}
    
    table#nav td	{
    	font: 11px verdana, arial, sans-serif;
    	text-align: center;
    	border-right: 1px solid #000;
    	border-top: 1px solid #000;
    	}
    
    table#nav td a	{
    	font-weight: normal;
    	text-decoration: none;
    	display: block;
    	margin: 0;
    	padding: 0;
    	}
    	
    #nav td a:link, #nav td a:visited {
    	background: transparent; /* transparent url(/images/bgpat.gif) repeat; */
    	/* color: #fc0; */
    	display: block;
    	margin: 0;
    	width: 100px;
    	line-height: 25px;
    	} 
    
    #nav td a:hover {
    	color: #f60;
    	background: white;
    	} 
    td#home { background: transparent /*url(../MSNpics/Panorama.jpg) center no-repeat;*/ }
    
    td#home a:link img, td#home a:visited img {
    	color: #c30;
    	background: none; /* transparent url(/MSNpics/Panorama.jpg) center no-repeat; */
    	height: 75px;
    	} 
    
    td#home a:hover img {
    	color: #f60;
    	background: none; /* transparent url(/MSNpics/Panorama.jpg) center no-repeat; */
    	width: 400px;
    	height: 75px;
    	} 
    #sidebar {
    	background-color: #FFFFFF;
    }
    Hope this will help you.
    Last edited by auntnini; 11-30-2012 at 04:21 PM. Reason: cleanup CSS

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles