2 Replies - 4463 Views - Last Post: 03 March 2011 - 06:32 AM

#1 wgrayson   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 28
  • Joined: 18-May 09

Basic CSS styles not working in PhP? / IE 8

Posted 02 March 2011 - 10:49 PM

So, here is the link to a every PhP beginning class exercise using superglobals. The superglobal part works fine. It's the CSS application that doesn't. Here is the code for the "processor" page that actually works in all three browsers. I had to add a style for the <p> tag to make the output print center on the page.

<?php

echo '<html>
		 <head>
		 <title>Run_Get Processor Page</title>
		 <link href="mainstyle.css" rel="stylesheet" type="text/css" />
		 </head>';

$in_name = $_GET['name'];
$in_zip = $_GET['zip'];

echo '<body id = "processorPage">';//note the addition of an id tag for body which I don't need for Chrome or Firefox
echo "<p>Thank you, $in_name for submitting your zip code number: $in_zip!</p>";
echo '</body>';
echo '</html>';

?>





Here's the CSS:

body {
	width: 800px;
	margin-left: auto;//note this formatting
	margin-right: auto;//note this formatting
	font-size: 1.4em;
	font-family: "Arial Narrow",Arial, Helvetica, sans-serif;

}


form { 
     background-color:#FFC;
       border: 1px solid black;
	   padding: .3em;
}

#header {
	text-align: center;
	background-color: #006;
	color: white;
	font-weight: bold;
	border: 2px groove red;
}

#processorPage {//note this particular formatting
	text-align: center;
	color: #309;
}

#processorPage p {
	width: 550px;
	border: 2px double #309;
}




Please note that in the CSS I've formatted the <body> tag with auto margin-left and margin-right to achieve centering. This should center everything on the page. And in fact, it does center everything using Firefox and Chrome. It was only when I viewed it using IE 8 that the resulting text flushed left. I needed to add an id "processorPage" that centered text on the paragraph tag to center the resulting text in IE. Now, I know this isn't a CSS forum, but is there something in the way I echoed out the HTML lines in the PhP code that's causing the problem? Also note that the actual form page centers just fine using the CSS on the <body> tage without me having to add any extra styles in all three browsers For the sake of brevity I did not include the code here.

Is This A Good Question/Topic? 0
  • +

Replies To: Basic CSS styles not working in PhP? / IE 8

#2 Valek   User is offline

  • The Real Skynet
  • member icon

Reputation: 544
  • View blog
  • Posts: 1,713
  • Joined: 08-November 08

Re: Basic CSS styles not working in PhP? / IE 8

Posted 03 March 2011 - 12:10 AM

I don't know that I would have used that trick. The PHP code isn't causing any issues with the CSS, it's simple browser inconsistency. I typically use a container div as a solution to that particular problem instead of assigning an ID to the body tag (which is redundant as there can only be one body anyway).

Also, since this question is really more about CSS than PHP, I'll move it to HTML/CSS instead.
Was This Post Helpful? 0
  • +
  • -

#3 enjoibp3   User is offline

  • New D.I.C Head

Reputation: 14
  • View blog
  • Posts: 49
  • Joined: 02-March 11

Re: Basic CSS styles not working in PhP? / IE 8

Posted 03 March 2011 - 06:32 AM

Remove the ID on the body tag add a container around the <p> tag remove the styling on the paragraph and add that to your container tag. As far as I know if you have a width on the container and the margin set to 0px auto; it should work in most browsers.

#processorPage p {

}
#processorPage{
	width: 550px;
        height: auto;
	border: 2px double #309;
        margin: 0px auto;
}



So then your html/php could look like this.

<?php

echo '<html>
		 <head>
		 <title>Run_Get Processor Page</title>
		 <link href="mainstyle.css" rel="stylesheet" type="text/css" />
		 </head>';

$in_name = $_GET['name'];
$in_zip = $_GET['zip'];

echo '<body>';//note the addition of an id tag for body which I don't need for Chrome or Firefox
echo "<div id='processorPage'><p>Thank you, $in_name for submitting your zip code number: $in_zip!</p></div>";
echo '</body>';
echo '</html>';

?>




That worked in IE8 and the newest firefox for me.

This post has been edited by enjoibp3: 03 March 2011 - 06:33 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1