CSS - Css Inheritance Confusion

Please look at this page -

http://swansonre.tmhdesign.com

In the top right of the header I have this code

Code:

<table id="call2action" cellpadding="0" cellspacing="0">
<tr><td><a href="" title="">Search MLS Listings</a></td></tr>
<tr><td><a href="" title="">FREE Property Evaluation</a></td></tr>
<tr><td style="height:51px;"><a href="" title="">Sign Up For Email Property Updates</a></td></tr>
</table>

Here is my styles for that code

Code:

table#call2action{
z-index:10000;
margin:0;
padding:0;
position:absolute;
top:40px;
right:20px;
border-collapse: collapse;
}

table#call2action td{
filter:alpha(opacity=30);   /* Internet Explorer       */
-moz-opacity:0.5;           /* Mozilla 1.6 and below   */
opacity: 0.5;               /* newer Mozilla and CSS-3 */
border:2px solid #edf7e3;
line-height:1 !important;
margin:-1px 0 0 0;
background-color:#000;
width:148px;
text-align:center;
vertical-align:middle;
height:53px;
}

table#call2action td a{
color:#fff !important;
font-weight:bold;
filter:alpha(opacity=1 !important);   /* Internet Explorer       */
-moz-opacity:1  !important;           /* Mozilla 1.6 and below   */
opacity: 1  !important;               /* newer Mozilla and CSS-3 */
font-size:12px !important;
padding:0;
margin:0;

}

I tried doing this in a <ul> element but was not able to get the desired size and alignment so I went to a table. I am having two issues. First is that I do not want the text in the <a> element to inherit the opacity from the td element. I want the text to be solid white.

Next is there seems to be an issue with the height of the table or cells. I have it so it looks "almost" the same in IE7 and FF but not exactly.

Any help sure would be appreciated. Tom

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

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?

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>

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.

I might have asked this before, but I can't remember.

I have my base class

.baseClass {
width: 100%
}

how can I inherit that into other classes? Like maybe:

.childClass#baseClass {
height: 200px;
}

.biggerChild#baseClass {
height: 400px;
}

now all three classes would have a width of 100%

If I google this all I get are pages telling me <p> will inherit from <html>

Also, I know I could do like this:

.childClass, .biggerChild {
width: 100%;
}

but I have a pretty big .css file, and it really bugs me to find the base class and add the derived class to it. Also, my base class can have a short name, and my derived class can have a long name, so this saves me some typing. ^^.

Thanks for your time,

CJB

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...?

So I've got this XHTML:

Code:

<div class="mainNav">
	<ul class="mainNavUL">
		<li><a class="empty" href="#"></a> <a href="#">Home</a></li>
		<li>
			<a class="unselected" href="#"></a> <a href="#">News</a>
			<ul class="subNavUL" id="menu_news">
				<li><a href="#">Agriculture</a></li>
				<li><a href="#">Business</a></li>
				<li><a href="#">Education</a></li>
				<li><a href="#">Environment</a></li>
				<li><a href="#">Politics</a></li>
				<li><a href="#">Special Reports</a></li>
				<li><a href="#">Transportation</a></li>
			</ul>
		</li>
	</ul>
</div>

What I'm attempting to do through CSS, is control the styling of the anchor classes 'unselected' and 'selected' through inheritance only. The reason I'm doing this is because I'll have other UL's with different classes, which will have the same structure as above.

I've tried everything I can think of, but am clearly hitting a brick wall. Any ideas?

Hi

I have a master page in my .net project that has a template. In this template it has a line for all links

a:link { color......}

So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out.

How can I stop this from being crossed out?

Hi all,

I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below.

Code:

.left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}

Inside this I now want to place another div with a different color background, so i created another class selector:

Code:

.pdfdownload { 
background-color: white;
}  

When a div is nested as follows:
Code:

<div class='left_float_column'>
<div class='pdfdownload'>Hello</div>
</div>

The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before.
I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places.

I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs.

I just don't understand

Please look at this page
http://www.acemarine.biz/gallery2.asp?subject=16

See the links for Thumbnail Sets under the thumbnails.

For the life of me I can not figure out why they are not all on one line. When I border them their width is the width of the containing element. When I set the width to say 10px they still do not appear on the same line. For some reason they are "floating" so to speak. I am using IE7 to look at these

I am using CSS in the context of an SVG document. In SVG, we use element names like 'rect', 'circle', & 'polyline' rather than 'p', 'table' and 'form' as HTML coders are familiar with. I am trying to apply a generic style to all 'rect' elements, and then modify that style with class styles.
The styles:
Code:

rect{
  fill: black;
  stroke: yellow;
  pointer-events: none;
 .... other SVG styles ....
}

.frame{
 fill: black;
  stroke: magenta;
 --- other SVG styles....
}

In the document, I use a 'rect' element, and apply the class style to it:
Code:

  <rect class="frame" height="5088" id="Rect_37" width="6688" x="-1008" y="-1728" />

As you may notice, there appears to be a contradiction in the styles specified by the two selectors: 'rect' and 'frame'. One would have the element rendered with a magenta outline, while the other would outline with yellow. In practice, the stroke rendering seems to inherit from the 'rect' element style, although this seems counter-intuitive to me (class styles seem to be more specific than element styles).
In researching this, I have actually found nothing that clarifies the question. Even the W3C site seems to ignore the case, as far as I can tell.
Is this even valid CSS? If yes, what rule dictates how the document will get rendered? I have passed the entire SVG doc through the XML validator, but the CSS validator only accepts HTML & raw CSS.
What would be the correct method of applying a global per-element-type style, but modifying it for specific instances of such elements?
I am trying to keep the document as small as possible, and reduce the need for redundant style information, as this seems to have a significant impact on performance of the rendering (presently only tested using Mozilla Seamonkey)
I'm pretty much of a CSS newbie, so feel free to correct whatever jargonology I've mangled. Pointers to definitive references most welcome.
Thanks.
--- rod.

I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly.

The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use <a> tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children <a> tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them.

A simplied example of the problem that I have run into is this:
Code:

<!--- CSS --->
  .tableinfo {
	width: 200px;
	padding: 0px;
	margin: 0px;
  }
  .tableinfo .menuitem { 
  	background-color:#666666;
	color:#FFFFFF;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem a { 
	color:#FFFFFF;
	text-decoration:none;
  }
  .tableinfo .menuitem_highlighted { 
  	background-color:#FFFFFF;
	color:#666666;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem_highlighted a { 
	color:#666666;
  }

Code:

<!--- HTML --->
<table class="tableinfo">
  <tr>
    <td class="menuitem_highlighted">
      <a href="index.html">Text</a>
      <table class="tableinfo">
        <tr>
          <td class="menuitem">
            <a href="index.html">Text</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck.

If you need any further informatoin, please let me know. Thanks for your help!

Mitchell Killian (II Cor. 12:9)
Integrity Design and Coding
http://www.integritydc.net
"Except a man be born again, he cannot enter into the kingdom of heaven." John 3:3

If I have

<div class="menu">
<table>
<tr>
<td>Home page</td>
</tr>

and in my style sheet

td.menu { color:red; }

then too bad for me. I have to put class=menu in every <td> tag. There must be a better way.