Solved

CSS problem

Posted on 2011-02-28
25
782 Views
Last Modified: 2012-05-11
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
Comment
Question by:theo kouwenhoven
  • 14
  • 5
  • 3
  • +2
25 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 35002998
try table table {

}

in your css.  That may work.

OR just give it a different class.
0
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35003144
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
 
LVL 7

Expert Comment

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

Also forward the HTML
0
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35003524
Nope, without that lin it didn't make any difference.

What do you like to see?
HTML?
PHP?
CSS?
JS?
0
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 35003762
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
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 35004275
Please, post your css code relative to the two tables.

Cheers
0
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35004493
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
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 35004720
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35005435
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35005438
owww one extra remark,
When this nested table is in the first cell of a row, the hoverig will work
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 35005656
What it does your javascript?
0
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35005971
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 12

Expert Comment

by:zappafan2k2
ID: 35007692
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35008080
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
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 35008104
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35008474
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
 
LVL 12

Assisted Solution

by:zappafan2k2
zappafan2k2 earned 50 total points
ID: 35009231
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35009625
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35009634
Oops forgot to tell.... the problem isn't solved yet....
0
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35010613
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
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 35010775
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35012947
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
 
LVL 3

Accepted Solution

by:
OblivionSY earned 100 total points
ID: 35015846
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
 
LVL 16

Author Comment

by:theo kouwenhoven
ID: 35020967
Yes It works... Thanks
I increased the points to be able to split them :-)
0
 
LVL 16

Author Closing Comment

by:theo kouwenhoven
ID: 35020987
Thaks !!!!!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now