Php interfering with css/html

I thought I had 2 test pages identical with the same code yet they behave differently

http://pintotours.net/TEMP/FINAL/final.php

http://pintotours.net/TEMP/SAFE/output.php

in the first, the text in #main p{} is not obeying the css rules in the

#main p{
text-align:center ;
	font-family: Roboto;
	font-size:28px;
	margin-top:0;
}

It appears that this is due to some php in the previous line

<h2>Search results for &lsquo;<?php echo str_replace('%', '', $searchq); ?>&rsquo;</h2> 

<p>The following chains guarantee the lowest rates on the Internet</p>

which is negating the css styling of what comes after.

What can I do, please?

Validation is always the first step you should take in your debugging.

Try validating this specific section, which I took from your final.php <style> section.

.button:hover {
    text-decoration: none;
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(to



table {
margin:10px auto;
}

What’s missing there? Perhaps a bracket?

1 Like

Hi Ryan

Many thanks.

In fact I did try to validate which will bring me to another mystery.
Being a php file, I found that I could see the html through View page Source

I copied it, made a new file with the contents and validated it, It has a few errors, I corrected them in the main file, and when I tried again, and again the errors are still ther even if they are not in the code of the page…

CORRECTION

The file is working now!

Thanks

All PHP code will still be ran and then parsed by the PHP engine, to the browser, which will then output anynormal code as usual. Nothing will change in that regard, no matter what extension it is.

If the page is on-line, there is no need to do this. You can paste the URL into the validator as you would a html file, it will only see the html output of the php. No one else can see your php code.

But the validator throws up errors which are not true

My validating comment was referring to the CSS :slight_smile: .

Hi Ryan
But where di I validate a mixed file like this one.

I’ve just run it again and now I get 20 errors!

jigsaw.w3.org/css-validator

1 Like

meanwhile I took this off the top

$results = true;
error_reporting(E_ALL); // Show all error messages
ini_set('display_errors', true);

and I only got one type of error, that I will try and undertsand sometime in the near future…

That is telling you not to set your table column widths in the html, because it is an obsolete method and you should use css to set layout, not html.
So you could have: <col class="w100"> with the css: .w100 { width:100px; }
But then IMO table columns should generally be left to define their own widths. Setting it all with px is very rigid.
My crystal ball predicts a thread about how to make some page with a table responsive. :smiley:

2 Likes

Hi

Thta is going to be the next stage of this page. I think afyer a while I will drop Country and City and things might just fit in.

I will deal with the columns too

Many thanks

The ball in in good form.
Needles to say, don’t fix the widths with pixels, let the content make best use of the available space, tables are good at that.
But when you do run out of space, you will need a query to alter things. That could be a smaller font, lose or abbreviate unneeded info, or switch to a one column table, @PaulOB did a demo of that somewhere.

Thanks

I’ll bear that in mind

This is Paul’s demo table:-

Thanks!

Hi Sam

I’ve been trying to change my code to follow your suggestion, as it will also help me change the width of the cells in th media queries, but I’ve failed!

I tried for instance to increase the width in col.w100 { width:100px;} to 500px just to see the effect, and there was hardly any…

<table class="fixed">
 <col class="w100">
 <col class="w150">
 <col class="w150">
 <col class="w200">
 <col class="w50">

What am I doing wrong?

This is the current code in the html and css

    col.w50 {
width:50px;
    }


    col.w100 {
width:100px;
    }

    col.w150 {
width:150px;
    }

    col.w200 {
width:200px;
    }

    table {
margin:10px auto;
    }

    table td{
padding:0 25px;
    }

    table, th, td p {
font-family: Roboto;
font-size:20px;
    } 

    table.fixed { 
table-layout:fixed; 
    }
    table.fixed td { 
overflow: hidden; 
    }

    table th {
padding-bottom:30px;
text-align:left;
padding-left:25px;
font-size:22px;
    }

    table td:nth-child(1):hover {
 transform: scale(1.1);
    }
      <table class="fixed">
  <col width="100px">
  <col width="150px">
  <col width="150px">
  <col width="200px">
  <col width="50px">
  <col width="50px">
  <col width="50px">
  <tr>
    <th></th>
    <th>Chain</th>
    <th>Country</th>
    <th>City</th>
    <th><img src="Star5a.png" alt=""></th>
    <th><img src="Star4a.png" alt=""></th>
    <th><img src="Star3a.png" alt=""></th>
  </tr>

   ....

    </table>

For a start, those selectors are wrong. If the class is applied to the element, you don’t name the element in the selector, just the class.
So instead of col.w50 {}
It should be `.w50 {}’
BUT

When I mentioned the width classes for columns, it was to illustrate the correct way to do the same as what you were doing, to please the validator, and was immediately followed by:-

If you want a page to be responsive, Don’t set width in pixels.

Hi Sam
I wonder if you could help me with the responsive design of the table, please?

  1. I don’t seem to be able to control the stars, right from the beginning, even applying :nth child. I positioned the first one, but then the others I can’t place vertically over the td s

  2. By the time I get to Media queries @ 510px I am trying to reduce the distance between the cells (td and th) and despite styling them with padding:0 and margin:0 they don’t budge…

@media screen and (max-width:510px) {

table th:nth-child(2){

display:none;
}

table td:nth-child(2){

display:none;
}

table th, td {
padding-bottom:30px;
text-align:left;
padding: 0;
margin:0;
width:30px;
}

Earlier css code:

table {
margin:10px auto;
}

table td{
padding:0 25px;
}

table, th, td p {
font-family: Roboto;
font-size:20px;
}

table th {
padding-bottom:30px;
text-align:left;
padding-left:25px;
font-size:22px;
}

table td:nth-child(1):hover {
transform: scale(1.1);
}
table th:nth-child(5){
padding-left:15px;
}
table th:nth-child(6){
padding-left:0:
}

Th test page is at http://pintotours.net/TEMP/SOS/Search1.php Enter “Brussels” in the Search box.

What’s wrong here?

th:nth-child(6){
padding-left:0:
}

: or ; ?

Be careful how you use selectors, be consistent. For example, before the query you have table td and in the query you have just td alone. Do you need to say table td? Do you have any <td>s that are not in tables?