CSS - Properly Format Hover Effect Table Specific

I've been getting quite confused as to why some CSS wasn't doing what I'd expected it to do.

I have code like this:
Code:

.tBox { width: 50px; height: 50px; }
.tHeader { opacity: 1 }
.tBox:hover .tHeader { opacity: 0.5 }

I then have my DIVs like this (simplified)
Code:

<div class="holder">
<div class="section1"> 
<div class="tBox"> </div>
</div>
<div class="section2">
<div class="tHeader"></div>
</div>
</div>

So what I was expecting to happen is that when someone hovered over "tBox" then "tHeader" would switch opacity.

But it wasn't. And I believe this is because tBox and tHeader aren't in the same parent.

I read somewhere something about using a "+" to do some special selector stuff in the CSS but didn't really understand.

Can someone please help me with how I can get this to work outside of them sharing their parent.

Thanks.

Hello,

First, I am new to webcoding so I apologise if what I am asking is too stupid. I am doing a little navigation bar for my blog with the hover effect. My problem is that the hover effect only work when I use {display: block;} but I need it to be inline, because when doing {display:block} it displays vertically. However when I do {display: inline-block;} the list items do show up inline horizontally but they show up only as images, neither does the hover effect or the links work.

Second, in IE and in chrome it displays differently.

Thank you very much for all the help!

Also, here is the code!

CSS

#header-wrapper2{
height:80px;
width:580px;
margin:0;
float: right;
background-color: #000000;
}

#header-wrapper2-navbar{
height: 40px;
width: 243;
margin-top:40px;
margin-left: 3px;
padding:0;
}

#header-wrapper2-navbar li{
margin:0;
padding:0;
}

#header-wrapper2-navbar li,#header-wrapper2-navbar a{
height: 40px;
display: block;
}

#news{
left:0px;
width:78px;
background: url('') 0 0;
}

#news a:hover{
background: url('') 0 -44px;
}

#products{
left:78px;
width:88px;
background: url('') -78px 0;
}

#products a:hover{
background: url('') -78px -44px;
}

#about{
left:166px;
width:77px;
background: url('') -166px 0;
}

#about a:hover{
background: url('') -166px -44px;
}

HTML

<div id='header-wrapper2'>
<ul id='header-wrapper2-navbar'>
<li id='news'><a href='()></li>
<li id='products'><a href='></li>
<li id='about'><a href='></li>
</ul>
</div>

i know that IE doesnt support the :hover being added to anything but links, is this the same with :active?
was just wondering whether i could have a style change when the user clicks on a form button

Hi,

I'm trying to create a CSS for a specific table, not all tables,

the following code uses the code I need:

PHP Code:
 table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid grey;
padding:15px;
} 





How can assign/rename this to say mytable, if I change the top 'table' to .mytable still all tables on my page are changed

Thanks for any help.

Sanj

Hi All,

I am trying to echo a table that I have given the following css style:
PHP Code:
 table.paginationtable {
cell-spacing: 1px;
border: 1px solid #000;
}

table.paginationtable td.location {
background-color: #6699FF;
color: #FFF;
font-family: arial, verdana;
font-size: 11px;
padding: 5px;
font-weight: normal;
line-height: 130%;
text-align:left;
} 




In the html I have:
PHP Code:
echo "<table class=\"paginationtable\"><tr>";
echo "<td class=\"location\">$location</td>";
echo "</tr></table>"; 




For some reason the 1 px border that I styled for the table is not showing up around my paginationtable. Can anyone see anything wrong with my code? Do the echo's look ok? Or is my CSS logic the problem?

Brad.

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

Hiya, im trying to place a blog inside a table and also have a picture above the table and some links.

In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work.

Please help

Thanks guys

I have a unique problem:

I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:

<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>

which works, but only in firefox, and not IE7, or Google Chrome.

I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should

Im using this to make an onscroll effect
Code:

table.left {border-collapse:collapse;
                float:left;
		  margin-left:10px;
		  margin-right:10px;
		  background:#8f8f8f;
		  padding:5px;
	          color:#000000;
                 font-family:Verdana;
		  text-decoration:none;
	
     }

td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}

td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;



}

And the links don't format with the typical css markup
Code:

a:active {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:link {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:hover {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}

Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck
Note:this is in IE


Nevermind...I just figured it out..used a link class and set the visited attribute

Hi there,

I have a table which I want to have a background color on hover.

I have tried this:

PHP Code:
<table style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #888888" width="100%"  border="0" cellspacing="0" cellpadding="8">
  <tr style="color: #FF7D13;" bgcolor="#f1f1f1">
    <td width="25%"><strong>Header 1</strong></td>
    <td width="25%"><strong>Header 2</strong></td>
    <td width="25%"><strong>Header 3</strong></td>
    <td width="25%"><strong>Header 4</strong></td>
  </tr>
 <div class="spec" onclick="location.href='#';">
 <tr bgcolor="#f1f1f1">
    <td width="25%"><strong>Designers</strong></td>
    <td width="25%">1</td>
    <td width="25%">2</td>
    <td width="25%">3</td>
  </tr>
  </div>
</table> 





I have given a class to "spec" with a background color, but it doesn't work.

Any ideas what is wrong?

I'd like to be able to have different hover colours for different table rows. I have a general hover colour for the whole page and I'd like to have a different hover colour for the table rows.

In the head I have
a:hover { color: green }
a.white:hover { color: white }

So by hand I can insert the class="white" to each individual cell as part of the link but what if I wanted a whole row to hover white?

How would I code this or is there still no way to do it?

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!