Overriding CSS
I have a case where I inherited a bunch of css I don't understand. I need to keep most of it.
I'm trying to work with tables (HTML tables). I want to completely override whatever the cascading CSS is for tables in specific php pages (or think html).
How do I do that?
I'm trying to work with tables (HTML tables). I want to completely override whatever the cascading CSS is for tables in specific php pages (or think html).
How do I do that?
CKY092
Can you post an example of the CSS code and what specifically you'd like to override?
You can't really override everything without knowing what it is. Any local CSS will override what came before because that's the way CSS works. Note that tables often do not inherit CSS because they weren't originally designed to do so in the browsers. Yes, I know that the standard says they're supposed to but the browser writers keep it so that old code still works.
ASKER
In the code window is the code.
Go look at http://tchristy.net/login.php
You'll notice the gray horizontal lines at top & bottom & the alternate (every other row) light shading. I think it looks fine on THIS page but I want to be able to overcome it, I'm just startung on the admin side of this.
Note my feeble attempts to define "local" css (table.reg). The ones for td seem to have worked.
Go look at http://tchristy.net/login.php
You'll notice the gray horizontal lines at top & bottom & the alternate (every other row) light shading. I think it looks fine on THIS page but I want to be able to overcome it, I'm just startung on the admin side of this.
Note my feeble attempts to define "local" css (table.reg). The ones for td seem to have worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TChristy's</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/helveticatitle_400-helveticatitle_700.font.js"></script>
<script type="text/javascript" src="js/homevetica_italic_900.font.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]--> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
bad = "";
$(function() {
$('a[@rel*=lightbox]').lightBox({overlayOpacity: 0.6}); // Select all links that contains lightbox in the attribute rel
});
function chk_bad() {
if (bad == "1") {
alert("Invalid login.");
return true;
}
}
</script>
<style type="text/css">
table.reg { border-collapse: collaps; border-spacing: 0; background-color: white; height: auto; }
td.rt {text-align: right}
td.ct {text-align: center}
</style>
</head>
<body id="redhotglue" onload="chk_bad();">
<div class="container_12">
<!--Begin Header -->
<div id="header">
<div id="logo"><a href="index.php"><img src="images/logo-tchristy.gif" width="229" height="55" alt="IP Global homepage" /></a></div><!--End logo -->
<div id="quick_contact"><div id="chat"><strong>SEARCH</strong><br>
<form method="post" id="searchform" action="product_search.php">
<fieldset class="search">
<input type="text" class="box" name="stxt"/>
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form></div><div id="call">CALL: <strong>800-BLU-GLUE</strong><br>
FAX: <strong> 800-HOT-GLUE</strong><br>
<a href="#">SEND AN EMAIL</a></div>
</div><!--End quick contact --></div><!--End Header -->
<!--Begin Content -->
<div id="content">
<!--Begin Main -->
<div id="main">
<div class="grid_6"><h2>Admin Logon</h2>
<form method="POST" name="st" action="chk_login.php">
<table class="reg">
<tr>
<td class="rt" align="right">UserID: </td>
<td><input type="text" name="uid" size="20">
</tr>
<tr>
<td class="rt" align="right">Password: </td>
<td><input type="password" name="pwd" size="20">
</tr>
<tr>
<td class="ct" colspan="2" height="30" valign="bottom"><input type="submit" value="Login">
</tr>
</table>
<div class="rowclear"></div>
</form>
</div>
</div><!--End Main -->
<!--Begin Sidebar -->
<div id="sidebar">
<div id="arrowlistmenu">
<h3 class="menuheader expandable">Products</h3>
<ul class="categoryitems">
<li><a href="solvents_fixed.php">Solvent Cements, Primers & Cleaners</a></li>
<li><a href="product_groups.php?pr=sle&idxp=0&expandable=0&subexpandable=0" class="subexpandable" id="sle">Sealants, Lubricants, Epoxies </a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=sle&cat=Sealants&expandable=0&subexpandable=0&subsubexpandable=0" class="subsubexpandable" id="Sealants">Sealants</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=sle&cat=Sealants&subcat=Thread+Sealants&expandable=0&subexpandable=0&subsubexpandable=0" id="Thread Sealants">Thread Sealants</a></li>
</ul>
<li><a href="category.php?pr=sle&cat=Lubricants&expandable=0&subexpandable=0&subsubexpandable=1" class="subsubexpandable" id="Lubricants">Lubricants</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=sle&cat=Lubricants&subcat=Pipe+Lubricant&expandable=0&subexpandable=0&subsubexpandable=1" id="Pipe Lubricant">Pipe Lubricant</a></li>
</ul>
<li><a href="category.php?pr=sle&cat=Pipe+Wraps+%26+Epoxys&expandable=0&subexpandable=0&subsubexpandable=2" class="subsubexpandable" id="PipeWraps&Epoxys">Pipe Wraps & Epoxys</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=sle&cat=Pipe+Wraps+%26+Epoxys&subcat=Pipe+Wrap&expandable=0&subexpandable=0&subsubexpandable=2" id="Pipe Wrap">Pipe Wrap</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=tls&idxp=1&expandable=0&subexpandable=1" class="subexpandable" id="tls">Tools</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=tls&cat=Cutting+Tools&expandable=0&subexpandable=1&subsubexpandable=3" class="subsubexpandable" id="CuttingTools">Cutting Tools</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=tls&cat=Cutting+Tools&subcat=Blades+-+Reciprocating&expandable=0&subexpandable=1&subsubexpandable=3" id="Blades - Reciprocating">Blades - Reciprocating</a></li>
<li><a href="subcategory.php?pr=tls&cat=Cutting+Tools&subcat=Cable+Saw&expandable=0&subexpandable=1&subsubexpandable=3" id="Cable Saw">Cable Saw</a></li>
<li><a href="subcategory.php?pr=tls&cat=Cutting+Tools&subcat=Hand+Saw&expandable=0&subexpandable=1&subsubexpandable=3" id="Hand Saw">Hand Saw</a></li>
</ul>
<li><a href="category.php?pr=tls&cat=Long+Handle+Tools&expandable=0&subexpandable=1&subsubexpandable=4" class="subsubexpandable" id="LongHandleTools">Long Handle Tools</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=tls&cat=Long+Handle+Tools&subcat=Hammers&expandable=0&subexpandable=1&subsubexpandable=4" id="Hammers">Hammers</a></li>
<li><a href="subcategory.php?pr=tls&cat=Long+Handle+Tools&subcat=Shovel&expandable=0&subexpandable=1&subsubexpandable=4" id="Shovel">Shovel</a></li>
</ul>
<li><a href="category.php?pr=tls&cat=Plier&expandable=0&subexpandable=1&subsubexpandable=5" class="subsubexpandable" id="Plier">Plier</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=tls&cat=Plier&subcat=Channelock&expandable=0&subexpandable=1&subsubexpandable=5" id="Channelock">Channelock</a></li>
</ul>
<li><a href="category.php?pr=tls&cat=Wrench&expandable=0&subexpandable=1&subsubexpandable=6" class="subsubexpandable" id="Wrench">Wrench</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=tls&cat=Wrench&subcat=Adjustable+Wrench&expandable=0&subexpandable=1&subsubexpandable=6" id="Adjustable Wrench">Adjustable Wrench</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=jse&idxp=2&expandable=0&subexpandable=2" class="subexpandable" id="jse">Job Site Essentials</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=jse&cat=Electrical&expandable=0&subexpandable=2&subsubexpandable=7" class="subsubexpandable" id="Electrical">Electrical</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=jse&cat=Electrical&subcat=Cable+Ties&expandable=0&subexpandable=2&subsubexpandable=7" id="Cable Ties">Cable Ties</a></li>
</ul>
<li><a href="category.php?pr=jse&cat=Marking+Paint&expandable=0&subexpandable=2&subsubexpandable=8" class="subsubexpandable" id="MarkingPaint">Marking Paint</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=jse&cat=Marking+Paint&subcat=Quik-Mark+Construction%2FTurf+Marking+Paint&expandable=0&subexpandable=2&subsubexpandable=8" id="Quik-Mark Construction/Turf Marking Paint">Quik-Mark Construction/Turf Marking Paint</a></li>
<li><a href="subcategory.php?pr=jse&cat=Marking+Paint&subcat=Quik-Mark+Solvent+Based&expandable=0&subexpandable=2&subsubexpandable=8" id="Quik-Mark Solvent Based">Quik-Mark Solvent Based</a></li>
<li><a href="subcategory.php?pr=jse&cat=Marking+Paint&subcat=Quik-Mark+Survey+Marking+Paint&expandable=0&subexpandable=2&subsubexpandable=8" id="Quik-Mark Survey Marking Paint">Quik-Mark Survey Marking Paint</a></li>
<li><a href="subcategory.php?pr=jse&cat=Marking+Paint&subcat=Work+Day+All+Purpose+Marking+Paint&expandable=0&subexpandable=2&subsubexpandable=8" id="Work Day All Purpose Marking Paint">Work Day All Purpose Marking Paint</a></li>
</ul>
<li><a href="category.php?pr=jse&cat=Tape&expandable=0&subexpandable=2&subsubexpandable=9" class="subsubexpandable" id="Tape">Tape</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=jse&cat=Tape&subcat=Caution+Tape&expandable=0&subexpandable=2&subsubexpandable=9" id="Caution Tape">Caution Tape</a></li>
<li><a href="subcategory.php?pr=jse&cat=Tape&subcat=Duct+Tape&expandable=0&subexpandable=2&subsubexpandable=9" id="Duct Tape">Duct Tape</a></li>
<li><a href="subcategory.php?pr=jse&cat=Tape&subcat=Electrical&expandable=0&subexpandable=2&subsubexpandable=9" id="Electrical">Electrical</a></li>
<li><a href="subcategory.php?pr=jse&cat=Tape&subcat=Pipewrap+Tape&expandable=0&subexpandable=2&subsubexpandable=9" id="Pipewrap Tape">Pipewrap Tape</a></li>
<li><a href="subcategory.php?pr=jse&cat=Tape&subcat=PTFE+Tape&expandable=0&subexpandable=2&subsubexpandable=9" id="PTFE Tape">PTFE Tape</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=gt&idxp=3&expandable=0&subexpandable=3" class="subexpandable" id="gt">Geotextiles/Fabric</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=gt&cat=Drain+Filter+Fabric&expandable=0&subexpandable=3&subsubexpandable=10" class="subsubexpandable" id="DrainFilterFabric">Drain Filter Fabric</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=gt&cat=Drain+Filter+Fabric&subcat=Drain+Sock&expandable=0&subexpandable=3&subsubexpandable=10" id="Drain Sock">Drain Sock</a></li>
<li><a href="subcategory.php?pr=gt&cat=Drain+Filter+Fabric&subcat=Non-Woven&expandable=0&subexpandable=3&subsubexpandable=10" id="Non-Woven">Non-Woven</a></li>
</ul>
<li><a href="category.php?pr=gt&cat=Drain+Sock%2FGravel+Bags&expandable=0&subexpandable=3&subsubexpandable=11" class="subsubexpandable" id="DrainSock/GravelBags">Drain Sock/Gravel Bags</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=gt&cat=Drain+Sock%2FGravel+Bags&subcat=Drain+Sock&expandable=0&subexpandable=3&subsubexpandable=11" id="Drain Sock">Drain Sock</a></li>
</ul>
<li><a href="category.php?pr=gt&cat=Landscape+Fabric&expandable=0&subexpandable=3&subsubexpandable=12" class="subsubexpandable" id="LandscapeFabric">Landscape Fabric</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=gt&cat=Landscape+Fabric&subcat=Weed+Control&expandable=0&subexpandable=3&subsubexpandable=12" id="Weed Control">Weed Control</a></li>
<li><a href="subcategory.php?pr=gt&cat=Landscape+Fabric&subcat=Woven+Needlepunch&expandable=0&subexpandable=3&subsubexpandable=12" id="Woven Needlepunch">Woven Needlepunch</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=pwr&idxp=4&expandable=0&subexpandable=4" class="subexpandable" id="pwr">Polywrap</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=pwr&cat=20+inch+Perforation&expandable=0&subexpandable=4&subsubexpandable=13" class="subsubexpandable" id="20inchPerforation">20 inch Perforation</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=pwr&cat=20+inch+Perforation&subcat=Black&expandable=0&subexpandable=4&subsubexpandable=13" id="Black">Black</a></li>
<li><a href="subcategory.php?pr=pwr&cat=20+inch+Perforation&subcat=Clear&expandable=0&subexpandable=4&subsubexpandable=13" id="Clear">Clear</a></li>
<li><a href="subcategory.php?pr=pwr&cat=20+inch+Perforation&subcat=Purple&expandable=0&subexpandable=4&subsubexpandable=13" id="Purple">Purple</a></li>
</ul>
<li><a href="category.php?pr=pwr&cat=22+inch+Perforation&expandable=0&subexpandable=4&subsubexpandable=14" class="subsubexpandable" id="22inchPerforation">22 inch Perforation</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=pwr&cat=22+inch+Perforation&subcat=Black&expandable=0&subexpandable=4&subsubexpandable=14" id="Black">Black</a></li>
<li><a href="subcategory.php?pr=pwr&cat=22+inch+Perforation&subcat=Clear&expandable=0&subexpandable=4&subsubexpandable=14" id="Clear">Clear</a></li>
</ul>
<li><a href="category.php?pr=pwr&cat=Poly+Sleeve%2FSheeting&expandable=0&subexpandable=4&subsubexpandable=15" class="subsubexpandable" id="PolySleeve/Sheeting">Poly Sleeve/Sheeting</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=pwr&cat=Poly+Sleeve%2FSheeting&subcat=Clear&expandable=0&subexpandable=4&subsubexpandable=15" id="Clear">Clear</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=mp&idxp=5&expandable=0&subexpandable=5" class="subexpandable" id="mp">Marking Tape, ID Tags and Signs</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=mp&cat=ID+Tags&expandable=0&subexpandable=5&subsubexpandable=16" class="subsubexpandable" id="IDTags">ID Tags</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=mp&cat=ID+Tags&subcat=Maxi+Tags&expandable=0&subexpandable=5&subsubexpandable=16" id="Maxi Tags">Maxi Tags</a></li>
<li><a href="subcategory.php?pr=mp&cat=ID+Tags&subcat=Standard+Tags&expandable=0&subexpandable=5&subsubexpandable=16" id="Standard Tags">Standard Tags</a></li>
</ul>
<li><a href="category.php?pr=mp&cat=Marklng+Flags&expandable=0&subexpandable=5&subsubexpandable=17" class="subsubexpandable" id="MarklngFlags">Marklng Flags</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=mp&cat=Marklng+Flags&subcat=4+x+5%2C+21%22&expandable=0&subexpandable=5&subsubexpandable=17" id="4 x 5, 21"">4 x 5, 21"</a></li>
</ul>
<li><a href="category.php?pr=mp&cat=Marking+Tape&expandable=0&subexpandable=5&subsubexpandable=18" class="subsubexpandable" id="MarkingTape">Marking Tape</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=mp&cat=Marking+Tape&subcat=Detectable+Tape&expandable=0&subexpandable=5&subsubexpandable=18" id="Detectable Tape">Detectable Tape</a></li>
<li><a href="subcategory.php?pr=mp&cat=Marking+Tape&subcat=Non-Detectable+Tape&expandable=0&subexpandable=5&subsubexpandable=18" id="Non-Detectable Tape">Non-Detectable Tape</a></li>
</ul>
<li><a href="category.php?pr=mp&cat=Posts+%26+Decals&expandable=0&subexpandable=5&subsubexpandable=19" class="subsubexpandable" id="Posts&Decals">Posts & Decals</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=mp&cat=Posts+%26+Decals&subcat=Decals&expandable=0&subexpandable=5&subsubexpandable=19" id="Decals">Decals</a></li>
</ul>
<li><a href="category.php?pr=mp&cat=Specialty+Signage&expandable=0&subexpandable=5&subsubexpandable=20" class="subsubexpandable" id="SpecialtySignage">Specialty Signage</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=mp&cat=Specialty+Signage&subcat=Bi-Lingual&expandable=0&subexpandable=5&subsubexpandable=20" id="Bi-Lingual">Bi-Lingual</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=ww&idxp=6&expandable=0&subexpandable=6" class="subexpandable" id="ww">Waterworks Specialties</a>
<ul class="subcategoryitems">
<li><a href="category.php?pr=ww&cat=Waterworks+Tools&expandable=0&subexpandable=6&subsubexpandable=21" class="subsubexpandable" id="WaterworksTools">Waterworks Tools</a>
<ul class="subsubcategoryitems">
<li><a href="subcategory.php?pr=ww&cat=Waterworks+Tools&subcat=Manhole+Hook&expandable=0&subexpandable=6&subsubexpandable=21" id="Manhole Hook">Manhole Hook</a></li>
<li><a href="subcategory.php?pr=ww&cat=Waterworks+Tools&subcat=Test+Plate&expandable=0&subexpandable=6&subsubexpandable=21" id="Test Plate">Test Plate</a></li>
<li><a href="subcategory.php?pr=ww&cat=Waterworks+Tools&subcat=Wrench&expandable=0&subexpandable=6&subsubexpandable=21" id="Wrench">Wrench</a></li>
</ul>
</ul>
<li><a href="product_groups.php?pr=cf&idxp=7&expandable=0&subexpandable=7" class="subexpandable" id="cf">Copper Fittings</a>
<ul class="subcategoryitems">
</ul>
<li><a href="product_groups.php?pr=oth&idxp=8&expandable=0&subexpandable=8" class="subexpandable" id="oth">Other</a>
<ul class="subcategoryitems">
</ul>
</ul>
<h3 class="menuheader expandable" id="downloads">Downloads</h3>
<ul class="categoryitems">
<li><a href="catalog_brochure.php" id="catalog">Catalogs & Brochures</a></li>
<li><a href="price_lists.php" id="pricelists">Price Lists</a></li>
<li><a href="spec-sheets.php" id="specsheets">Spec Sheets</a></li>
</ul>
<h3 class="menuheader" id="MSDS">MSDS</h3>
<h3 class="menuheader expandable" id="technical">"How To" Guides</h3>
<ul class="categoryitems">
<li><a href="how-to-guides.php" id="howto">Guides</a></li>
<li><a href="videos.php" id="videos">Videos</a></li>
<li><a href="ask_expert.php" id="msds">Ask the Expert</a></li>
</ul>
<h3 class="menuheader expandable" id="ordering">Ordering</h3>
<ul class="categoryitems">
<li><a href="how-to-order.php" id="order">How to Order</a></li>
<li><a href="sales_reps.php" id="sales">Sales Representatives</a></li>
<li><a href="warehouse_locs.php" id="locations">Warehouse Locations</a></li>
</ul>
<h3 class="menuheader expandable" id="about">About Us</h3>
<ul class="categoryitems">
<li><a href="history.php" id="history">History</a></li>
<li><a href="contact-us.php" id="contact">Contact Us</a></li>
<li><a href="whats_new.php" id="whatsnew">What's New</a></li>
<li><a href="join_maillist.php" id="maillist">Join Our Mailing List</a></li>
</ul>
</div><!--End Arrowlist Menu --><!--End Promobox -->
</div><!--End Sidebar -->
</div><!--End Content -->
<!--Begin Footer -->
<div id="footer">© 2011 T. Christy Enterprises, Inc. All rights reserved.</div>
<!--End Footer -->
</div><!--End Container -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
The borders you referred to are coming from the typography.css file.
As you can see, you have a 2px border defined for the top and bottom of the table. You can either delete those two lines from typography.css or redefine the css for those elements on the specific page you're working on.
table {
[b] border-bottom: 2px solid #BBBBBB;[/b]
border-collapse: collapse;
margin-top: 5px;
position: relative;
}
tr:first-child td {
[b]border-top: 2px solid #BBBBBB;[/b]
}As you can see, you have a 2px border defined for the top and bottom of the table. You can either delete those two lines from typography.css or redefine the css for those elements on the specific page you're working on.
ASKER
CKY092:
I figured that was somewhere, I couldn't find it.
Why can I define my table.reg in the local css in my file (like I did) & have that OVERRIDE that css?
I figured that was somewhere, I couldn't find it.
Why can I define my table.reg in the local css in my file (like I did) & have that OVERRIDE that css?
CCS builds upon itself. So unless you redefined the borders, they're going to come from the preceding definition, which in this case came from typography.css.
In your definition of table.reg, you didn't address the borders in a way that conflicted with their previous definition.
In your definition of table.reg, you didn't address the borders in a way that conflicted with their previous definition.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.