PHP breaks CSS menu

PHP_kid · July 9, 2010

this is odd. i created a CSS menu (syles applied to li and ul tags). the menu works fine in IE and FF. my site is hosted by Network Solutions on linux, i think its the latest PHP. my index page is all PHP and real short. 1st few lines looks for a "page" variable, and index has 3 includes at the end. 1st is my header code file, 2nd is body file (varies depending on "page" variable), and 3rd is footer file.

ok, here's whats odd. the menu works fine in a standalone html file but does not work in IE when loaded up via PHP, the menu tabs will not expand. here's what's even stranger, i do a view source on my index.php from IE and copy out all of the code into a test file (test.php) and load that up onto the server, and when i get test.php via IE the menu works.

as a note, the menu code and css is loaded via 1st include file "header".

any reason for this odd behavior?

trq · July 9, 2010

This wouldn't have anything to do with php. have a look at the produced html (view source) and see what that looks like.

PHP_kid · July 9, 2010

This wouldn't have anything to do with php. have a look at the produced html (view source) and see what that looks like.

thats what i said i did, i copied it all out into a php or html file, and when i call that file it works.

kenrbnsn · July 9, 2010

Please post your code.

Ken

PHP_kid · July 9, 2010

index.php

<?php
$val = $_GET['page'];
if ($val == ''){
$val = "main";}
else {

         if(file_exists($val)) {

                               } 

                else {
                      $val = "main";
                       }
        }
include "head2"; 
include "$val"; 
include "footer3.php"; ?>

trq · July 9, 2010

That code does not help us at all.

PHP_kid · July 9, 2010

CSS style and images in attached zip, it all runs in the same root. it fails to work when it loads from index.php, but works if i copy out the source to a html file. only a issue in IE

index.php

<?php
$val = $_GET['page'];
if ($val == ''){
$val = "main";}
else {

         if(file_exists($val)) {

                               } 

                else {
                      $val = "main";
                       }
        }
include "head2"; 
include "$val"; 
include "footer3.php"; ?>

footer3.php

</body></html>

main

<br><br><br><br><br><br><br><br><br><br><br>
test test test

head2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<meta name="keywords" content="test, test, test">
<meta name="description" content="testing css menu">
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">



<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css" MEDIA=screen>



</head>
<body bgcolor=#000000 text=#FFFFFF>



<div id="menuposition">

<ul id="cssMenu">
<!-- BUTTON 1 -->
<li class="istylei0"><a class="istylei0" href="#" target="_main">Home</a></li>


<!-- BUTTON 2 -->
<li class="istylei0"><a class="istylei0" href="#"><span>1</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a href="#">10</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>



<!-- Button 3 -->

<li class="istylei0"><a class="istylei0" href="#"><span>2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>




<!-- BUTTON 4 -->

<li class="istylei0"><a class="istylei0" href="#"><span>3</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>









<!-- BUTTON 5 -->

<li class="istylei0"><a class="istylei0" href="#"><span>4</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>





<!-- BUTTON 6 -->

<li class="istylei0"><a class="istylei0" href="#"><span>9</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
<!------------------------------------------------------------------------------------->		

		<li class="istylei0"><a class="istylei0" href="#"><span>10</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<!------------------------------------------------------------------------------------->
<li class="istylei0"><a class="istylei0" href="#"><span>10</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<!------------------------------------------------------------------------------------->
<li class="istylei0"><a class="istylei0" href="#"><span>10</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>


<!------------------------------------------------------------------------------------->
<li class="istylei0"><a class="istylei0" href="#"><span>10</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>




	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>




<!-- BUTTON 5 -->

<li class="istylei0"><a class="istylei0" href="#"><span>11</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="istylem0" style="width:auto;">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>









<!-- BUTTON 6 -->

<li class="istylei0"><a class="istylei0" href="#">12</a></li>
</ul>
</div>

[attachment deleted by admin]

PHP_kid · July 9, 2010

bump, can anyone identify the issue?

PHP_kid · July 9, 2010

weird, when i view src in ie and ff, i select all and copy it over to ultraedit, i find some odd things.

in ff i find a '?' as the 1st char, and again as 1st char of 1st line from main.

from the ie src copy, i dont find '?', but i found a special char (a dot) as the 1st char of 1st line of main.

but when i highlight the dot and do a find, the find field displays the square box symbol. could this be messing up ie? is php doing this, and if why?

PHP_kid · July 10, 2010

bump, anyone ?

if you copy this code to your php server do you get the same issue i am?

i also simplified my if/else to be (and i am sure i could simplify further using boolean "if file does not exist", is that a "!file_exists()" )?? not sure, but the code is so short i dont think it matters right now.

if(file_exists($val)) {

                               } 

                else {
                      $val = "main";
                       }

Pikachu2000 · July 10, 2010

The if( file_exists($_GET['page']) ) { conditional doesn't take into consideration any file extensions. If the GET var matches a file in the directory, it uses it, if it does not, it tries to include a file named simply "main". If there is such a file, the PHP interpreter isn't parsing it, I'm sure. So if there's any PHP in it, it will just be sent directly to the browser.

I also see from the first few lines of html you have up there that your quoting is not consistent. That can (rarely, but possibly) cause issues with some browsers.

<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css" MEDIA=screen>
<head>
<body bgcolor=#000000 text=#FFFFFF>

The syntax of your HTML conditionals appears to be off, also. You have: <![if gt IE 6]></a><![endif]>, instead of like below. Note that the opening comment tag in yours is malformed, so it's probably just ignoring the whole thing. That would certainly explain why the problem only manifests itself in IE.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

PHP_kid · July 10, 2010

Pikachu2000,

those minor issues does not explain why it doesnt work when fed via index.php, but does work when i copy out the source after calling index.php from IE.

why does IE work differently when there is zero diff between the "view source" of index.php and test.php (test.php being nothing more than a source copy of index.php)??

as for the GET for files without extension, what does it matter is they have extension or not? if the file (the ?page variable) does not exist in the directory then the page is to load the main page named "main". are you saying that if "main" has php code in it the php parser will not parse it? my "main" page has no php in it, but good to know either way.

PHP_kid · July 10, 2010

i may have found the issue.

when i view src of index.php in IE i get a special char as the 1st char in the src. this char is not there when i copy out the src to a new html file.

it looks like the unix line break char (little square box). it looks like PHP is adding that char during the 1st and 3rd include, its not there in the 2nd include. this char is not in any of my files.

line breaks typically will not affect a browser, but maybe this time it has. IE 7.0.5730.13 and latest IE8. maybe IE cant handle seeing a line break as the 1st char of the data??

can someone verify for me if you load this test code files onto your rev of PHP do you get same issue, or does the menu work fine? as a side note, i always transfer my files as binary via FTP.

kenrbnsn · July 11, 2010

i always transfer my files as binary via FTP.

Why, source file are ASCII (i.e. text). This could be your problem.

Ken

myrddinwylt · July 11, 2010

PHP_Kid,

I have seen this problem before. If you are doing what I think you are doing, don't!

The "include" command is mean to execute php code, not simply for the display of HTML/CSS content. If the files you wish to include are HTML, consider doing the following instead:

$body = file_get_contents("yourfilename.html");
echo $body;

If you have some code you wish to execute and have displayed statically, you could consider entering a placeholder tag in the file yourfilename.html such as ##BODY##, and then doing the following:

$str = '<p>This is a really cool page</p>';

$body = file_get_contents("yourfilename.html");
$body = str_replace("##BODY##", $str, $body);

echo $body;

I find this method is much simpler and more flexible in a lot of cases than using template packages such as Smarty, as a lot of times, I don't really need any advanced features that those packages provide for template/php combining.

Feel free to modify the amount of "tags" you create and their content in which they are replaced. Some servers do have file_get_contents() disabled, so you could always store the HTML in a database record, and then retrieve it from their instead.

kenrbnsn · July 11, 2010

No. You can use the include function to include any type of file into the stream. If the file doesn't start with "<?php", the contents are just passed through like any non-php content.

Where did you hear of your explanation?

Ken

PHP_kid · July 11, 2010

thnx for the replies.

as for ftp, i've had page and image issues in the past doing ascii transfer. and no, ftp is not the issue as i have tried it as binary and ascii, still same issue.

as for PHP code for index.php, i have tried several ways to create the page, from using includes for each section, to setting a file_get_contents variable for each section and using echo on each variable, and using a single echo $variable1 . variable2 . variable3;

no matter how i create my index.php i get the same issue with IE.

kenrbnsn · July 11, 2010

Images must be transferred as binary with ftp. Source files should be transferred as ASCII.

Ken

PHP_kid · July 11, 2010

Images must be transferred as binary with ftp. Source files should be transferred as ASCII.

Ken

i had issues in the past that after uploading a plain 'ol html file via ascii it wouldnt load into the browser. i transfer it via binary and it worked. for about 3 years now i have been transferring everything via binary and not one issue since........

this current issue has me baffled.

myrddinwylt · July 11, 2010

kenrbnson;

I have seen it cause problems in action. "INCLUDE" tries to interpret the syntax of the file. Here is a great example of an opening tag which causes the interpreter to go wonky straight from W3.org. There are a lot of others, but really don't want to waste my time researching and listing them all, just take my word for it, INCLUDE executes code. FILE_GET_CONTENTS / ECHO ... will display the contents as is. Even Smarty has trouble with CSS / Javascript / etc, due to similarities in language syntax's, openings of code, etc.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>

There could also be other problems at play here which could be bypassed by simply spewing out the contents of the file using file_get_contents(), such as SSI support. SSI allows for inclusion of other files using the following format:

<!--#include virtual="insertthisfile.html" -->

Which PHP may also interpret as an opening statment because of the "<!" ... again server configuration depending. You are also aware that "<%", or pretty much whatever you wanna name the tag can be used as openers, and being able to define settings in php.ini using php commands such as "ini_set_" .... This could be done with any third party control, etc.

Essentialy, what I am saying, is there are so many variables on how "include" to include a file containing HTML for display can go wrong, it is simpler just to state, file_get_contents(), or another stdin/stdout of the file such as from a database, other server, etc, is much safer.

PFMaBiSmAd · July 11, 2010

Here is a great example of an opening tag which causes the interpreter to go wonky straight from W3.org.

Only if you don't have an understanding of php's list of blunders. That code would be affected by php's short open tag setting.

PHP_kid · July 11, 2010

myrddinwylt,

but as i noted, i tried index.php w/o includes and i still see the same issue.

and, if PHP was to do something bonkers would i not see that when i did a view source?

myrddinwylt · July 11, 2010

That particular instance, sure, but there are plenty of others. Google is your friend, and the list of blunders is huge.

Here is a great example of an opening tag which causes the interpreter to go wonky straight from W3.org.

Only if you don't have an understanding of php's list of blunders. That code would be affected by php's short open tag setting.

kenrbnsn · July 11, 2010

Ok. I have taken the OP's code and put it on my server. It seems to work fine in the three browsers I tested: IE8, FF 3.6.6 and Chrome 5.0.375.86. The URL on my server to test it is: http://www.rbnsn.com/phpfreaks/php_kid/

Ken

PHP_kid · July 11, 2010

thnx Ken.

that works in all of my browsers......... so that leads me to believe the PHP running at NetSol is whacked....

it is confirmed, the issue seems to be the 1st byte of my src after calling index.php, the 1st byte is a special char (unix line break, the small box symbol), see attached pic. when i copy out the src it was removing this char, hence why it then worked.

so why do i get a special char as 1st byte?? i'm gonna try a different text editor....

[attachment deleted by admin]

Sign In

PHP breaks CSS menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information