Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 111
  • Last Modified:

CSS Not Applying

I have a table with CSS, but it doesn't seem to be applying.  I am trying to set the column widths, set the headers on a left align and have a border around the table.  None of this seems to be happening.

<style type=”text/css”>
.viewpost {
    border: 1.5px solid #367588;
    background-color: #333;
    margin-bottom:25px;
}

.viewpost1 {
    border: 1.5px solid #367588;
    background-color: #333;
    line-height:100px;
    vertical-align:top;
    margin-left:10px;
}

table{
    align:center;
	border: 1px solid black;
    table-layout: fixed;
    width: 930px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 150px;
}
</style>

Open in new window


if ($result->num_rows > 0) {
    		// output data of each row
  			echo '<table>';
				echo "<thead>";//open teùable headers
				echo "<tr><th>Record ID</th>
				<th>Customer</th>
				<th>Site</th>
				<th>User Name</th>
				<th>Password</th>
				<th>Date Added</th></tr>";
				echo "</thead>";//close headers row
				echo "<tbody>";//open table body
    		while($row = $result->fetch_assoc()) {
				echo "<tr class='viewpost'>";
  			if(!empty($row['recordId'])) {
      			echo '<td>' . $row['recordId'] . '</td>';
    			}
					else
					{
      			echo '<td>NA</td>';
					}
  			if(!empty($row['recordCust'])) {
      			echo '<td>' . $row['recordCust'] . '</td>';
    			}
					else
					{
      			echo '<td>NA</td>';
					}
  			if(!empty($row['recordSite'])) {
      			echo '<td>' . $row['recordSite'] . '</td>';
   	 			}
					else
					{
      			echo '<td>NA</td>';
					}
    		if(!empty($row['recordUser'])) {
      			echo '<td>' . $row['recordUser'] . '</td>';
   	 			}
					else
					{
      			echo '<td>NA</td>';
					}
			if(!empty($row['recordPass'])) {
      			echo '<td>' . $row['recordPass'] . '</td>';
   	 			}
					else
					{
      			echo '<td>NA</td>';
					}
			if(!empty($row['recordDateAdded'])) {
      			echo '<td>' . $row['recordDateAdded'] . '</td>';
   	 			}			
					else
					{
      			echo '<td>NA</td>';
					}
					echo "</tr>"; //closing row
				}
  			echo '</tbody>';
  			echo '</table>';

Open in new window

0
DS928
Asked:
DS928
2 Solutions
 
Ray PaseurCommented:
Step #1: Correct the double-quote marks in the <style> tag.  For understanding, please have a look at this article.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12241-Quotation-Marks-in-PHP.html
0
 
Marco GasiFreelancerCommented:
The best thing should be if you could provide a link with a live sample of what you're trying to do so to allow us to play with it.
Anyway, it's strange you get no border around the table, since you styles seems to be ok (but align property which should be text-align). This I put some style should work:

table{
    text-align: center;
    border: 1px solid black;
    table-layout: fixed;
    width: 930px;
    padding: 6px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 150px;
}

th{
  text-align: left;
}

Open in new window


Check if this work and then try to add other classes and styles.
0
 
S. Rahul BoseCommented:
Following are the possible issues:

1.  Your browser is continuing to use the cache version of this html(php) page.  
- Try force refresh (Ctrl + F5) a few times.

2.  There might be a path error within the html file.
- Open the web page in browser and view source.  Click on the css file and check if the css is able to open or not.  If not, you will have to fix the path.

3.   If you are using this in a cloud like app engine or heroku, you need to ensure that the static files are set properly.
0
 
Ray PaseurCommented:
This applies the styling correctly according to my tests.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style type="text/css">
.viewpost {
	color:yellow;
    border: 1.5px solid #367588;
    background-color: #333;
    margin-bottom:25px;
}

.viewpost1 {
    border: 1.5px solid #367588;
    background-color: #333;
    line-height:100px;
    vertical-align:top;
    margin-left:10px;
}

table{
    align:center;
	border: 1px solid black;
    table-layout: fixed;
    width: 930px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 150px;
}
</style>


<title>E-E Question: Q_28603535.html</title>
</head>
<body>


<table>
  <thead>
    <tr>
      <th>Record ID</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody>
    <tr class='viewpost'>
      <td> {{recordid}} </td>
      <td> {{Customer}} </td>
    </tr>
  </tbody>
</table>


</body>
</html>

Open in new window

0
 
DS928Author Commented:
Thank you to the both of you. Removing  the double quotes unlocked the CSS and Marco provided the formating.  ONce again thank you!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now