CSS problem

try table table {

}

in your css.  That may work.

OR just give it a different class.

Nope not working and the class of the table I like to change is unique.

The strange thing is that the cursor:hand is working.

#Track  tr {cursor: pointer; cursor: hand; background: #000; color: #fff;}
#Track  tr:hover {color: #f00;}
#Track  tr.selected {color: #00f;}
#Track  tr.selected:hover {color: #f00;}

Select allOpen in new window

this is a part of a larger CSS, an other strange thing is that if I place this part as first in the CSS source,
the color: #fff is not working it will be red.

I tought maybe an other part is disturbing this CSS, but when I remove one of the <Script> parts, the hovering is shown.?????
:S

The layout is a 2 column table in the left column a picture, in the right column this inbedded table.
If I put this table in the left column it is working :S

:(

Tke this out and check.  
#Track  tr.selected {color: #00f;}

Also forward the HTML

Nope, without that lin it didn't make any difference.

What do you like to see?
HTML?
PHP?
CSS?
JS?

If you can post more complete code, we can help you better.
It could be a missing single or double quote or other syntax error.

Please, post your css code relative to the two tables.

Cheers

I have only 1 CSS and only for one of the two tables.

#list : is not used yet, under developement
.Body : Text setting for all pages
#Abc : Table definition for contents selection table
.Atrist, .Album, : Selection tables (selection per cel)
.Track : Selection tables (selection per row)

There is one main page using the #Abc table and a Div where pages with other tables are loaded.
.Atrist, .Album, are working fine but dont have nested tables
only the .Track table is'n working.
(btw it is workin when I remove the script that put the table-row in teh "selecte"state.)

It's totaly weird, and the behavior seems to be not logical

Thanks for helping me out !!!!

<style>

#List {border-width: 1px; border-spacing: 0px; border-style: solid; border-color: #111; border-collapse: separate;}
#List tr ,th { cursor: pointer; cursor: hand; background: #000; color: #fff;}
#List tr:hover { cursor: pointer; cursor: hand; background: #000; color: #f00;}
#List tr.selected { cursor: pointer; cursor: hand; background: #000; color: #00f;}
#List tr.selected:hover { cursor: pointer; cursor: hand; background: #000; color: #f00;}
#List th {border-width: 1px; border-style: solid; border-color: #111; background: #111; color: #00f;}
#List td {border-width: 1px; border-style: solid; border-color: #111; min-width: 250px;}

.Body 	,td  {font-family: sans-serif;}
.Body 	,h1 {font-weight:normal; Color:#00f; line-height: 0.5em;} 
.Body 	,h2  {font-weight:normal; Color:#f00; line-height: 0.5em;} 

#Abc		td {border-width: 3px; padding: 1px; border-style: solid; border-color: black;
			cursor: pointer; cursor: hand; background: #ff0; color: #f00; 
			width:20; height:10; text-align:center; font-weight: bold;}  
#Abc		td:hover {background: #f00; color: #ff0; }
#Abc		td.selected {background: #00f; color: #ff0; }
#Abc		td.selected:hover {background: #00f; color: #f00;}

.Artist	td {border-width: 1px; padding: 10px; border-style: solid; border-color: black;
			cursor: pointer; cursor: hand; background: #000; color: #fff; 
			width:120px; height:120px; vertical-align:top; text-align: center;} 
.Artist	td:hover {color: #f00;}
.Artist	td.selected {color: #00f;}
.Artist	td.selected:hover {color: #f00;}

.Album	td {border-width: 1px; padding: 10px; border-style: solid; border-color: black;
			cursor: pointer; cursor: hand; background: #000; color: #fff; 
			width:120px; height:120px; vertical-align:top; text-align: center;}
.Album	td:hover {color: #f00;}
.Album	td.selected {color: #00f;}
.Album	td.selected:hover {color: #f00;}

.Track  tr {cursor: pointer; cursor: hand; background: #000; color: #fff;}
.Track  tr:hover {color: #f00;}
.Track  tr.selected{color: #00f;}
.Track  tr.selected:hover {color: #f00;}

#Back  {cursor: pointer; cursor: hand; text-decoration:underline}

</style>

Select allOpen in new window

tr tag is not affected by css rules such as :hover. You simply have to do something like

.Track  {cursor: pointer; cursor: hand; background: #000; color: #fff;}
.Track :hover {color: #f00;}

and give to your tx in htnl file the attribute class='Track';

This way hover attribute will work fine: I made the same thing in a my project some time ago.

cheers

Hi margusG.

"tr tag is not affected by css rules such as :hover."

Strange statement, because the tr hovering is working in this page if I remove my javascript.
and if I change the .Album td:hover into .Album tr:hover , than that table is working on tr level.

btw I'm using Chrome but when I load this page in IE, the hovering is working (but the rest isn't)

owww one extra remark,
When this nested table is in the first cell of a row, the hoverig will work

What it does your javascript?

The script is setting the <tr> on status "selected" so that the line get a diferent color
(it works for the pages .Artist and .Album)

The Script is working fine, so the selection is done...
Other pages have the same type of script but only a simple table (not nested)

jQuery(document).ready( function () {
	$("#Track>tbody>tr").click( selectTrack );
});
 
function selectTrack() { 	
    var row = $(this).closest("tr");
    $(this).closest("tbody").find("tr.selected").removeClass( "selected" );
    row.addClass( "selected" );
    var id = $(this).attr( "id" );
    id = (id != "")? id : "Row has no ID.";
    document.getElementById("player").src=id;
}

Select allOpen in new window

Instead of

.xxx tr:hover {...}

Select allOpen in new window

or

.xxx td:hover {...}

Select allOpen in new window

try

.xxx tr:hover td {...}

Select allOpen in new window

I have found that when I wanted to change the background of a row on hover, this was the only way I could get it to work in multiple browsers.

Otherwise, please post the complete HTML code, or attach it so we can try it out on our end.

Hi zappafan2k2,

Isn't working .... I can send you the complete html but you can't connect to the DB nor Server.

The strange thing still is that it works.
1. when the script is not there
2. when it is in the first cell instead of the second
3. The cursor:Hand keeps working.
4. If I remove the outer table it works

So before I sent all HTML, PHP, CSS and Script files, I post here the page with the table construction.
The Page is loaded in a Div and the CSS is available in the main-page.



 

<?php 

$link = $_GET['P'];
$stringArray = split('/',$link);
$art = $stringArray[0];
$alb = $stringArray[1];
$trc = $stringArray[2];

include '../../php/music/OpenMySqlDB.php';

$sql = 'SELECT ArtName, AlbName, AlbYear from Artist A, Album B where A.ArtKey = "'.$art.
       '" and B.ArtKey = A.ArtKey'.
	   '  and B.AlbKey = "'.$alb.'"';

$retval = mysql_query( $sql, $conn );
if(! $retval ) {
	die('Could not get data: ' . mysql_error());
}

while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
	echo '<H1 id="Back" Class="Back" artkey="'.$art.'">'.$row['ArtName'].'</H1>';
	echo '<H2>'.$row['AlbName'].' - '.$row['AlbYear'].'</H2><HR>';   
}

echo '<Table CELLPADDING="9">';
	echo '<tbody><tr>';
		echo '<td VALIGN="Top"><BR><BR><BR>';
		echo '<img Src="'.$base.$art.'/'.$alb.'/Cover.jpg" HEIGHT="350" WIDTH="350"><br>';
		include '../../php/music/P_Player.php';
		echo '</td><td class="x1">';
			echo '<Table id="Track" class="Track"><tbody>';
				$sql = 'SELECT TrcKey, TrcName, TrcNbr from Track where ArtKey = "'.$art.'" and AlbKey = "'.$alb.'"';
				$retval = mysql_query( $sql, $conn );
				if(! $retval ){
					die('Could not get data: ' . mysql_error());
				}
				while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) {
						echo '<TR ';
						if($trc == $row['TrcKey']) { 
							echo 'class="selected" ';
						} 
						echo 'id="'.$base.$art.'/'.$alb.'/'.$row['TrcKey'].'"><TD align="right">'.$row['TrcNbr'].' - </TD><TD>'.$row['TrcName'].'</TD></TR>';
				}
			echo '</tbody></Table>';
		echo '</td';
	echo '</tr></tbody>'; 
echo '</table>';

include '../php/music/CloseMySqlDB.php';
echo '<script type="text/javascript" src="/test/track.js"></script>';
?>

Select allOpen in new window

How about loading the page in the browser of your choice, clicking View Source, and copying it and pasting here?  That way we can see what's being sent to the browser.

Good Idea,

I will post both, the main page and the page that is loaded as DIV contents

MainPage

<HTML><HEAD>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="Fri, 30 Apr 2010 11:12:01 GMT" />
<meta http-equiv="Expires" content="0" />
<HTTP-EQUIV="PRAGMA" CONTENT="NO-STORE" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="/test/abc.js" ></script>
<link REL="STYLESHEET" TYPE="text/css" HREF="/test/music.css" >
</HEAD>
<BODY class="Body" BGCOLOR="Black">
<img Src="http://xxxxxxxxx/MP3/(Thumbs)/MM.jpg">
<Center>
<Table><TR><TD><FONT COLOR="Red" SIZE="3" FACE="ARIAL">Artist =&gt;</TD>
<TD><Table class="Abc" id="Abc"><tbody>
<TD id=1>1</TD><TD id=2>2</TD><TD id=3>3</TD><TD id=A>A</TD><TD id=B>B</TD><TD id=C>C</TD><TD id=D>D</TD><TD id=E>E</TD><TD id=F>F</TD><TD id=G>G</TD><TD id=H>H</TD><TD id=I>I</TD><TD id=J>J</TD><TD id=K>K</TD><TD id=L>L</TD><TD id=M>M</TD><TD id=N>N</TD><TD id=O>O</TD><TD id=P>P</TD><TD id=Q>Q</TD><TD id=R>R</TD><TD id=S>S</TD><TD id=T>T</TD><TD id=U>U</TD><TD id=V>V</TD><TD id=W>W</TD><TD id=X>X</TD><TD id=Y>Y</TD><TD id=Z>Z</TD>
<TD id="search"><b>?</b></a></TD></TR></tbody></Table></TR></Table>
<Div style="height:25px;">
<form id="S1" style="display:none;" name="input" action="http://xxxxxxxxx/Music/TrackList.php" method="get">
<FONT COLOR="Yellow" SIZE="3" FACE="ARIAL">Search :</font>
<input type="text" name="search" /></form></Div><HR>
<DIV ID="Div1" class="Div1"></DIV></Center><BR><HR>
<FONT COLOR="Gray" SIZE="1" FACE="ARIAL"> © 2010, Me</FONT></BODY></HTML>

Select allOpen in new window

Div contents:

<H1 id="Back" Class="Back" artkey="A0012">After Forever</H1>
<H2>After Forever - 2007</H2><HR>
<Table CELLPADDING="9"><tbody><tr><td VALIGN="Top"><BR><BR><BR>
<img Src="http://xxxxxxxxx/MP3/A0012/C001/Cover.jpg" HEIGHT="350" WIDTH="350"><br>
<video id= "player" controls="" autoplay="" style="margin: auto;  position: relative; top: 0;  right: 0;  bottom: 0;  left: 0;  height: 32px;  width: 350px;  background-color: #000000; border-color: #000000;" name="media" src= "">
</video>
</td><td>
<Table id="Track" class="Track"><tbody>
<TR id="http://82.73.123.97/MP3/A0012/C001/T01.mp3"><TD align="right">1 - </TD><TD>Discord</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T02.mp3"><TD align="right">2 - </TD><TD>Evoke</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T03.mp3"><TD align="right">3 - </TD><TD>Transitory</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T04.mp3"><TD align="right">4 - </TD><TD>Energize Me</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T05.mp3"><TD align="right">5 - </TD><TD>Equally Destructive</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T06.mp3"><TD align="right">6 - </TD><TD>Withering Time</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T07.mp3"><TD align="right">7 - </TD><TD>De-Energized</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T08.mp3"><TD align="right">8 - </TD><TD>Cry With a Smile</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T09.mp3"><TD align="right">9 - </TD><TD>Envision</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T10.mp3"><TD align="right">10 - </TD><TD>Who I Am</TD></TR>
<TR id="http://82.73.123.97/MP3/A0012/C001/T11.mp3"><TD align="right">11 - </TD><TD>Dreamflight</TD></TR><TR id="http://82.73.123.97/MP3/A0012/C001/T12.mp3"><TD align="right">12 - </TD><TD>Empty Memories</TD></TR></tbody></Table></td</tr>
</tbody></table>
<script type="text/javascript" src="/test/track.js"></script>	

Select allOpen in new window

Hmm interesting, the whole layout (all pages and sub pages in the Div)  is messed-up now....
So it willl have some effect....

I will try to update all styles to get the right layout again, and change the #track to see what I can do.

Thanks !!!!

Oops forgot to tell.... the problem isn't solved yet....

More strange behaviour.

If I change the background color of the .Track class  (line 36 in answer ID:35004493)
then the color of the table around class #Abc  (line 12 in the mainpage example) is changed,

if I move the .Track part to the top ov the CSS source, the table contents turn into a black font color....
so it looks like none of the style classes are fixed to the right place.

How can I change the CSS so that it will work?
What I have now was a "Trial and error" concept :-(


 

I created a page on my server with the HTML given in answer ID 35008474.  I created a css file with the code from answer ID 35004493.  When I opened the page in Firefox, the expected behavior worked (the color for the entire row became red on hover).  In IE, the expected behavior did not work.

When I made the two changes (!DOCTYPE and </td</tr fixes) that I specified in answer ID 35009231, along with answer ID 35007692 (.Track tr:hover td {), the expected behavior worked in IE.  Yes, the layout had changed, but that's because adding a !DOCTYPE gives the browser more information on how to render the page.  You're seeing the page as you have really created it, CSS-wise.

I don't have Chrome installed, so I can't test it.

Without being able to look at the live site, along with all of the various included scripts and stylesheets, I can't help you much more.  I would suggest that you try validating the HTML and the CSS code.  I did, and there are many errors and warnings in the code that I had.
http://www.w3schools.com/site/site_validate.asp

Hi Experts,

An status update:
I made a lot of changes and some weird behaviour was linked to the fact that a CSS dont neer a <style></style> tag in the *.css file.

When I updated my CSS it seems to work.... until I added the javascript file.
I did some tests and I dont understand the result.

If I use only the tabel (not nested)... it's working fine.

The containing table (outer table) has 1 row of 2 cells.
Tested:
-to the left there is a picture, to the right the #Track table. (not working)
-to the left there is the #Track table, to the right a picture. (not working)

The containing table (outer table) has 2 rows of 1 cell.
Tested:
-to the lower cell there is a picture, to the upper the #Track table. (not working)
-to the lower cell there is the #Track table, to the upper a picture. (working)

thw question is WHY????

Yes It works... Thanks
I increased the points to be able to split them :-)

Thaks !!!!!