Log in

View Full Version : php includes and div tags in firefox


kosi
04-06-2007, 09:59 PM
I've noticed that in ie, when i include a php variable in the middle of a div tag, the text of the variable takes on all the properties of the div tag, but when i open the page in firefox, the div tag makes a creative desicion to end itself right before the variable content. I've also noticed that it does not do this when I build in tables rather than in div tags. I've been told that it's better to build in div tags than in tables, but i can't make div tags work in firefox. Have other people had this problem or is it just me? How do other people make it work?
Twey
04-06-2007, 10:00 PM
Chances are, Firefox is doing the right thing, but can you give us the code (just the <div> and the PHP inside it should be fine)?
mburt
04-06-2007, 10:08 PM
I think he/she is trying to demonstrate that:

<div><?php
echo "foo";
?></div>
in Firefox will make:

<div>foo</div>
but in IE:

<div>
foo
</div>

But I'm not exactly clear on it, so again, it would be helpful to have the code in question.
kosi
04-06-2007, 10:09 PM
Whether or not firefox is doing the "right thing", it looks the way I want it to look in ie and nothing like how i want it to look in firefox.

I had to modify the code (on this page, at least) to make it somewhat functional, so that now it looks like this:


<table id='main' ><tr><td>


<img src='images/to_morrows_title.png' alt='To Morrows Tours -- Taking good care of you in New York City' /><br/>
<h3 style='margin-top: 0px;'><i>Taking Good Care of You in New York City</i></h3>

</center>

<?php

if ($browser == "firefox") {
echo("<iframe src='");
if ($p == "home") {
echo("page1.phtml");
} else if (file_exists("$p.phtml")) {
echo("$p.phtml");
} else {
echo("badpage.phtml");
}
echo("' width='$div_width"."px' height='400px' frameborder='0' ></iframe>");
} else {
if ($p == "home") {
include_once("page1.phtml");
} else if (file_exists("$p.phtml")) {
include_once("$p.phtml");
} else {
include_once("badpage.phtml");
}
}


?>

<p align='center' width='100%'>
<a href='?p=home'>Home</a> - <a href='?p=services'>Services</a> - <a href='?p=exclusive'>Exclusive Offerings</a> - Testimonials - <a href='?p=newsletter'>Newsletter</a> - <a href='?p=contact'>Contact us</a>
</p>

</td></tr></table>

but I don't want to do it that way, because that means that I have to add <html>, <head>, and <body> tags to all of my includes and style each of those pages individually when all I want is to include the content of those pages onto the main page. Before, i had it like this:


<div id='main' >

<img src='images/to_morrows_title.png' alt='To Morrows Tours -- Taking good care of you in New York City' /><br/>
<h3 style='margin-top: 0px;'><i>Taking Good Care of You in New York City</i></h3>

</center>

<?php

if ($p == "home") {
include_once("page1.phtml");
} else if (file_exists("$p.phtml")) {
include_once("$p.phtml");
} else {
include_once("badpage.phtml");
}


?>

<p align='center' width='100%'>
<a href='?p=home'>Home</a> - <a href='?p=services'>Services</a> - <a href='?p=exclusive'>Exclusive Offerings</a> - Testimonials - <a href='?p=newsletter'>Newsletter</a> - <a href='?p=contact'>Contact us</a>
</p>

</div>
mburt
04-06-2007, 10:13 PM
Unless you have previously defined $p, it won't work. $p is null. I don't know what purpose p is supposed to have either.
kosi
04-06-2007, 10:13 PM
I think he/she is trying to demonstrate that:

<div><?php
echo "foo";
?></div>
in Firefox will make:

<div>foo</div>
but in IE:

<div>
foo
</div>

But I'm not exactly clear on it, so again, it would be helpful to have the code in question.

The problem is not the way the html code is printed, as that is pretty much exactly the same in firefox and ie. The problem is the way the browser renders the html. To use your example, the page appears as if instead of this:

<div>foo</div> I had told it to do this:
<div></div>foo which is not at all what i want.
kosi
04-06-2007, 10:15 PM
Unless you have previously defined $p, it won't work. $p is null. I don't know what purpose p is supposed to have either.

That is also very much not the problem. If you look at the <a> tags at the bottom of the code, you'll see that $p is defined by whatever link the user clicks on. And there is a default "intro" page for when $p == "", but that doesn't have anything to do with what i'm asking about.
Twey
04-06-2007, 10:20 PM
Hmm, I don't see anything wrong there... can you give us the sample output where the rendering differs between Firefox and IE?

As you're probably already aware, the mere fact that it's PHP doesn't make any difference at all; if you replace the PHP with the problematic output, the same thing should still occur.
kosi
04-06-2007, 10:47 PM
Hmm, I don't see anything wrong there... can you give us the sample output where the rendering differs between Firefox and IE?

As you're probably already aware, the mere fact that it's PHP doesn't make any difference at all; if you replace the PHP with the problematic output, the same thing should still occur.

As a matter of fact, it had not occurred to me to replace the php with the problematic output, although i did have some idea that that's what it might be . . . I first tried including different pages and got similar results. Then it occured to me that the pages i've included are laid out in tables and div tags. When I tried replacing the php with the contents of the page, i got the same result, leading me to believe that firefox doesn't do well with nested divs . . . unless i'm doing this completely wrong.
kosi
04-07-2007, 12:04 AM
. . . is the problem with the nested divs and tables or am i doing this completely wrong?
Twey
04-07-2007, 09:21 AM
Well, we don't know unless you actually show us said output.
kosi
04-08-2007, 08:37 PM
sorry.

Snippet from main page:

<div id='main' >

<center>

<img src='images/to_morrows_title.png' alt='To Morrows Tours -- Taking good care of you in New York City' /><br/>
<h3 style='margin-top: 0px;'><i>Taking Good Care of You in New York City</i></h3>

</center>

<?php

if ($p == "home") {
include_once("page1.phtml");
} else if (file_exists("$p.phtml")) {
include_once("$p.phtml");
} else {
include_once("badpage.phtml");
}


?>

<p align='center' width='100%'>
<a href='?p=home'>Home</a> - <a href='?p=services'>Services</a> - <a href='?p=exclusive'>Exclusive Offerings</a> - Testimonials - <a href='?p=newsletter'>Newsletter</a> - <a href='?p=contact'>Contact us</a>
</p>

</div>


Sample include:

<div style="float: left">
<img src='images/empire_blue.jpg' width='175' />
</div>

<div>
<h6 align='center'>SPECIALIZING IN CUSTOMIZED TOURS OF</h6>
<h2 align='center'>New York City</h2>

<p><span class="h4">To Morrows Tours</span> is a Destination Management Company with 14 years of experience in the New York City Tour Industry. We specialize in Group Tours offering the Standard All Inclusive Tour or a Customized, Personalized Package of New York City. For Students, Adults, Seniors, Special Interests, we can give you the Ultimate Visit to New York City!</p>

<p>Careful planning, knowledge, leadership, our high standards of quality and service will provide you with a most exciting trip to the Big Apple. All your dreams of New York City tailored to your specifications, your interests, your budget.</p>

<p>We present to you a full range of services of all that New York City has to offer – the sights, the sounds, the tastes, the people – the accommodations, the transportation, the attractions,
dining, the entertainment, we can put it all together for you ! </p>

<p>The bottom line is this:</p>
<p>With <span class="h4">To Morrows Tours</span> you don't have to select from two or three pre-planned packages, together we can design the specific tour package that is the best for your group!</p>
</div>

<br clear='all'/>
Twey
04-08-2007, 10:01 PM
And the style that should, but doesn't, apply to the contents of that <div>?
kosi
04-11-2007, 07:36 AM
Right. (Sorry this reply took so long, but my comp was in the shop for a while.) It applies the style up until the <?php tag and then it stops applying the style.
Twey
04-11-2007, 10:56 AM
Yes, but can you paste the actual style, please?
mburt
04-11-2007, 03:40 PM
CSS can affect any element, and change it's properties completely.
For example, you could make <p> (a block-level element) become inline with "display:inline;".
Unless we can see the CSS code, there's nothing we can do.
kosi
04-11-2007, 09:51 PM
This is the code:

<link rel='stylesheet' type='text/css' href='z_style.css' />
<style type='text/css'>
body {background: #ffffee url(<?=$bg?>) fixed; color: black; font-size: 16px;}

html{scrollbar-track-color: <?=$track_color?>;}

#main {width: <?php

$title_image = "images/to_morrows_title.png";
list($title_width) = getimagesize($title_image);
$div_width = $title_width + 20;
echo($div_width); ?>px; border: blue 1px solid;
padding: 10px;
background: #ffffee;
text-align: center;}

</style>

and this is how the code looks after being parsed by the browser

<style type='text/css'>
body {background: #ffffee url(images/empire_bg_lite.jpg) fixed; color: black; font-size: 16px;}

html{scrollbar-track-color: #ddcc88;}

#main {width: 692px; border: blue 1px solid;
padding: 10px;
background: #ffffee;
text-align: center;}

</style>

this is the linked stylesheet

html{ scrollbar-face-color: #ffcc00;
scrollbar-arrow-color: #ffffff;
}

body{ color: black; font-size: 16px;
margin-top: 50px;
margin-bottom: 50px;}

a:link {color: blue;}
a:visited {color: blue;}

a.nav:link, a.nav:visited {font-size: 12px; text-decoration: none;}

h1, .h1 {color: blue; font-size: 48px; font-weight: bold; font-family: itc zapf chancery, monotype corsiva, georgia, serif;}
h2, .h2 {color: red; font-size: 48px; font-weight: bold; font-family: ITC Zapf Chancery, monotype corsiva, georgia, serif;}
h3, .h3 {color: red; font-size: 24px; font-weight: bold; font-family: itc zapf chancery, monotype corsiva, georgia, serif;}
h4, .h4 {color: blue; font-size: 24px; font-weight: bold; font-family: itc zapf chancery, monotype corsiva, georgia, serif;}
h5, .h5 {color: red; font-size: 18px; font-family: times new roman, serif; font-weight: bold;}
h6, .h6 {color: blue; font-size: 18px; font-family: times new roman, serif; font-weight: bold;}

p.ind {text-indent: 40px; text-align: justify;}


.question {text-align: right; vertical-align: top;}
.answer {text-align: left; vertical-align: top;}

input, select, textarea {border: 1px #ffcc33 solid;}
textarea {scrollbar-track-color: #ffffff;}
input.box {border: 0px none;}
input.submit {background: #ffffee; border: 2px #ffcc33 outset;}

In firefox, after the php include, the div box stops being offwhite and the content spreads itself out to the limits of the browser window, just as if there were no #main style there, and bizarrely enough, it does not do this when i turn <div id='main'> into <table id='main'><tr><td>.
boxxertrumps
04-11-2007, 11:55 PM
I get what he means...
IE's height/width properties are equivalent to W3's min-height/min-width properties.
try this:

selector.class {
height:100px;
min-height:100px;
}

I THINK that the min-height will overwrite height in FF, but will be ignored in IE.
kosi
04-12-2007, 12:13 AM
I get what he means...
IE's height/width properties are equivalent to W3's min-height/min-width properties.
try this:

selector.class {
height:100px;
min-height:100px;
}

I THINK that the min-height will overwrite height in FF, but will be ignored in IE.

Thanks, but it actually made it worse, because it made the div get truncated down to 100px.
mburt
04-12-2007, 12:22 AM
Err... don't you want it at 100px?
boxxertrumps
04-12-2007, 12:36 AM
you CAN replace it with your own height/width you know...

<?php
$title_image = "images/to_morrows_title.png";
list($title_width) = getimagesize($title_image);
$div_width = $title_width + 20; ?>
#main {
<?php echo " width:".$div_width ."px;\r\n";
echo " min-width:". $div_width; ?>px;
border: blue 1px solid;
padding: 10px;
background: #ffffee;
text-align: center;}
kosi
04-12-2007, 01:00 AM
you CAN replace it with your own height/width you know...

The problem is not the width. The width is exactly what I want. The problem is that ff is abandoning the width, and also the background color, and the border.

This is getting frustrating.

I think i'm just going to change the <div> into a <table>. Despite everyone's qualms about tables and the clamor for table-less design, it's working and the <div> is not.