CSS - Class Inheritance Remains A Mystery.

Forget it, I solved the issue. How does one delete a post like this...

Hi gang,

First of all, take a look at this page: http://www.cheeyewear.com.au/news.php

I've made a website for a client and they are saying they can't use/interact with the menu on the right. I've tested every browser PC and Mac and they are all working fine. It happened after I added in the new footer code but I can't re-produce the issue at all. She says she sees the issue "Safari and at work Google Chrome". I know she uses a PC at her work. She's finding the same issue with this page: http://www.cheeyewear.com.au/eye_testing.php

Can anyone else out there no interact with the right column on these pages??

Thanks!!
Ham

I thought it might have been carriage returns, but it's not. For some reason, Textwrangler is showing either question marks (for firefox for windows) or little boxes (for IE for windows). The problem isn't happening for Safari or FF for mac.

I can't figure out what it is.

the site

Hi,

Okej I searched on the internet about this, and did not find what I was really searching for. What I found on the net is that the css code set for one div is inherited by the div's inside it.

This is not what I mean by this. I come from the Object Oriented programming world, a place where inheritance allows to remove a lot of duplicated code.

I was wondering wheather there is something like that in CSS. For example imagine I have a CSS block that just defines the color of the text, is there a way where I can make another block inherit from the previos CSS block? example: Code:

 .parent {
   color: #cc0000;
}

.child {
  /* This would extend the parent block.  */
}

That means if I have a div and set the class as being child then the text of that class would be #000000.

Is this somehow possible in CSS?

thanks and regards,
sim085

Here's the page: www.rodenator.com/index2.html

Theoretically, I need all of the links on the entire site (save for the ones in the left hand nav bar (i.e. navlinks) to be similar EXCEPT in the horizontal top and footer bars where I need the <a>'s need to be white.

Code:

a {color:blue;}
#navbar a {color:white;}
#footer a {color:white;}
a:hover {color:orange;}
a:active {color:grey;}

The trouble I'm running into is inheritance. I would like to set all a{}, a:hover{}, and a:active{} the same, and then simply change a{} on #navbar and #footer. But when I specify #navbar a{} and #footer a{}, those rules override the a:hover{} and a:active{}. (even if I put those rules higher in the ss)

?!?!?!

TIA (and I hope I was clear enough in the explanation)

I am wondering if it is possible to use previously defined CSS variables in later css definitions? I currently have a font type css variable called "texto1" that I would like to use in conjuction with an "input" variable that defines positioning and the size of my input types. Is this possible??

Code:

--both of the following need the previously specified font called "texto1"--
input.addRemoveButton {width:75px;}
input.inputBox {width:150px;}

Thanks for any help

I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system.

Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up?

I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible.

Surely there must be a way to disable inheritance for a block...?

Hi There -

Am having some confusion with CSS inheritance.

I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms.

I have a large container div with id=forum.
Nested inside a table inside that div are more divs.
Inside of that I have links inside a div that has class=name.

Like this:
Code:

<div id="forum">
<ul>
</ul>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td class="container" colspan="4">
<div style="margin-left: 0px;">
<div class="name">
</div>
<div class="description">Containers that will look OK as and when we decide to use forum Containers.</div>
</div>
</td>
</tr>
<tr class="even">
<td class="forum">
<div style="margin-left: 30px;">
<div class="name">
<a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a>
</div>

How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this.

Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above.

Here's what I was trying to use:
Code:

#forum .name a:link, a:visited, a:hover {
color:#F79239;
}

I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.

Greetings,

I'm encountering a challenge I can't seem to figure though... could someone kindly assist?

I'm writing a page with the following structu

=====HTML====

<div id=#boxClear>

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

====== CSS=====

#boxClear {
settings
}

#boxClear table {
settings
}

#boxClear tr.heading {
settings
}

For some reason, the following seem to be true:

A) Styling set at the DIV level don't carry down to the TD level.
B) Styling set at the table level doesn't carry down to the TD level
B) Classes set at the TR level don't work; only settings within the TD actually work.

What's up with my structure?? It seems like it should all work?

Thanks for your suggestions!
--Dave

I have a table that uses style sheets:
<table class="Border">
but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this?

Thanks!
Scott.

Look at this page - http://www.pacunionsonoma.com/real-estate-agent.asp

See the links under each agent, one for Profile, one for Email. No matter how I try specify a new attribute in the page top, such as color, size, etc. it will not work unless I hard code it into each element. I tried the !important quality but no dice, unless I hard code it into the element it is useless...

this code inherits properly in FF, but not in IE. any workarounds?

Code:

.red
  {
    background:red;
  }

.yellow
  {
    background:yellow;
  }

.red.yellow
  {
    background:purple;
  }

Code:

<table border=1>
<tr class="red"><td>red</td></tr>
<tr class="yellow"><td>yellow</td></tr>
<tr class="red yellow"><td>red yellow</td></tr>
</table>

Hi all, wondering if anyone can help.

I'm trying to add multiple backgrounds to a table header, but using two separate elements. Below is the code I have

Code:

<style>
table.blockListing tr.header{
	text-align:left;
	background-color:#dad2c9;
	padding:10px;
	background-image:url(images/blockTop.gif);
	background-position:top;
	background-repeat:repeat-x;					
}
table.blockListing tr.header th {
	background-color:transparent;
	background-image:url(images/blockBottom.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}			
</style>

<table cellpadding="0" cellspacing="0" class="blockListing">
<tr class="header">
	<th colspan="2">Tagging<br /><br /><br /></th>
</tr>
<tr>
	<td>Meta title</td>
	<td><input type="text" /></td>
</tr>
<tr>
	<td>Description</td>
	<td><textarea cols="10" rows="4"></textarea></td>
</tr>
<tr>
	<td>Other Text</td>
	<td>Test test test test</td>
</tr>
</table>	

Now in Firefox I receive the expected result. An image appears at the top of the TR and another images appears at the bottom of the TH.

However in IE only the bottom image is shown. The top image is removed. If I remove the styling for the bottom image, then the top appears.

Any anyone encountered this?

I'm trying to override an invisible <hr /> tag that I'm using to stretch my overall container to fit whatever content goes in. It works fine, but I want to also use a visible <hr /> within the content. I've tried giving it it's own class, but no dice. How can I override my container hr so I can see the hr in the content?

First, my CSS:
Code:

div#container hr {
   display: block; 
   clear: both; 
   padding: 20px 0 0 0;
   visibility: hidden;
}

.show hr {
   display: block; 
   clear: both; 
   padding: 5px 0 0 0;
}	

And now my HTML:
Code:

<div id="container">

   <p>Some text</p>
   <hr class="show" />
   <hr />

</div>

I have this CSS:

.navcontainer li {
margin:0;
height:26px;
}

.navcontainer li#2row {
height:52px;
}

Applying to this HTML:

<div class="navcontainer">
<ul id="navlist">
<li id="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Printable Menus</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">Contact</a></li>
<li id="2row"><a href="#">Franchise</a></li>
</ul>
</div>

It seems like the id="2row" on the last link should make the second selector overwrite the first and display a different height for it. But for some reason it doesn't. This combination makes the most sense but i've tried moving thigns around and switching classes to ids, etc. to no avail. Any Ideas?

P.S. I can get it to work if i use an inline style instead, but that would prohibit me from using a psuedo class i need later. Everything else in this same css file works, so it doesn't seem like it could be a problem with importing the external file or anything.