PHP and Firefox

**JeremyW** · Jun 28, 2007 05:13

I've noticed that if I save a page as a PHP file and view it in Firefox the browser displays the page differently then if I save it as a htm file. But IE will display the page the same no matter which format I use. Anyone know what is going on here or a possible way to get around it?

**Mittineague** · Jun 28, 2007 05:32

AFAIK unless you have the server set up to parse files with the htm extension, viewing a PHP file with the htm extension in any browser should show a mess of PHP code showing up in odd places throughout the page's content.
Or are you talking about using your browser to save a web page onto your computer?

**JeremyW** · Jun 28, 2007 05:44

I have a page with a mail form and when you submit the form it posts to the php page which tells you that the mail has been sent. The two pages are exactly the same except the second page displays the message where the other page displays the form. Because the second page uses PHP I had to save it as a PHP file only that makes the page layout appear different.

**Mittineague** · Jun 28, 2007 09:48

Originally Posted by JeremyW

The two pages are exactly the same

Although you see the similarities, the difference most likely is that 1 displays a form and 1 displays a message. I imagine that the message is in div / p tags, and the form a table? Does 1 match the rest of the site's pages? That is, which 1 is odd-man-out? There should be some way to tweak the mark-up / CSS to get it to look OK.

**JeremyW** · Jun 28, 2007 19:14

Here's the html page.

Code HTML4Strict:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function validateForm() {
						if(document.Enquiry.Name.value == "") {
						alert("Please Enter The Value For name ");
 
						return false;
						}
						if(document.Enquiry.Email.value == "") {
						alert("Please Enter The Value For email ");
 
						return false;
						}
						if(document.Enquiry.Phone.value == "") {
						alert("Please Enter The Value For phone number");
 
						return false;
						}
 
		return true;
		}
 
 
/* This script is Copyright (c) Paul McFedries and 
Logophilia Limited ([url]http://www.mcfedries.com/)[/url].
Permission is granted to use this script as long as 
this Copyright notice remains in place.*/
 
function CalculateTotal(frm) {
    var order_total = 0
 
    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {
 
        // Get the current field
        form_field = frm.elements[i]
 
        // Get the field's name
        form_name = form_field.name
 
        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {
 
            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
 
            // Get the quantity
            item_quantity = parseInt(form_field.value)
 
            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }
 
    // Display the total rounded to two decimal places
    frm.TOTAL.value = round_decimals(order_total, 2)
 
}
 
function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}
 
function pad_with_zeros(rounded_value, decimal_places) {
 
    // Convert the number to a string
    var value_string = rounded_value.toString()
 
    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")
 
    // Is there a decimal point?
    if (decimal_location == -1) {
 
        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0
 
        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {
 
        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }
 
    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length
 
    if (pad_total > 0) {
 
        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}
 
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<title>Enquiries</title>
</head>
 
<body MARGINHEIGHT="0" TOPMARGIN="0" bgcolor="#000000" onload="MM_preloadImages('Images/contact1.jpg','Images/machines.jpg','Images/enquiries.jpg','Images/ourproducts.jpg','Images/ourservice.jpg','Images/coffeeorder.jpg','Images/home.jpg')">
<div align="center" height="100%"> 
  <table height="100%" border="0" cellspacing="0" id="layout" >
    <tbody>
      <tr> 
        <td ><a href="Contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Images/contact1.jpg',1)"><img src="Images/contact2.jpg" alt="Contact Us" name="Image11" width="80" height="13" border="0" id="Image11" /></a><a href="Machines.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','Images/machines.jpg',1)"><img src="Images/machines2.jpg" alt="Machines" name="Image12" width="72" height="13" border="0" id="Image12" /></a><a href="Order.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','Images/coffeeorder.jpg',1)"><img src="Images/coffeeorder2.jpg" alt="Coffee Order" name="Image16" width="91" height="13" border="0" id="Image16" /></a><a href="Enqiries.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Images/enquiries.jpg',1)"><img src="Images/enquiries2.jpg" alt="Enquires" name="Image13" width="69" height="13" border="0" id="Image13" /></a><a href="Products.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/ourproducts.jpg',1)"><img src="Images/ourproducts2.jpg" alt="Products" name="Image14" width="93" height="13" border="0" id="Image14" /></a><a href="OurService.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','Images/ourservice.jpg',1)"><img src="Images/ourservice2.jpg" alt="Our Service" name="Image15" width="83" height="13" border="0" id="Image15" /></a><a href="Home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','Images/home.jpg',1)"><img src="Images/home2.jpg" alt="Home" name="Image17" width="50" height="13" border="0" id="Image17" /></a></div></td>
      </tr>
      <tr> 
        <td colspan="2" id="banner"><div id="headimg"><img src="Images/banner.jpg" width="981" height="126" /></div></td>
      </tr>
      <tr bgcolor="#000000"> 
        <td colspan="2" id="tagline"><img src="Images/special.jpg" width="399" height="30" />v</td>
      </tr>
      <tr bgcolor="#000000"> 
        <td id="sidebar"> <div align="center"><img src="Images/bean.jpg" width="200" height="300" align="baseline" /></div>
          <font color="#999999" size="-2" face="Arial">All content Copyright 
nt></td>
        <td bgcolor="#FFFFFF" id="content"> <div id="contentbox"> 
            <div style=" width:778px; height:395px; overflow:auto;">
              <table width="759" height="360" border="0" align="center" cellpadding="6" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
                <tr> 
                  <td height="356"><font color="#333399" size="4"><em><strong><br />
                    </strong></em></font> <blockquote style="margin-right: 0px;" dir="ltr"> 
                      <div align="center">
                        <form action="contact_form_next.php" method="post" name="Enquiry" id="Enquiry" onsubmit="return validateForm()">
                          <div align="left"><br />
                            <table align="center" class="noprint">
                              <tbody>
                                <tr> 
                                  <td colspan="2"><font color="#FF0000" face="Arial">Fields 
                                    marked with * are mandatory.</font></td>
                                </tr>
                                <tr> 
                                  <td><font color="#000000" face="Arial">Name<font color="#FF0000">*</font></font></td>
                                  <td><input maxlength="100" size="50" name="Name" id="Name" type="text" /></td>
                                </tr>
                                <tr> 
                                  <td><font color="#000000" face="Arial">Email<font color="#FF0000">*</font></font></td>
                                  <td><input maxlength="100" size="50" name="Email" id="Email" type="text" /></td>
                                </tr>
                                <tr> 
                                  <td><font color="#000000" face="Arial">Company:</font><font color="#FFFFFF">:</font></td>
                                  <td><input maxlength="100" size="50" name="Company" id="Company" type="text" /></td>
                                </tr>
                                <tr> 
                                  <td><font color="#000000" face="Arial">Address:</font></td>
                                  <td><input maxlength="100" size="50" name="Address" id="Address" type="text" /></td>
                                </tr>
                                <tr> 
                                  <td><font color="#000000" face="Arial">Phone<font color="#FF0000">*</font></font></td>
                                  <td><input maxlength="100" size="50" name="Phone" id="Phone" type="text" /></td>
                                </tr>
                              </tbody>
                            </table>
                            <p align="center"> 
                              <textarea rows="5" cols="45" name="Comments" id="Comments"></textarea>
                              <br />
                              <input name="Submit" value="Enquire" type="submit" />
                            </p>
                          </div>
                        </form>
                      </div>
                      <div align="center"></div>
                    </blockquote>
                    </td>
                </tr>
              </table>
              <div align="center"></div>
            </div>
          </div>
          </td>
      </tr>
    </tbody>
  </table>
</div>
</body></html>

Here is the PHP page.

Code PHP:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function validateForm() {
						if(document.Enquiry.Name.value == "") {
						alert("Please Enter The Value For name ");
 
						return false;
						}
						if(document.Enquiry.Email.value == "") {
						alert("Please Enter The Value For email ");
 
						return false;
						}
						if(document.Enquiry.Phone.value == "") {
						alert("Please Enter The Value For phone number");
 
						return false;
						}
 
		return true;
		}
 
 
/* This script is Copyright (c) Paul McFedries and 
Logophilia Limited ([url]http://www.mcfedries.com/)[/url].
Permission is granted to use this script as long as 
this Copyright notice remains in place.*/
 
function CalculateTotal(frm) {
    var order_total = 0
 
    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {
 
        // Get the current field
        form_field = frm.elements[i]
 
        // Get the field's name
        form_name = form_field.name
 
        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {
 
            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
 
            // Get the quantity
            item_quantity = parseInt(form_field.value)
 
            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }
 
    // Display the total rounded to two decimal places
    frm.TOTAL.value = round_decimals(order_total, 2)
 
}
 
function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}
 
function pad_with_zeros(rounded_value, decimal_places) {
 
    // Convert the number to a string
    var value_string = rounded_value.toString()
 
    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")
 
    // Is there a decimal point?
    if (decimal_location == -1) {
 
        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0
 
        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {
 
        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }
 
    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length
 
    if (pad_total > 0) {
 
        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}
 
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<title>Enquiries</title>
</head>
 
<body MARGINHEIGHT="0" TOPMARGIN="0" bgcolor="#000000" onload="MM_preloadImages('Images/contact1.jpg','Images/machines.jpg','Images/enquiries.jpg','Images/ourproducts.jpg','Images/ourservice.jpg','Images/coffeeorder.jpg','Images/home.jpg')">
<div align="center" height="100%"> 
  <table height="100%" border="0" cellspacing="0" id="layout" >
    <tbody>
      <tr> 
        <td width="200" id="tl">&nbsp;</td>
        <td id="tr"> <div antact-us"> 
            </a><> </a><a href="Contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Images/contact1.jpg',1)"><img src="Images/contact2.jpg" alt="Contact Us" name="Image11" width="80" height="13" border="0" id="Image11" /></a><a href="Machines.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','Images/machines.jpg',1)"><img src="Images/machines2.jpg" alt="Machines" name="Image12" width="72" height="13" border="0" id="Image12" /></a><a href="Order.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','Images/coffeeorder.jpg',1)"><img src="Images/coffeeorder2.jpg" alt="Coffee Order" name="Image16" width="91" height="13" border="0" id="Image16" /></a><a href="Enqiries.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Images/enquiries.jpg',1)"><img src="Images/enquiries2.jpg" alt="Enquires" name="Image13" width="69" height="13" border="0" id="Image13" /></a><a href="Products.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/ourproducts.jpg',1)"><img src="Images/ourproducts2.jpg" alt="Products" name="Image14" width="93" height="13" border="0" id="Image14" /></a><a href="OurService.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','Images/ourservice.jpg',1)"><img src="Images/ourservice2.jpg" alt="Our Service" name="Image15" width="83" height="13" border="0" id="Image15" /></a><a href="Home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','Images/home.jpg',1)"><img src="Images/home2.jpg" alt="Home" name="Image17" width="50" height="13" border="0" id="Image17" /></a></div></td>
      </tr>
      <tr> 
        <td colspan="2" id="banner"><div id="headimg"><img src="Images/banner.jpg" width="981" height="126" /></div></td>
      </tr>
      <tr bgcolor="#000000"> 
        <td colspan="2" id="tagline"><img src="Images/special.jpg" width="399" height="30" />v</td>
      </tr>
      <tr bgcolor="#000000"> 
        <td id="sidebar"> <div align="center"><img src="Images/bean.jpg" width="200" height="300" align="baseline" /></div>
          <font color="#999999" size="-2" face="Arial">All content Copyright 
ont></td>
        <td bgcolor="#FFFFFF" id="content"> <div id="contentbox"> 
            <div style=" width:778px; height:395px; overflow:auto;">
              <table width="759" height="360" border="0" align="center" cellpadding="6" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
                <tr> 
                  <td height="356"><font color="#333399" size="4"><em><strong><br />
                    </strong></em></font> <blockquote style="margin-right: 0px;" dir="ltr"> 
                      <div align="center">
                                           <?php 
		$mail_recipient = "hghghghggh";
		$mail_subject = "Enquiries";
					$Name = Trim(stripslashes($_REQUEST['Name']));
					$Email = Trim(stripslashes($_REQUEST['Email']));
					$Company = Trim(stripslashes($_REQUEST['Company']));
					$Address = Trim(stripslashes($_REQUEST['Address']));
					$Phone = Trim(stripslashes($_REQUEST['Phone']));
					$Comments = Trim(stripslashes($_REQUEST['Comments']));
		$Body = "";
					$Body .= $Name. "\n";
					$Body .= $Email. "\n";
					$Body .= $Company. "\n";
					$Body .= $Address. "\n";
					$Body .= $Phone. "\n";
					$Body .= $Comments. "\n";
									$headers .= 'MIME-Version: 1.0' . "\r\n";
									$headers .= 'Content-type: text; charset=iso-8859-1' . "\r\n";
 
			// send email 
$success = mail($mail_recipient, $mail_subject, $Body, $headers);
	if($success==true) {
	echo "Your mail has been Sent Successfully";}
	else
	{echo "Your mail has Not Sent Successfully";}
 
			?>
                      </div>
                      <div align="center"></div>
                    </blockquote>
                    </td>
                </tr>
              </table>
              <div align="center"></div>
            </div>
          </div>
          </td>
      </tr>
    </tbody>
  </table>
</div>
</body></html>

**Mittineague** · Jun 28, 2007 21:07

I see that the 2 files don't have any external CSS involved, and in fact are almost identical. Differences are the form's elements are in a table for layout and the mail() - message file is only text. The form's inputs have a width of 50, so with the label text in the cell to the left, the max width is approx. 60 characters wide, but the max message length is only 36 characters.
If the mail() - message file is the 1 that's always "normal", then I would guess that it's the table "widening" the page sometimes that's the effect you're seeing. (Am I correct? They look the same to me with Firefox 2.0.0.4)
If so, this most likely has to do with the way the different browsers deal with tables. Maybe you could layout the form using labels - fieldset instead? Or maybe put the input's text above the inputs instead of to the left of them?
BTW if that's a real email address, I suggest you do yourself a favor and edit your post to remove it. And anything else like directory paths you might not want others to see.

**Jill28** · Jun 28, 2007 22:25

I agree with Mittineague, its probably the table...though I haven't noticed anything similar myself.

**JeremyW** · Jun 28, 2007 22:50

What is someone going to do with my email? email me? Thanks for the advice though. I will look into it.

**spikeZ** · Jun 29, 2007 00:17

Originally Posted by JeremyW

What is someone going to do with my email? email me? Thanks for the advice though. I will look into it.

A human - possible but not much of an annoyance
an email harvesting bot that will find your email address and SPAM the living daylights out of you - probable

Personally I would edit the post

**JeremyW** · Jun 29, 2007 01:10

Yeah I removed it. The form is the normal one the php page is the one that is warping in Firefox.

**Mittineague** · Jun 29, 2007 07:44

I don't see any difference between the 2 (but it wouldn't be the first time I missed a detail). Of course I don't have the images, but all of them have height and width specified, so I don't think any of them are involved here.
Might you have a Firefox extension that's interfering?
EDIT:
I just went to the site's live pages. Still nothing I can see.
Are you referring to the fact that the table is aligned left but the thank you message is aligned center?

**JeremyW** · Jun 29, 2007 19:34

Hi. It was the table that was the problem. I resolved it by making the width to the same length as the banner on the PHP page. Which for some reason I don't actually need to do on the HTML page.

User Tag List

Thread: PHP and Firefox

Thread Tools

Display

PHP and Firefox

file extension

differences

differences

page warp

Bookmarks

Bookmarks

Posting Permissions