css style for one tag affects others, why?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
insight
Forum Commoner
Posts: 52
Joined: Tue Jul 07, 2009 9:12 am

css style for one tag affects others, why?

Post 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?
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: css style for one tag affects others, why?

Post 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).
insight
Forum Commoner
Posts: 52
Joined: Tue Jul 07, 2009 9:12 am

Re: css style for one tag affects others, why?

Post 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>
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: css style for one tag affects others, why?

Post 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
insight
Forum Commoner
Posts: 52
Joined: Tue Jul 07, 2009 9:12 am

Re: css style for one tag affects others, why?

Post 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 :D
insight
Forum Commoner
Posts: 52
Joined: Tue Jul 07, 2009 9:12 am

Re: css style for one tag affects others, why?

Post by insight »

Worked like a charm, thanks a ton :wink:
Post Reply