• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 814
  • Last Modified:

CSS problem

Hi Experts,

I have a CSS that is workingfine for most of the tables.
Now I have a nested tabel and the CSS doesn't work anymore

Working  situation is: I can change color on hover"
<Table class=MyTable>
   <tr>
      <td>
          abcde
      </td>
   </tr>
</table> 


Hovering isn't working, anymore fot MyTable
<Table>
  <tr>
     <td>
        xyz
     </td>
     <td>
        <Table class=MyTable>
           <tr>
              <td>
                  abcde
              </td>
           </tr>
        </table> 
     </td>
   </tr>
</table> 

Open in new window


What do I have to add to my CSS to be able to hver over the nested table?







0
theo kouwenhoven
Asked:
theo kouwenhoven
  • 14
  • 5
  • 3
  • +2
2 Solutions
 
rgranlundCommented:
try table table {

}

in your css.  That may work.

OR just give it a different class.
0
 
theo kouwenhovenAuthor Commented:
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;}

Open 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

:(

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

Also forward the HTML
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
theo kouwenhovenAuthor Commented:
Nope, without that lin it didn't make any difference.

What do you like to see?
HTML?
PHP?
CSS?
JS?
0
 
zappafan2k2Commented:
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.
0
 
Marco GasiFreelancerCommented:
Please, post your css code relative to the two tables.

Cheers
0
 
theo kouwenhovenAuthor Commented:
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>

Open in new window

0
 
Marco GasiFreelancerCommented:
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


0
 
theo kouwenhovenAuthor Commented:
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)
0
 
theo kouwenhovenAuthor Commented:
owww one extra remark,
When this nested table is in the first cell of a row, the hoverig will work
0
 
Marco GasiFreelancerCommented:
What it does your javascript?
0
 
theo kouwenhovenAuthor Commented:
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;
}

Open in new window

0
 
zappafan2k2Commented:
Instead of
.xxx tr:hover {...}

Open in new window

or
.xxx td:hover {...}

Open in new window

try
.xxx tr:hover td {...}

Open 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.
0
 
theo kouwenhovenAuthor Commented:
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>';
?>

Open in new window

0
 
zappafan2k2Commented:
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.
0
 
theo kouwenhovenAuthor Commented:
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>

Open 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>	

Open in new window

0
 
zappafan2k2Commented:
OK, try two things:
First, this line (#45 in your PHP code above)
echo '</td';

Open in new window

should be
echo '</td>';

Open in new window


Second, try adding a !DOCTYPE declaration at the top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Open in new window

0
 
theo kouwenhovenAuthor Commented:
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 !!!!
0
 
theo kouwenhovenAuthor Commented:
Oops forgot to tell.... the problem isn't solved yet....
0
 
theo kouwenhovenAuthor Commented:
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 :-(


 
0
 
zappafan2k2Commented:
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
0
 
theo kouwenhovenAuthor Commented:
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????





0
 
OblivionSYCommented:
cross post from
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/JavaScript_Frameworks/Q_26821087.html?cid=748#a35014528

If you are loading it by ajax, then the binding only happens when JS is called. If the Div appears after that, it wont be bound.

You can avoid this behaviour by using .live() instead of .click()

it would be $("!#selector").live('click', function() { //stuff });

hopefully this is the right question you referred to!
0
 
theo kouwenhovenAuthor Commented:
Yes It works... Thanks
I increased the points to be able to split them :-)
0
 
theo kouwenhovenAuthor Commented:
Thaks !!!!!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 14
  • 5
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now