Page 1 of 1
css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 6:27 am
by insight
OK, best way I can explain this is:
Code: Select all
.admin-navbar
{
border-left: 1px solid #494A48;
border-right: 1px solid #71736E;
height: 20px;
padding-left: 2px;
padding-right: 2px;
}
.admin-navbar a:hover
{
background-image:url(images/navlink.png);
}
.admin-navbar a:link, a:visited, a:hover
{
color: #D6D6D6;
text-decoration: none;
}
For some odd reason, the text decoration and color of .admin-navbar affects ALL links on the page. Why is this, I don't want it too and I can't seem to change the color of other links by typing in a color in their tag or id for example:
Code: Select all
.con-tent (even if I type a:link)
{
color: #000;
background-color: #FFF;
border: 1px solid #CCCCCC;
height: 100%;
padding: 3px;
width: 100%;
}
The color for all links in .con-tent still show the color and text decoration of .admin-navbar. Can someone help me fix this?
Re: css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 6:38 am
by onion2k
You didn't share your HTML, but I imagine it'll be because the styles cascade to elements inside whatever has the .admin-navbar class (hence the cascading in Cascading Style Sheets).
Re: css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 7:58 am
by insight
onion2k wrote:You didn't share your HTML, but I imagine it'll be because the styles cascade to elements inside whatever has the .admin-navbar class (hence the cascading in Cascading Style Sheets).
Sorry, I'm learning php and a lot of my html is done in php. But here is some of it.
One file
Code: Select all
<td class="con-left" valign="top">
<div style="padding-bottom: 15px;">
<table cellspacing="0" class="con-block">
<thead><tr><td class="con-header">Menu</td></tr></thead>
<tbody><tr>
<td class="con-body">
<table class="con-tent">
<tr><td><a href="index.php?file=News">Home</a></td></tr>
<tr><td><a href="index.php?file=Admin">Administration</a></td></tr>
</table>
</td>
</tr></tbody>
</table>
</div>
</td>
Another file
Code: Select all
<div id="admin-navbar">
<table cellspacing="0px"><tr>
<td class="admin-navbar"><a href="index.php?file=Admin">Home</a></td>
<td class="admin-navbar"><a href="index.php?file=Admin&page=Menu">Menu</a></td>
<td class="admin-navbar"><a href="index.php?file=Admin&page=Modules">Modules</a></td>
</tr></table>
</div>
The color and text decoration is done in .admin-navbar (not #admin-navbar) which is placed on it's own inside the con-tent (in another table) yet it affects the links all over the page.
Code: Select all
body
{
color: #000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0 auto;
padding: 10px;
}
#border-top
{
background-color: #000;
background-image:url(images/header/bgimg.png);
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
border: 1px solid #000;
height: 50px;
}
#module-menu
{
background-color: #464646;
border-left: 1px solid #464646;
border-right: 1px solid #464646;
height: 25px;
}
#page
{
background-color: #8B8B8B;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border: 1px solid #8B8B8B;
padding: 10px;
}
#module-login
{
background-color: #2C2C2C;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #CCCCCC;
padding: 10px;
}
/**************/
/**Top Blocks**/
/**************/
#module-top-blocks
{
background-color: #2C2C2C;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #CCCCCC;
padding: 10px;
height: 150px;
}
.module-top-blocks
{
width: 100%;
height: 100%;
border: 1px solid #CCCCCC;
}
.mtbl, .mtbr
{
height: 100%;
vertical-align: top;
width: 350px;
}
.mtbc
{
height: 100%;
vertical-align: top;
width: 100%;
}
/******************/
/**Content Blocks**/
/******************/
#content
{
background-color: #2C2C2C;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #CCCCCC;
padding: 10px;
}
.con-left, .con-right
{
height: auto;
width: 160px;
}
.con-left
{
padding-right: 15px;
}
.con-right
{
padding-left: 15px;
}
.con-details
{
background-image:url(images/header/con-details.png);
border-bottom: 1px solid #CCCCCC;
padding-left: 5px;
}
.con-block
{
border: 1px solid #CCCCCC;
height: auto;
width: 100%;
}
.con-header
{
background-image:url(images/header/con-header.png);
border-bottom: 1px solid #CCCCCC;
height: 30px;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.con-body
{
background-color: #414141;
padding: 3px;
}
.con-tent
{
background-color: #FFF;
border: 1px solid #CCCCCC;
height: 100%;
padding: 3px;
width: 100%;
}
/******************/
/**Administration**/
/******************/
.admin-legend
{
font-weight: bold;
color: #36C;
}
#admin-navbar
{
background-color: #36C;
background-image: url(images/navunlink.png);
height: 20px;
font-weight: bold;
text-decoration: none;
}
.admin-navbar
{
border-left: 1px solid #494A48;
border-right: 1px solid #71736E;
height: 20px;
padding-left: 2px;
padding-right: 2px;
}
.admin-navbar a:hover
{
background-image:url(images/navlink.png);
}
.admin-navbar a:link, a:visited, a:hover
{
color: #D6D6D6;
text-decoration: none;
}
#admin-title
{
font-size: 24px;
color: #06C;
background-color: #FFFFFF;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #CCCCCC;
padding: 2px;
}
#admin-menu
{
background-color: #FFFFFF;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #CCCCCC;
padding: 10px;
}
.tbl
{
border-right: 1px solid #B9D9FF;
border-bottom: 1px solid #B9D9FF;
}
I'll be fixing the CSS up later, I have it set out as it is to make it easier for me to apply settings for each individual class or id then I'll be putting them together to shorten it.
Code: Select all
<?php include("include/indent.php"); ?>
<?php include("include/doctype.php"); ?>
<body bgcolor="#2C2C2C">
<div id="border-top"><a href="http://www.insight.atbhost.net/"><table cellspacing="0" width="100%"><tr><td align="left"><img border="0" src="themes/default/images/header/header.png" alt="header" /></td></tr></table></a></div>
<div id="module-menu">boo</div>
<div id="page">
<div id="module-login">boo</div><br />
<div id="module-top-blocks">
<table cellspacing="0" class="module-top-blocks"><tr><td class="mtbl">boo</td><td class="mtbc">boo</td><td class="mtbr">boo</td></tr></table>
</div><br />
<div id="content">
<table cellspacing="0" width="100%">
<tr>
<td class="con-left" valign="top">
<div style="padding-bottom: 15px;">
<table cellspacing="0" class="con-block">
<thead><tr><td class="con-header">Menu</td></tr></thead>
<tbody><tr>
<td class="con-body">
<table class="con-tent">
<tr><td><a href="index.php?file=News">Home</a></td></tr>
<tr><td><a href="index.php?file=Admin">Administration</a></td></tr>
</table>
</td>
</tr></tbody>
</table>
</div>
</td>
<td valign="top">
<div style="padding-bottom: 15px;">
<?php
$page = $_GET['file'];
$pages = array('News', 'Forum', 'Gallery', 'Admin', 'Shoutbox');
if (!empty($page)) {
if(in_array($page,$pages)) {
include("modules/" . $page . "/index.php");
}
else {
include("modules/Error/notfound.php");
}
}
else {
include("modules/News/index.php");
}
?>
</div>
</td>
<td class="con-right" valign="top">
<div style="padding-bottom: 15px;">
<table cellspacing="0" class="con-block">
<thead><tr><td class="con-header">boo</td></tr></thead>
<tbody><tr>
<td class="con-body">
<table class="con-tent"><tr><td>boo</td></tr></table>
</td>
</tr></tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
<div style="text-align: center; width: 100%;"><span style="font-size: 11px;">Hosted by <a href="http://atbhost.net/">ATBHost.net</a></span></div>
</body>
</html>
Re: css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 9:45 am
by Eran
The problem is here:
Code: Select all
.admin-navbar a:link, a:visited, a:hover
every element separated by comma needs the full element chain. should be:
Code: Select all
.admin-navbar a:link, .admin-navbar a:visited, .admin-navbar a:hover
Re: css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 9:52 am
by insight
pytrin wrote:The problem is here:
Code: Select all
.admin-navbar a:link, a:visited, a:hover
every element separated by comma needs the full element chain. should be:
Code: Select all
.admin-navbar a:link, .admin-navbar a:visited, .admin-navbar a:hover
I see. I take it if I do not do this then it will add it to everything?
This could be an example of why I had so much troubles with it at TAFE (school). I'll give it a go and see how it goes. Cheers

Re: css style for one tag affects others, why?
Posted: Thu Jul 30, 2009 9:56 am
by insight
Worked like a charm, thanks a ton
