Solved

CSS Not Applying

Posted on 2015-01-25
5
107 Views
Last Modified: 2015-01-25
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
Comment
Question by:DS928
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 40569416
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
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 250 total points
ID: 40569420
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
 

Expert Comment

by:S. Rahul Bose
ID: 40569424
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
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40569434
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
 

Author Closing Comment

by:DS928
ID: 40569441
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to send commands to switch via telnet programatically 15 87
Google Recaptcha 13 55
css messed up 8 29
PHP MYSQLI Connection in Function in a class 4 29
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

751 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