Adding a border

[trogladyte]

I am a total PHP noob so this will probably be a very simple question, but, hopefully, one I can learn from!

On my site I have 3 calculators down the right sidebar. Two came already formatted with a border, but 1, Daily Calorie Counter, didn't.

I have created a CSS document - calcount.css - with the following code in it (which is pure cut n paste from one of the other calculators).

.calcount
{
width:100%;
border-left-color:#E6E6E6;
border-right-color:#E6E6E6;
border-bottom-color:#E6E6E6;
border-top-color:#E6E6E6;
border-left-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-top-style:solid;
border-right-width:1px;
border-left-width:1px;
border-bottom-width:1px;
border-top-width:1px;
}

I now want to apply that to the PHP file where all the work happens - mod_dailycaloriecalculator.php. The top chunk of code in that is -

<?

/**
 * @package Module Daily Calorie Calculator for Joomla! 1.5
 * @version $Id: mod_dailycaloriecalculator.php 599 2010-03-20 23:26:33Z you $
 * @author Alex Barr
 * @copyright (C) 2010- Alex Barr
 * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
**/


defined( '_JEXEC' ) or die( 'Restricted access' );

$age=$_POST["age"];
$gender=$_POST["gender"];
$heightcm=$_POST["heightcm"];
$weightkg=$_POST["weightkg"];
$activity=$_POST["activity"];

if ($heightcm!="" && $weightkg!="" && $age!="" && $gender!="" && $activity!="" ) {

if (is_numeric($age)) {
 $age=$age;
 } else {
 $age=100;
 }


//$heightm = $heightcm / 100;

echo "Age, years: ".$age."<br />";
if ($gender=="1") {echo "Gender: Male<br />";}
if ($gender=="2") {echo "Gender: Female<br />";}
echo "Heigth, cm: ".$heightcm."<br />";
echo "Weigth, kg: ".$weightkg."<br />";

if ($activity=="1") {echo "Activity: Sedentary<br />";}
if ($activity=="2") {echo "Activity: Lightly Active<br />";}
if ($activity=="3") {echo "Activity: Moderately Active<br />";}
if ($activity=="4") {echo "Activity: Very Active<br />";}
if ($activity=="5") {echo "Activity: Extra Active<br />";}

I have tried, with no success, to get it working, but always get an error (I think all the time a parse error). Is this even the best way to do it, or should I just be inserting some hard code into the PHP file?

TIA.

[edited by: eelixduppy at 12:55 am (utc) on Dec 4, 2011]
[edit reason] removed url [/edit]

[enigma1]

You open a bracket in this statement:

if ($heightcm!="" && $weightkg!="" && $age!="" && $gender!="" && $activity!="" ) {

But I cannot see where you close it. Double check if it is closed further down in your code.

[trogladyte]

Sorry! Didn't want to clutter the post with too much code! :-) Here's the full file.

Which is the best option? Calling a CSS file or inserting hard code?

Thanks.

<?

/**
 * @package Module Daily Calorie Calculator for Joomla! 1.5
 * @version $Id: mod_dailycaloriecalculator.php 599 2010-03-20 23:26:33Z you $
 * @author Alex Barr
 * @copyright (C) 2010- Alex Barr
 * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
**/


defined( '_JEXEC' ) or die( 'Restricted access' );

$age=$_POST["age"];
$gender=$_POST["gender"];
$heightcm=$_POST["heightcm"];
$weightkg=$_POST["weightkg"];
$activity=$_POST["activity"];

if ($heightcm!="" && $weightkg!="" && $age!="" && $gender!="" && $activity!="" ) {

if (is_numeric($age)) {
    $age=$age;
  } else {
    $age=100;
  }


//$heightm = $heightcm / 100;

echo "Age, years: ".$age."<br />";
if ($gender=="1") {echo "Gender: Male<br />";}
if ($gender=="2") {echo "Gender: Female<br />";}
echo "Heigth, cm: ".$heightcm."<br />";
echo "Weigth, kg: ".$weightkg."<br />";

if ($activity=="1") {echo "Activity: Sedentary<br />";}
if ($activity=="2") {echo "Activity: Lightly Active<br />";}
if ($activity=="3") {echo "Activity: Moderately Active<br />";}
if ($activity=="4") {echo "Activity: Very Active<br />";}
if ($activity=="5") {echo "Activity: Extra Active<br />";}

//BMR Men = 66.5 + (13.75 X weight in kilos) + (5.003 X height in cm) – (6.775 X age in years)
//BMR Women = 655 + (9.6 X weight in kilos) + (1.8 X height in cm) – (4.7 X age in years)

if ($gender=="1") {$bmr=66+(13.7 * $weightkg)+(5 * $heightcm)-(6.8 * $age);}
if ($gender=="2") {$bmr=655.1+(9.563 * $weightkg)+(1.85 * $heightcm)-(4.676 * $age);}

if ($activity=="1") {$bmr=$bmr*1.2;}
if ($activity=="2") {$bmr=$bmr*1.375;}
if ($activity=="3") {$bmr=$bmr*1.55;}
if ($activity=="4") {$bmr=$bmr*1.725;}
if ($activity=="5") {$bmr=$bmr*1.9;}

echo "<strong>Daily Calorie Needs</strong><br />";
echo "<strong>".round($bmr,0)." Calories/day</strong><br />";

}


$domain = $_SERVER['HTTP_HOST'];
$path = $_SERVER['SCRIPT_NAME'];
$queryString = $_SERVER['QUERY_STRING'];
$url = "http://" . $domain . $path;
$url3 = "http://" . $domain . $_SERVER['REQUEST_URI'];
$mystring1="?";
$s1=strpos($url3,$mystring1);
if($s1==0) {$url2=$url3;}
if($s1!=0) {$url2=substr($url3,0,$s1);}
$path = $url2;

//1 foot = 0.3048 meters
//1 inch = 2.54 centimeters
//1 pound = 0.45359237 kilograms

$n1=230;


echo "<table style=\"width: 100%\" cellspacing=\"2\" cellpadding=\"2\" align=\"center\"><tr><td valign=\"top\">";
// echo "<h3>Daily Calorie Calculator</h3>";
echo "<form action=\"".$path."\" method=\"post\" >";

echo "<strong>Age</strong><p />";
echo "<input name=\"age\" type=text size=\"5\" >";
echo "<p />";

echo "<strong>Gender</strong><p />";
echo "<select name=\"gender\" >";
echo "<option value=\"1\">Male</option>";
echo "<option value=\"2\">Female</option>";
echo "</select>";
echo "<p />";

echo "<strong>Height</strong><p />";
echo "<select name=\"heightcm\" >";
for ($i=30; $i<=$n1; $i++){ echo "<option value=\"$i\">".$i." cm / ".floor($i / 30.48)." ft ".round(($i-(floor($i / 30.48)*30.48)) / 2.54, 1)." in </option>";}
echo "</select>";
echo "<p />";

echo "<strong>Weight</strong><p />";
echo "<select name=\"weightkg\" >";
for ($i=30; $i<=$n1; $i++){ echo "<option value=\"$i\">".$i." kg / ".round($i / 0.45359237,2)." pounds </option>";}
echo "</select>";
echo "<p />";

echo "<strong>Activity</strong><p />";
echo "<select name=\"activity\" >";
echo "<option value=\"1\">Sedentary</option>";
echo "<option value=\"2\">Lightly Active</option>";
echo "<option value=\"3\">Moderately Active</option>";
echo "<option value=\"4\">Very Active</option>";
echo "<option value=\"5\">Extra Active</option>";

echo "</select>";
echo "<br />";
echo "<br />";

echo "<input class=\"art-button\" type=\"submit\" value=\"Calculate\" name=\"B1\">";
echo "</form><br />";

//DON'T REMOVE THIS LINK - DO NOT VIOLATE GNU/GPL LICENSE!
echo "<a href=\"http://nutritioncaloriecounter.com\"></a>";
//DON'T REMOVE THIS LINK - DO NOT VIOLATE GNU/GPL LICENSE!
echo "</td></tr></table>";









?>

[enigma1]

Best to use a css file. Now where in the code you output the calcount css class? I don't see it, from what I see from your site's html it should been a class in the table line here

echo "<table class=\"calcount\" style=\"width: 100%\" cellspacing=\"2\" cellpadding=\"2\" align=\"center\"><tr><td valign=\"top\">";

which is missing along with the css before that.

[trogladyte]

That's my problem Enigma. I have no clue where to put the call to the CSS file or the syntax required. As I said, I am a total (read complete and utter) CSS/PHP noob.

[enigma1]

Well given I can't see the whole application code (the css should go in the head section of the html), the css hard-coding is something that I can see. So change the code where you echo the table to include the class as I mentioned above, then create a file say calcount.css put the css in it along with the style tag

<style type="text/css">
.calcount
{
width:100%;
border-left-color:#E6E6E6;
border-right-color:#E6E6E6;
border-bottom-color:#E6E6E6;
border-top-color:#E6E6E6;
border-left-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-top-style:solid;
border-right-width:1px;
border-left-width:1px;
border-bottom-width:1px;
border-top-width:1px;
}
</style>

then just before the line where you output the particular form include or require the css file.

require('calcount.css');

btw put the css file in the same folder as your php file.

To include it as an external file you would have to figure out where the application emits the css and jscripts and how the plugin interacts with it.

[lucy24]

Tangentially: Do you realize you're using twelve lines of code to say something that can be said in one line?

{border: 1px solid #E6E6E6;}

[trogladyte]

:-) Yes Lucy, I know that much! Hehehe! It was a cut and paste and I never got round to changing it - I was more concerned about getting the thing to work!

Thank you!

[trogladyte]

Alas, that didn't work, or, probably more likely, I am putting code in the wrong places. Thanks for the help - I'll have to go back to the developer I guess.

Cheers.

[rocknbil]

one I can learn from!
...
I'll have to go back to the developer I guess.

No you don't - you just need to understand what's going on. You (seem to have?) missed a very important point in enigma's post - you need to add a reference to the class in the html itself:

echo "<table class=\"calcount\" style=\"width: 100%\" cellspacing=\"2\" cellpadding=\"2\" align=\"center\"><tr><td valign=\"top\">";

(If you did that, more info below)

Second, although enigma's require (or include) will work, a better way is to look for the master file containing this output, that is, in the template that contains this page, add

<link rel="stylesheet" type="text/css" href="calcount.css">

It should go somewhere between the <head> and </head> in your template. The reason for this is it keeps CSS references all in one place. second, if you include/require the CSS "wherever this page output lands" it's going to blurt out CSS inline in the page, which is invalid code (but still works. It's just a mess. :-) )

So - if you've added the class to the table and it still doesn't work, it's entirely likely some other CSS selector is overriding your .calcount class. (Another reason to keep all the css in one place, so you can review them all.) That is, there may be some selector in other CSS that specifies no border on a table:

table { border: none; }

since your class selector doesn't specify table, this selector will likely override your class selector. You can try adding it like this:

table.calcount { border: 1px solid #E6E6E6; }

which will override the table selector. There are other cases of specificity that can override your class selector, but let's start with that.

An aside, understand also the difference between class and ID. A class is meant to be used for multiple instances on a page. In the below examples, all of the class "bold-red" will be bold and red, but as you can see, it doesn't matter what kind of element it is.

.bold-red { color: #ff0000; font-weight: bold; }

....

... blah blah blah <span class="bold-red">I'm bold, red, and inline</span> blah blah blah ...

<p class="bold-red">This entire paragraph will be bold and red.</p>

<table>
<tr>
<td class="bold-red">I'm bold and red</td>
<td> and I'm not</td>
</tr>
</table>

The reason I raise this point is that if there is only one instance of the element on the page, it's often better to use an id instead of a class. When you are scanning through a couple hundred lines of CSS, it's easy to pick out which items are unique on a page. It also says what you mean: "there should only be one of these." A class says "this is a generic selector that can be applied to any kind of element" (unless you specify the element, as in table.calcount above.)

I would probably use an ID for this table instead, which allows me to circumnavigate many of the issues with cascading selectors.

#calcount { border: 1px solid #E6E6E6; }

....

echo "<table id=\"calcount\" style=\"width: 100%\" cellspacing=\"2\" cellpadding=\"2\"><tr><td valign=\"top\">";

Even so, a more specific selector may override this, so you might have to specify a table:

table#calcount { border: 1px solid #E6E6E6; margin:auto; }

(Note also I removed the align attribute as it's invalid in later versions of (X)HTML, use margin:auto instead.)

If it STILL doesn't work:

- Verify it's not a caching issue. In case you don't know, browsers download "copies" of the pages you visit in a temporary location on your computer, and if they don't recognize something has changed, will use the cache copy for faster loading pages. Unfortunately they don't always do this correctly for linked CSS and Javascript (really bad with Flash files.) Wile on the page, on your keyboard, hold down the CTRL key (or Apple key for Mac) and press F5. If that doesn't work, look for the "clear cache" option in your browser. Reload the page and it will download your modified CSS.

- Verify you're actually referencing the file right. If I put a css file in a folder "css" and do this

<link rel="stylesheet" type="text/css" href="calcount.css">

It's not actually finding the file. It would have to be

<link rel="stylesheet" type="text/css" href="/css/calcount.css"> (on the server)
<link rel="stylesheet" type="text/css" href="css/calcount.css"> (on your computer, locally)

This is easy to find out - View Source on the page and click the link to the CSS. If you get a 404, that's the problem.

- For extremely complex css - several hundred lines and multiple css files - it's hard to sort out exactly what's broken. Use FireFox and install the FireBug [getfirebug.com] extension. This allows you to right-click a page element and select "Inspect Element" to see exactly what selectors are contributing to your broken table. (Or use Chrome, which has this built in.) If you don't use either of these browsers, be prepared for some surprises - often developing only in one browser or the other leads to broken stuff the first time you look at it in other browsers.

No go forth and debug. :-)