Formatting issue between browsers

js61283 · September 26, 2012, 9:00pm

First a little background: I’m very new to PHP. I’ve got a little HTML experience and some C++ experience but I’m learning PHP as I go. The site I am needing help with is the first PHP I’ve edited, and to further complicate things I inherited the site so I did not write the original code, nor do I have means of contacting the person that did (they are no longer employed by us).

On to the problem:

Currently I’m just working on revamping the overall look of the site (it was pretty awful). This has been far more painful then in a simple HTML site, since it’s nearly impossible for my untrained eyes to figure out what table or cell I seem to be editing. I am using Dreamweaver but it isn’t much help either. It doesn’t help that the PHP file is loaded with functions that do not help my brain process the order everything is in either. I actually think the code I need to edit is in HTML, but surrounded by the currently confusing PHP.

The site I’m working on can be found here: http://mmrp-formercampelliott-eastelliot.com/

The formatting issue I’m currently having (certainly not the first I’ve had) are the grey boxes that appear near the “References” menu. More importantly is the fact the boxes appear differently depending on which browser is being used. The site looks the most appropriate in firefox, while Internet Explorer adds an unwanted grey line under the Map image, and a dark grey area in the navigation bar above the map; and Chrome adds a grey box to the right and bottom of “References”.

Here’s the PHP for the site: (I apologize for it being so lengthy)

[php]

<?php if(!isset($_SESSION['_access_'])) { session_start(); session_regenerate_id(true); } function sanitize_paranoid($string) { $string = preg_replace("/[^a-zA-Z0-9!_. @-]/","",$string); return $string; } if(sanitize_paranoid($_GET['logout'])==1) { $_SESSION['njyur6543trwefgsbdhnfjr6u54yer']=""; } if ( (sanitize_paranoid($_POST['username'])=="ID_superadmin"&& sanitize_paranoid($_POST['password'])=="****") || (sanitize_paranoid($_POST['username'])=="Elliott-InDepth" &&sanitize_paranoid($_POST['password'])=="****") || (sanitize_paranoid($_POST['username'])=="Elliott-Stakeholders"&&sanitize_paranoid($_POST['password'])=="****") || (sanitize_paranoid($_POST['username'])=="Elliott-Accord"&&sanitize_paranoid($_POST['password'])=="****") || (sanitize_paranoid($_POST['username'])=="Elliott-USACE"&&sanitize_paranoid($_POST['password'])=="****") || (sanitize_paranoid($_SESSION['njyur6543trwefgsbdhnfjr6u54yer'])=="mkyui7u56y4ergsdfer3wt4y5u6") ) { $posted_correctly = "yes"; } if($_POST['username']) { if(sanitize_paranoid($_POST['username'])!=$_SESSION['iamthesuperadministrator'] ) {$_SESSION['iamthesuperadministrator'] = "";} } if(sanitize_paranoid($_POST['username'])=="ID_superadmin") {$_SESSION['iamthesuperadministrator'] = "ID_superadmin";} echo ' East Elliott

';echo ' ';if ( $posted_correctly == "yes") {echo ' ';}echo ' ';if ( $posted_correctly == "yes") {echo ' ';}if ( $posted_correctly != "yes") {echo "";}echo '

';echo '

'; if ( $posted_correctly == "yes") { $_SESSION['njyur6543trwefgsbdhnfjr6u54yer']="mkyui7u56y4ergsdfer3wt4y5u6"; if(sanitize_paranoid($_GET['p'])=="proj_documents") { f_project_documents(); } elseif(sanitize_paranoid($_GET['p'])=="ref_documents") { f_reference_documents(); } elseif(sanitize_paranoid($_GET['p'])=="maps") { f_maps(); } elseif(sanitize_paranoid($_GET['p'])=="photos") { f_photos(); } elseif(sanitize_paranoid($_GET['p'])=="proweb") { f_proweb(); } elseif(sanitize_paranoid($_GET['p'])=="contact") { f_contact(); } else { f_main(); } } else { if(sanitize_paranoid($_GET['p'])=="contact") { f_contact(); } else { f_login(); } } echo '

';echo '

Resources

USACE LA District
Home Page

MM-CX Reference Documents

Munitions Response Site (MRS) Inventory

';echo '

'; function f_login() { echo ' Log In

Username:
Password:

'; } function f_main() { echo ' Welcome

Welcome to the East Elliott Project Team Website. This website was designed as an information exchange site for Stakeholders, the Contractor Project Team and USACE. Use of this site is restricted to individuals with an authorized username and password. Please protect your password to prevent unauthorized use of this site.

Upcoming Events

';if ($_SESSION['iamthesuperadministrator'] == "ID_superadmin") { echo ' '; if ($_POST['calendar1']) { $message = $_POST["calendar1"]; $out = fopen("cal_data.php","w"); if (!$out) { print("Could not write to file"); exit; } fputs ($out,implode,("\n")); fwrite($out,"$message"); fclose($out); } echo ' '; $messagecontent = ""; $fp = fopen('cal_data.php','r'); if (!$fp) {echo 'ERROR: Unable to open file.

';exit;} $loop = 0; while (!feof($fp)) { $loop++; $line = fgets($fp,1024); $field[$loop] = explode (' | ',$line); $messagecontent .= $field[$loop][0].' | '.$field[$loop][1]; $fp++; } fclose($fp); echo '

Syntax: COLUMN1 | COLUMN2

'; echo $messagecontentecho; echo '

Project Schedule

Allowed file types: PDF, JPG '; } else { echo ' '; $fp = fopen('cal_data.php','r'); if (!$fp) {echo 'ERROR: Unable to open file.';exit;} $loop = 0; while (!feof($fp)) { $loop++; $line = fgets($fp,1024); $field[$loop] = explode ('|',$line); echo ' '.$field[$loop][0].' '.$field[$loop][1].' '; $fp++; } fclose($fp); echo '
Project Schedule

'; } echo '

'; } function f_project_documents() { echo ' Project Documents

'; if ($_SESSION['iamthesuperadministrator'] == "ID_superadmin") { echo 'Allowed file types: PDF, JPG '; } else { echo ' '; } echo '

'; } function f_reference_documents() { echo ' Reference Documents

';if ($_SESSION['iamthesuperadministrator'] == "ID_superadmin") { echo 'Allowed file types: PDF, JPG '; } else { echo ' '; } echo '

'; } function f_maps() { echo ' Maps

';if ($_SESSION['iamthesuperadministrator'] == "ID_superadmin") { echo 'Allowed file types: PDF, JPG '; } else { echo ' '; } echo '

'; } function f_photos() { echo ' Photos

';if ($_SESSION['iamthesuperadministrator'] == "ID_superadmin") { echo 'Allowed file types: PDF, JPG '; } else { echo ' '; } echo '

'; } function f_contact() { echo ' Contact Us

Justin Stanley
Webmaster
Indepth Corporation
Phone 619-507-8787
[email protected]

'; } function f_proweb() { echo ' Pro-Web Login

	Email:
	Password:

'; } echo ' '; ?>

[/php]

If it helps, here’s what the site use to look like:
https://www.mmrp-williams.com/

So you can see what I’ve changed…

Hope to hear from you guys.

malasho · September 26, 2012, 9:46pm

I looked at the site. You refer to the “References” menu, but I don’t see it. Did you mean “Resources”? If so, try changing the following:[php]

[/php]

To[php]

[/php]

Other than this, I don’t see any grey bars. You might want to take a screen capture and post a link to it if it is something else.

js61283 · September 26, 2012, 11:20pm

Yes, I did mean Resources. Thanks for catching that. I tried changing the table width to 100% but it didn’t seem to do anything.

Here’s some images to show what the site looks like in various browsers:

Firefox:

Chrome:

Explorer:

ttbakiatwoam · September 27, 2012, 9:09pm

First thing I am noticing is that your using

s where you should be using

s. I use a structure like this…

[code]

<!-- begin #header -->
<div id="header">
		
		<!-- begin #headerWrapper -->
		<div id="headerWrapper">      
			<!-- begin #headerLeft -->
			<div id="headerLeft">
			<!-- end headerLeft -->
			</div>
			<!-- begin headerRight -->
			<div id="headerRight">
				<div>      
				</div>
				<!-- begin search -->
				<div id="search">
				<!-- end search -->
				</div>
			<!-- end headerRight -->
			</div>
		<!-- end headerWrapper -->
		</div>

		<!-- begin headerNavBar -->
		<div id="headerNavBar">
		<!-- end headerNavBar -->
		</div>
<!-- end #header -->
</div>

<!-- begin innerWrapper -->
<div id="innerWrapper">

  	<!-- begin #sideColumn1 -->
  	<div id="sideColumn1">
    	<div>    
    	</div>
    <!-- end #sideColumn1 -->
    </div>

    <!-- begin #content -->
  	<div id="content">
    	<div>
    	</div>
    <!-- end #content --></div>

	<!-- Divs which control equal column behavior. Do not remove -->
    	<div class="clearer"></div>
    	<div class="col side1"></div>
    	<div class="col mid"></div>

<!-- end innerWrapper --></div>

<!-- begin #footer -->
<div id="footer">
<!-- end #footer -->
</div>

[/code]

paired with a css style sheet you can not go wrong and with the proper markups for Internet explorer your page will appear the same on every browser.

I recommend the book HTML, XHTML & CSS by CASTRO for basics on page format and design.

Journeyman1900 · September 28, 2012, 1:11pm

You may want to try adding a Doctype as the very first line in your index.html(or php or whatever)

try <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

that should make things in the different browsers more uniform.

info on doctype is below. hope that helps =)
http://www.w3schools.com/tags/tag_doctype.asp

ttbakiatwoam · September 28, 2012, 4:05pm

While that DOCTYPE maybe helpful for browser stability at this point it is not really necessary. If you were coding strictly in HTML I would say it is smart to have but the issues your experiencing are not related to DOCTYPE. They are simply how the browsers render the “defaults” of the table forms. Seriously look into DIV instead of TABLE and look into CSS for managing uniform layouts.

js61283 · September 28, 2012, 4:23pm

Thanks for the info. I’ll give Div a try in place of tables, though I’m still really new to this. Can I directly replace div for areas where table is being used? When I inherited the site it looked drastically different. The original format can be seen here:

https://www.mmrp-williams.com/

It did appear to format correctly in all browsers, which is why this has been so frustrating to me.

js61283 · September 28, 2012, 4:30pm

Looking closer at the example Andrew posted…

It appears to me that

is being used to call out something that’s located on the CSS file? This does seem much simpler if I’m understanding it correctly, I just hope that I’ll be able to place all the functions currently in the PHP file easily still.

ttbakiatwoam · September 28, 2012, 4:52pm

You should be able to replace them simply and using the CSS calls with the DIVs will/should give you a more uniform picture. The lack of a style sheet is the reason that your page appeared drastically different.

js61283 · September 28, 2012, 8:38pm

It does use a style sheet, css.css, but it seems to only use it for fonts. I’ll try replacing the tables with divs and let you guys know how it goes. Thanks a lot for all the help. If it wasn’t for forums nothing would ever get done.

ttbakiatwoam · September 28, 2012, 9:11pm

CSS can do so much more than just fonts.

js61283 · September 28, 2012, 9:26pm

I’m sure this is an incredibly newb question, but how do I know where I’m making changes using Div? If I use div class=header that seems to work fine, but changing the “Resources” bar on the right is proving much more difficult.

js61283 · September 28, 2012, 9:56pm

Kinda realized the question I just asked sucks and has no specifics.

If someone could help me format the header and sidebar with Div in place of tables, I think I can figure out the rest.

Here’s the code from the header: (at least I think it’s the whole header, I’m having the worst time navigating this PHP)

[php]

[/php]

This whole thing seems incredibly excessive just to show the header… I’m assuming that’s because he didn’t use a CSS file to style the page. I’m not sure what’s safe to eliminate and what isn’t. The individual that made this PHP claims they wrote it by hand, but there’s so much excessive crap that I have a really hard time believing that. For example, when I see name="" or alt="" I have a hard time believing that was written out on purpose…

anyways…

Here’s the sidebar code:

[php]

';echo '

Resources

USACE LA District
Home Page

MM-CX Reference Documents

Munitions Response Site (MRS) Inventory

[/php]

Whenever I try to edit the sidebar code with div instead of table the sidebar gets moved to the bottom of the page, so clearly I’m not doing it right.

Thanks again for all the help guys. Couldn’t get this done without your help.

ttbakiatwoam · September 28, 2012, 10:52pm

Look at this, not a table in site…

by modifying the css file and not the table definitions you can change the layout of the page. I have included the styles in in the code instead of as a separate file but you could do it that way.

[php]
@charset “UTF-8”;
/* University of Utah Stylesheet /
/ Design by David Titensor ([email protected]) /
/ Templates by U of U Media Solutions ([email protected]) */

/* Version 1.1, Released May 2007
Version 1.1 enhancements include:
- Organization name is now an image and replaces text-based title.
- Templates now support resizable text for browser zoom features.
- Fine-tuning of visual elements and code. */

/* — global styles — */

/* it’s good practice to zero the margin, padding, and other elements to account for differing browser defaults */
html, body, div, ul, ol, li p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;

}
body {
/* font: 100.01% Arial, Helvetica, “Trebuchet MS”,Verdana, sans-serif;/
/ background: #666 url(…/images/background/page-bg.gif) repeat;
/ background-color: #b5b5b5;
text-align: center; / this centers the wrapper in IE 5* browsers. The text is then set to the left aligned default in the #wrapper selector */
}

h1 { padding: 0.85em 0 0.5em 0; }
h2, h3 { padding: 0.5em 0 0.2em 0; }
h4, h5, h6 { padding: 0.5em 0 0 0; }
h1 { font-size: 130%; color: #666; letter-spacing: .02em; }
h2 { font-size: 110%; color: #900; }
h3 {
font-size: 85%;
color: #333;
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: 10px;
border-bottom: 2px #ccc solid;
}
h4 { font-size: 90%; color: #666; line-height: 1.0em; }
h5 { font-size: 85%; color: #c00; }
h6 { font-size: 85%; color: #333; font-family: Arial, Helvetica, sans-serif; }
p {
font-size: 90%;
color: #000;
margin: 0.2em 0 0.8em 0;
font-family: Arial, Helvetica, sans-serif;
}
strong { font-weight: bold; color: #333; }
em { font-style: italic; }
a { font-weight: normal; }
a:link { color: #8f5917; text-decoration: underline; }
a:visited { color: #666; text-decoration: underline; }
a:focus, a:hover, a:active { color: #600; text-decoration: none; }
hr {
border: 0;
color: #777;
background-color: #777;
height: 2px;
width: 100%;
margin: 5px 0;
text-align: left;
}

/* — page layout styles — */

#wrapper {
position: relative;
z-index: 5;
width: 90%;
max-width: 75em;
min-width: 58em;
margin: 0 auto;
background: #fff;
text-align: left; /* this overrides the text-align: center on the body element. /
box-shadow: -1px 3px 10px 5px #000;
}
#header {
position: relative;
z-index: 5;
width: 100%;
border-top: #000 6px solid;
/ box-shadow: inset -2px 7px 10px 5px #000;
/}
#headerLeft {
float: left;
width: auto;
}
#headerRight {
position: relative;
float: right;
width: 25em;
margin-top: -5px;
}
#headerNavBar {
clear: both;
text-align: center;
font-size: large;
padding: .75em;
background: #999; / for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#c4c4c4’, endColorstr=’#919191’); /* for IE /
background: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#919191)); / for webkit browsers /
background: -moz-linear-gradient(top, #c4c4c4, #919191); / for firefox 3.6+ /
}
#innerWrapper{
position:relative;
z-index:4;
width: 100%;
max-width: 75em;
min-width: 58em;
background: #fff;
clear:both;
/ box-shadow: inset 0px 0px 10px 5px #000; */

}
#sideColumn1 {
position: relative;
z-index: 1;
float: left;
width: 11.5em; /* since this element is floated, a width must be given /
padding: 15px 0; / top and bottom padding create visual space within this div /
}
#sideColumn2 {
position: relative;
z-index: 1;
float: right;
width: 23%; / since this element is floated, a width must be given /
padding: 0 0 30px 0; / top and bottom padding create visual space within this div /
}
#sideColumn1 div {
margin: 0 0 0 10px; / this creates the left and right margin for the side columns /
}
#sideColumn2 div {
margin: 0 0 0 0; / this creates the left and right margin for the side columns /
}
#content {
position:relative;
z-index: 1;
margin: 0 14em 0 13em;
}
#content div {
margin: 0 20px 0 10px; / padding here creates white space “inside the box.” /
width: 88%;
}
.col{
position: absolute;
z-index: 0;
left: 0;
bottom: 0;
}
.side1 {
position: absolute;
z-index: 0;
bottom: 0;
width: 12em;
}
.mid {
position:absolute;
z-index: 0;
bottom: 0;
width: 50%;
/ background: #fff url(…/images/background/uofu_medallion_lt.gif) bottom left no-repeat; /
left: 22%;
}
.side2 {
position:absolute;
z-index: 0;
bottom: 0;
width: 24%;
left: 76%;
/ border-right: #888 1px solid; /* color should be a bit darker than the lightest background color */
}
#footer {
clear: both;
position: relative;
z-index: 5;
min-height: 30px;
background-color: #333;
margin: -0.1em 0 0 0;
-moz-border-radius: 4px;
color: rgba(0,0,0, .8);
line-height: 1.5;
margin: 0px auto;
/*box-shadow: inset 0px 0px 5px 5px #000; */

}
#footer p, #footer ul {
text-align: center;
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs /
}
html>body .col { top: 0 } / hide from ie6 and under */
.clearer {
height: 1px;
overflow: hidden;
margin-top: -1px;
clear: both;
}

/* — header styles — */

/* — headerRight styles (top right bar) — /
#headerRight div ul {
float: right;
display: inline;
list-style: none;
font-size: 80%;
color: silver;
font-weight: normal;
margin: 0;
padding: .5em;
background-color: black;
border-bottom-left-radius: 15px;
/ box-shadow: -3px 3px 10px 1px #000;*/
}
#headerRight div ul li {
display: inline;
padding: 0 .25em 0 .5em;
margin: 0;
}
#headerRight div li + li {
border-left: silver 1px solid;
}

#headerRight div a:link, #headerRight div a:visited {
color: #fff;
text-decoration: none;
}
#headerRight div a:focus, #headerRight div a:hover, #headerRight div a:active {
color: silver;
text-decoration: none;
}

/* — search styles — */
#search {
float: right;
width: 17em;
text-align: right;
padding: .5em 1em 0 0;
}
#search form input {
display: inline;
margin: 0 .25em 0 0;
}
#search form label input {
width: 10em;
height: 1em;
margin-bottom: .4em;
}
#search form label {
font-size: 1px;
}

/* — headerNavBar styles — /
#headerNavBar ul {
width: 100%;
list-style: none;
font-size: 70%;
text-transform: uppercase;
font-weight: bold;
margin: 0;
padding: 0;
}
#headerNavBar ul li {
display: inline;
letter-spacing: 0.2em;
margin: 0;
padding: 0 2px 0 7px;
}
#headerNavBar li + li {
/ border-left: black 2px solid;
*/}
#headerNavBar a:link, #headerNavBar a:visited {
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 4px 2px 4px 7px;
}
#headerNavBar a:focus, #headerNavBar a:hover, #headerNavBar a:active {
font-weight: bold;
text-decoration: none;
padding: 4px 2px 4px 7px;
}

<div id="header">
	<!-- begin #headerWrapper -->
	<div id="headerWrapper">      
		<!-- begin #headerLeft -->
		<div id="headerLeft">
			<h1>East Elliot</h1>
			<h2>Remedial Investigation / Feasibility Study</h2>
			<!-- end headerLeft -->
			</div>
			<!-- begin headerRight -->
		<div id="headerRight">
			<div>      
			</div>
			<!-- begin search -->
			<div id="search">
			<!-- end search -->
			</div>
		<!-- end headerRight -->
		</div>
	<!-- end headerWrapper -->
	</div>
	<!-- begin headerNavBar -->
	<div id="headerNavBar">
		<ul>
			<li>Home</li>
			<li>Two</li>
			<li>Three</li>

		</ul>
	<!-- end headerNavBar -->
	</div>
	<div>
		<img src="http://mmrp-formercampelliott-eastelliot.com/images/headermap.jpg">
	</div>
<!-- end #header -->
</div>

<!-- begin innerWrapper -->
<div id="innerWrapper">
	<!-- begin #sideColumn1 -->
	<div id="sideColumn1">
   		<div>    
    	</div>
    <!-- end #sideColumn1 -->
    </div>

    <!-- begin #content -->
    <div id="content">
   		<div>
       	</div>
    <!-- end #content --></div>

    <!-- Divs which control equal column behavior. Do not remove -->
    <div class="clearer"></div>
    <div class="col side1"></div>
    <div class="col mid"></div>
<!-- end innerWrapper --></div>

<!-- begin #footer -->
<div id="footer">
<!-- end #footer -->
</div>

[/php]

js61283 · October 1, 2012, 9:29pm

Thanks again Andrew. Unfortunately I haven’t had a chance to tinker with making these changes yet, but I’ll let you know how it goes when I do. Thanks for taking the time to write out all the details. I’d give you +karma but maybe it’s disabled for newbs like me?

ttbakiatwoam · October 1, 2012, 9:31pm

You have to have 25 posts I think.