Mike Mike - 6 months ago 23
PHP Question

CSS styles not applying to page displayed in an iframe

I have an external CSS file that I

<link>
into the files that I'm running. Some of the styles are applied but others are not. I have followed the syntax that I've found in other places like W3Schools and other questions here. But I still cannot get some of them to work. The
hover
works, but the
collapse-border: collapse
does not. And neither do the
background-color
lines. Here is what I've got in the css file:

#OuterTable tr:hover{background-color: #f5f5f5;}
#OuterTable {border-collapse: collapse;}
#OuterTable tr:nth-child(odd) {background-color: #fff;}
#OuterTable tr:nth-child(even){background-color: #e5e5e5;}

#MaterialByState tr:hover{background-color: #f5f5f5}
#MaterialByState tr:nth-child(odd) {background-color: #fff}
#MaterialByState tr:nth-child(even){background-color: #e5e5e5}
#MaterialByState {border-collapse: collapse}


The #Name are ID's for tables that I am displaying in an iFrame on the main page when i click on a link. The tables display, they just are not formatted the way that I want them to be and I cannot figure out what I'm doing wrong here. I've tried with and without the
;
as soon above and neither way makes a difference. I can get the
collapse-border: collapse
to work if I put it in the file that has the table, but the other lines about the background color don't work when placed there. And I want them to all be in the same place so that I can update them all in the same place instead of hunting through my code for the tables. I'm using PHP code to pull data from a DB so it's not the prettiest or easiest to go through.

EDIT
I am using a main page to link to the other pages and display them in an iFrame. On the other pages that I'm displaying I have the css linked in them in the files that call the other tables:

<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';


So that the HTML in the iFrame looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>QDef</title>
</head>
<body>
<h2>This will pull down all the Queries from the QDef table</h2>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">


and the CSS looks like it does above.

Edit

Here is the QDef.php file that I am trying to display in the iFrame:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>QDef</title>
<!--style type="text/css">
table
{
border-collapse: collapse
}
#OuterTable tr:nth-child(odd) {background-color: #fff}
#OuterTable tr:nth-child(even){background-color: #e5e5e5}
#OuterTable tr:hover{background-color: #f5f5f5}
</style-->
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<h2>This will pull down all the Queries from the QDef table</h2>
<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';
try
{
$conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
//set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1);
echo "Connected Successfully<br>" /*. $conn*/;
/*If conncected see if we can pull any data!*/
}
catch(Exception $e)
{
die( print_r( $e->getMessage() ) );
}

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs";
//echo $tsql . "<br>";
$getqueries = $conn->query($tsql);

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC);

$countqueries = count($queries);

if(isset($countqueries))
{
if($countqueries > 0)
{
//echo "There are queries returned";

BeginQueriesTable($countqueries);
foreach($queries as $query)
{
PopulateQueryTable($query);
}
EndQueriesTable();
}
else
{
echo "<br>Values returned: $countqueries";
}
}
else
{
echo "No count";
}

function BeginQueriesTable($rowCount)
{
$headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef");
echo "<table align='center' cellpadding='5' border='1' id=" . chr(34) . "OuterTable" . chr(34) . ">";
echo "<thead valign=" . chr(34) . "top" . chr(34) . ">";
echo "<tr>$rowCount Results</tr><tr bgcolor='silver'>";
foreach ($headings as $heading)
{
echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>";
}
echo "</tr>";
}

function PopulateQueryTable($values)
{
//$queryID = $values['ID'];
echo "<tbody valign=" . chr(34) . "top" . chr(34) . "><tr>";
foreach($values as $key=>$value)
{
if (!is_null($value))
{
echo "<td white-space: nowrap style overflow-x: scroll>$value</td>";
}
else
{
echo "<td>N/A</td>";
}
}
echo "</tr>";
}

function EndQueriesTable()
{
echo "</tbody></table><br/>";
}

?>
</body>
</html>


The CSS file is already showing above.

Here is the Main Page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestingSwitchingMainPage</title>
<style type="text/css">
table
{
border-collapse: collapse
}
</style>
<link rel="StyleSheet" href="style.php" type="text/css">
</head>
<body>
<UL>
<LI><A Href="MainPage.aspx" target="MainPage">Main</A>
<LI><A Href="QDef.php" target="MainPage">Material Tracking QDef</A>
<LI><A Href="MaterialTrackingAllStates.php" target="MainPage">Material Tracking All rows with State</A>
<LI><A Href="SearchStateProject.php" target="MainPage">Material Tracking Searh by State or Project Number</A>
<LI><A Href="TestPHP.php" target="MainPage">Material Tracking PHP Info</A>
</UL>
<iframe src="MainPage.aspx" Width=100% Height=750 name="MainPage" FrameBorder=0>
This will show up if the browser doesn't understand IFrame.
</iframe>
</body>
</html>


I don't know if this will make it any clearer for you as I'm using php to pull data from a SQL Server and then display that in a table.Which is supposed to show in the iFrame. I can pull the QDef.php file up by itself and the styling is still not being applied. I'm testing this in IE11 if that makes any difference. I want it to be able to be used regardless what browser I'm using.

EDIT 2

I have made some changes to my CSS file based on recommendations from W3C Validation Checker that was recommended from @Mr Lister. It now look like this:

#OuterTable tr:hover{background-color: #0094ff;}
#OuterTable {border-collapse: collapse;}
#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame
#OuterTable tr:nth-child(even){background-color: #e5e5e5 !important;} iFrame

#MaterialByState tr:hover{background-color: #0094ff}
#MaterialByState tr:nth-child(odd) {background-color: #fff}
#MaterialByState tr:nth-child(even){background-color: #e5e5e5}
#MaterialByState {border-collapse: collapse}

#OuterTable, td, th {border: 1px solid black}
#OuterTable, thead {text-align: left}
#OuterTable {text-align: left}
#OuterTable, td, th {white-space: nowrap}
#OuterTable, td, th {vertical-align: bottom}
th {background-color: #808080; color: #fff}
td, th {padding: 5px}
tr:nth-child(odd) {background-color: #fff}
tr:nth-child(even) {background-color: #e5e5e5}

#OuterTable thead, table tbody {
border-collapse: collapse;
text-align: left;
}

#OuterTable tbody {
width: 100%;
overflow-x: scroll;
}

#OuterTable tbody:nth-child(odd) {
background: #f5f5f5;
border: solid 1px #ddd;
}

#OuterTable tbody:nth-child(even) {
background: #e5e5e5;
border: solid 1px #ddd;
}


I have taken pretty much all the table formatting out of the HTML and put it in the CSS file. So far everything is working except making the rows alternate color. I have added the code that I've found in several different ways to try and get it to work. I've got
#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame
and I've got this
tr:nth-child(odd) {background-color: #fff}
and I've got this
#OuterTable tbody:nth-child(even) {
background: #e5e5e5;
border: solid 1px #ddd;
}


None of these various ways are working when everything else for this page is. What else can I do to get this working??

Answer

I could not get the style tr:nth-child(odd) {background-color: #fff} tr:nth-child(even) {background-color: #e5e5e5} to work, but I did find a work around. I gave the <tr></tr> a class. I alternated the class with 2 different class names (row and row1) then made an update to my css to have .row1 {background-color: #fff} .row {background-color: #e5e5e5} This gave me the banded rows that I was looking to get and couldn't with the other way I was trying. I also had to update the PHP script to do the alternating of the class like below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>QDef</title>
    <link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
    <h2>This will pull down all the Queries from the QDef table</h2>
<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" type="text/css" href="StyleSheet.css">';
try
{
    $conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
    //set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1);
    echo "Connected Successfully<br>" /*. $conn*/;
    /*If conncected see if we can pull any data!*/
}
catch(Exception $e)
{
    die( print_r( $e->getMessage() ) ); 
}

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs";
//echo $tsql . "<br>";
$getqueries = $conn->query($tsql);

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC);

$countqueries = count($queries);

if(isset($countqueries))
{    
    if($countqueries > 0)
    {
        //echo "There are queries returned";

        BeginQueriesTable($countqueries);
          $CountValues = 1;     /**********Added************/
        foreach($queries as $query)
        {
            PopulateQueryTable($query,$CountValues);/******Updated******/
            $CountValues = !$CountValues;/***********Added**************/
        }
        EndQueriesTable();
    }
    else
    {
        echo "<br>Values returned: $countqueries";
    }
}
else
{
    echo "No count";
}

function BeginQueriesTable($rowCount)
{
    $headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef");
    echo "<p>$rowCount Results</p>";
    echo "<table class=" . chr(34) . "tab" .chr(34) . "id=" . chr(34) . "OuterTable" . chr(34) . ">";
    echo "<thead>";
    echo "<tr>";
    foreach ($headings as $heading)
    {
        echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>";
    }
    echo "</tr>";
}

function PopulateQueryTable($values,$Number)/******Updated*******/
{
    //$queryID = $values['ID'];

    echo "<tbody><tr class=" . chr(34) . "row" . ($Number) . chr(34) . ">";/*******Updated**********/
    foreach($values as $key=>$value)
    {
        if (!is_null($value))
        {
            echo "<td>$value</td>";
        }
        else
        {
            echo "<td></td>";
        }
    }
    echo "</tr>";
}

function EndQueriesTable()
{
    echo "</tbody></table><br/>";
}

?>        


</body>
</html>

You can see that I added a counter that would update each time that a line was being processed into the table so that each row would have a different class.

Thank you to everyone who helped! I hope that this answer will help others with a similar problem.

Comments