nl2br appears to break CSS formatting

[Storyman]

I had posted this in the CSS forum, but didn't get any feedback and have continued searching for an explanation without success.

The site is center column using CSS. The paragraphs are left aligned within the center column. The formatting sometimes breaks in both IE and FF. What happens is that the paragraphs that should be within the center column suddenly become flush left with the browser.

Resizing the browser will make the paragraphs reformat correctly. However, pressing F5 to refresh the browser does not always work.

Here is the CSS code used:

body {
margin: 0;
padding: 0px;
height: auto;
color: Black;
}
#container {
margin: 0px;
padding: 0px;
background-image: url(images/paper-rpt.jpg);
background-repeat: repeat-y;
background-position: center;
}
.separator {
background-image: url(images/paper-tp-bt.jpg);
background-repeat: no-repeat;
background-position: center;
height: 91px;
}
.content p{
margin: 0px;
padding: 0px 0px 8px;
}
.content {
padding-bottom: 20px;
padding-top: 20px;
width: 490px;
padding-left: 50%;
margin-left: -225px;
}
h2 {
text-align: center;
width: 500px;
padding-left: 50%;
margin-left: -270px;
vertical-align: middle;
font-size: xx-large;
}

Here is the relevent PHP code:

//Display content

if (!empty($recordset[$heading])) {
?><div class="separator">&nbsp;</div><h2><?PHP
echo nl2br($recordset[$heading]) . "</h2>"; }

if (!empty($recordset[$paragraph])) {
?><div class="content">&nbsp;<p><?PHP
echo nl2br($recordset[$paragraph1])."</p></div>";}

I'm guessing here, but have thought that nl2br might have something to do with it since it always happens after a <br />. The other thing I've thought of is that it might involve the cache. Is it possible to tell the browser to wait for the entire page to download before displaying?

[ironik]

if you need to buffer the output until it's all complete before echo'ing then I'd look into using the output buffer functions:

[php.net...]

I'm not sure that it's what you are after though, and I don't think the nl2br() should cause any formatting problems (although I think it outputs as <br> and not <br /> as it probably should).

It might have something to do with the negative margins you are using in your CSS, but I'm still learning layouts with CSS myself, so I cannot be sure... that wouldn't explain the intermittent nature of the problem (well, shouldn't anyway!)

[Storyman]

Just double checked to verify that nl2br is outputting a <br />, which it is. It might be because of the DOC Type that you use. I'm using transitional for XHTML.

Thanks for the buffer link.

[ironik]

mmm... think I'm still living in the dark ages. Apparently nl2br() outputs <br /> after php version 4.0.5.

[Storyman]

After using "ob_start();" in the head section and "ob_end_flush();" at the very end of the page the problem persist. A browser resize resolves the formatting issue, but that is not a solution.

Maybe I misunderstand the use and purpose of "ob_".

Surely, I can't be the only person who has had this problem.

[ironik]

To me, it doesn't sound like a php problem. The output buffer just stores whatever you have between it in a buffer, which is later output to the page.

I'd be checking in the CSS forum again...

[Longhaired Genius]

This sounds like a job for... The Validator [validator.w3.org].

Output a webpage with your desired doctype, tweak your code till it validates and the problem should disappear.

[StupidScript]

In the old days :), issues that can sometimes go away when the browser is resized or refreshed had to do with the layout of the page and the browser mishandling it, or not having enough information to handle it, or was given information to handle it that contradicted the actual layout.

A refresh/reload often cleans it up because the browser now has everything it needs to draw correctly.

In your case, with the style sheet you posted, I can see two things that might cause a browser to mishandle the layout, both in your initial

body

section:

body {

margin: 0;

padding: 0px;

height: auto;

color: black

}

should be adjusted to:

body {

margin: 0px;

padding: 0px;

color: black

}

(Added 'px' to margin and removed the height specification.)

In addition, your use of margin-left and then offsetting that by using padding can easily confuse even the best browser.

Remember that browsers read the entire page code into memory and display it, then reach back for the elements attached to the page. In this case, the PHP is being included before the page hits the browser, so it's not being treated like an image or other attachment, but it is a dynamic bit of data which does force an adjustment of the layout. Sometimes it's big, sometimes it's small.

Is there any predictability to the issues you note? For example, does it happen every time when there is a certain amount of data in the "content" section (which is further confused by the use of a ".content p" style instruction that clashes with the very next style instruction given to its parent style container)?

One last note is to be careful about your use of positioning instructions in inline (non-block) elements and in block elements that are not fully formed. (h2 is an inline element that you have asked to stretch to 500px ... a block element instruction, for example.)

All or any of these can cause problems as the browser attempts to divine your layout intentions, particularly when there is dynamic content. They seem like tiny little things, but add them up and ask the browser to layout a sophisticated arrangement, and you may uncover normally irrelevant issues caused by the way the browser is attempting to follow your instructions.

Definitely validate the code both in its HTML and its CSS. Once everything is cleaned up, at least those potential issues will be removed from the troubleshooting process.

[Storyman]

Longhaired Genius,

Took your suggestion and validated the code. It passed without any problems for both HTML and CSS.

Problem persist.

--------------------------------------

Stupid Script,

Made all of your suggested changes. Unfortunately the problem persist. Really expected that changing ".content p" and just using "p" would be key, but the problem persist.

Here is all of the CSS code:

body {
margin: 0px;
padding: 0px;
background-color: #4AC3DE;
background-image: url(images/logo.jpg);
background-attachment: fixed;
background-position: 98% 95%;
background-repeat: no-repeat;
color: Black;
}
#container {
background-image: url(images/paper-rpt.jpg);
background-repeat: repeat-y;
background-position: center;
}
.separator {
background-image: url(images/paper-tp-bt.jpg);
background-repeat: no-repeat;
background-position: center;
height: 91px;
}
.content p{
padding: 0px 0px 8px;
}
.content {
padding-bottom: 20px;
padding-top: 20px;
width: 490px;
padding-left: 50%;
margin-left: -225px;
}
h1 {
margin: 0px;
text-align: center;
}
h2 {
text-align: center;
font-size: xx-large;
}

I've tightened up the PHP code a bit and here is the relevent part:

if (!empty($recordset[$heading])) {
echo '<div class="separator"></div><h2>' . nl2br($recordset[$heading]) . '</h2>'; }

if (!empty($recordset[$paragraph1])) {
echo '<div class="content">' . nl2br($recordset[$paragraph1]) .'</p></div>';
}

For awhile I thought that the problem might be with the data being pulled from the DB and retyped the areas that were most commonly being affected--still no improvement.

I agree with StupidScripts that the formatting being corrected after the browser is resized signals that there is conflict in the CSS code and the way it is handled by the browser. What it is still evades me.

There are areas that seem to display the broken formatting more often than others. Still, it is not consistent and seems to shift around to which parts are affected.

[Longhaired Genius]

If both the HTML and the CSS validate, I suspect the problem is with the CSS. The CSS validator is concerned only with its well-formedness, not with how browsers interpret its demands.

[Storyman]

Oops! It was late and I put up the wrong CSS code. This is the correct version:

body {
margin: 0px;
padding: 0px;
background-color: #4AC3DE;
background-image: url(images/logo.jpg);
background-attachment: fixed;
background-position: 98% 95%;
background-repeat: no-repeat;
color: Black;
}
#container {
background-image: url(images/paper-rpt.jpg);
background-repeat: repeat-y;
background-position: center;
}
.separator {
background-image: url(images/paper-tp-bt.jpg);
background-repeat: no-repeat;
background-position: center;
height: 91px;
}
.content {
padding-bottom: 20px;
padding-top: 20px;
width: 490px;
padding-left: 50%;
margin-left: -225px;
}
h1 {
margin: 0px;
text-align: center;
}
h2 {
text-align: center;
font-size: xx-large;
}
p{
padding: 0px 0px 8px;
}