Issue with embedded tags within existing tag

jwhite68 · September 25, 2007

I have a simple test piece of code that is annoying me. This is just a mock up of my problem.

Heres the code:

<!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=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="offer1">
<p class="marg15">
<strong>Description</strong>
<br /><br />
<P>Good looking car. </P>
<P>This is a red car.</P>
The car is in working order.<br />
</p>
</div>
</body>
</html>

My issue is this. The last text sentence 'The car is in working order' should appear at margin 15px. But it appears at margin 0px.

If I remove the two preeceding paragraph sections from the code, ie make it

<!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=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="offer1">
<p class="marg15">
<strong>Description</strong>
<br /><br />
The car is in working order.<br />
</p>
</div>
</body>
</html>

It works.

Its as if inserting 2 paragraphs, within the existing defined paragraph is causing the problem.

Can anyone advise?

The stylesheet data is:

div.offer1{
   overflow: auto;
width: 874px;
border: 1px solid #DDDDDD;
margin-top: 10px;
background: #F4F3EE !important;
/* display: table !important; */
}
div.offer1 p{margin:15px !important;}
.marg15{
margin: 15px;
}

Any advice appreciated.

dbrimlow · September 25, 2007

You can't nest (embed) block level tags within block level tags. It is bad code.

You should also decide if you want xhtml tags or html tags. Since you designate html 4, you should lose the xhtml style break tags (in html br is good enough).

Also, get consistent with your tags either uppercase or lowercase (xhtml requires lowercase).

jwhite68 · September 25, 2007

hi dbrimlow.

I will explain some background to see if you can advise.

I have a piece of PHP that generates this HTML, and its like this:

<div class="offer1">
                <p class="marg15">
                <strong class="gu">Summary</strong><br /><br />
                <?=$summary?>
                <br /><br />        
                <strong class="g">Description</strong>
                <br /><br />
                <?=$desc?>
                <br />
                </p>
            </div>

All of the text in my earlier example was pulled from a client in HTML format. Which means $desc gets the sentences with tags in it. I dont strip out the tag because its needed.

So, if I am taking client data this way, which I dont have control over, do you know how I can handle this tag issue?

You see, if the data sent from the client is just pure text, then the above PHP generates the HTML fine, with the and . The issue comes about if the HTML string contains some text with tags, and other text afterwards without tags.

I dont have control over the clients HTML, so the tags could be upper/lower case based on what they provide to me.

Hope this makes sense.

dbrimlow · September 25, 2007

Ahh, the old client data entry.

As administrator, you DO have control over anything a client does. But it takes a lot of work.

Regular Expressions! Thats how I control most of the crap that sits in our database that iss entered by some 18 year old who spends more time talking on the cell phone all day.

But, in this specific case, it seems easy. First, code your structure properly:

Summary

<?=$summary?>

Description

<?=$desc?>

</div>

Now use a regular expression to check if your variables $summary and $desc have open and closing p tags and if they don't, add them.

Unfortunately, my preg skills are not good off the cuff. I suggest going to the reg ex threads here at phpfreaks. Those guys there ARE freaks!

jwhite68 · September 25, 2007

Thanks, I will look at this. Meanwhile:

If I change it to:

<!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=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="offer1">
<p class="marg15">
<strong>Description</strong>
<br><br>
</p>
<P>Good looking car. </P>
<P>This is a red car.</P>
The car is in working order.<br>
</div>
</body>
</html>

Any ideas what I can change in the stylesheet details to make the last sentence display at 15px to?

dbrimlow · September 25, 2007

Wait a minute. You can't just leave a string of "text" flappin' in the breeze like that.

Text must be put into a proper block level tag. And those ending br tags will cause cross-browser issues (because break tags belong within a line of text .... that's while they are called "break" tags - they provide a forced line break in the middle of text content). Slapping them on at the end of a string of text will cause cross-browser issues (IE 6.0 doesn't always recognize a double br tag as two lines).

YOU need to control the content any way you want in your style sheet. First, it KILLS me seeing you use those damn break tags for spacing. Get a handle on your p tags. If they are within a div class, set the p for that class:

.offer1 p {margin: 5px 0;} This creates a 5px margin on top and bottom of the paragraph, and zero margin for left and right.

I don't know what you have in .marg15, but why not add - font-weight:bold - to it, so you can remove the strong tags in the markup level. Try to style as much as can be done OUTSIDE of the markup. Leave your markup as clean as possible. Let the class or id control it. You will be amazed at how using classes for styling removes hundreds of lines of php code because you don't have to echo the markup styles.

I had old php pages that were close to 4000 lines (3,000 of which are old font and table tags to echo!), what a nightmare it was trying to debug, say, an improperly formed table cell from an echo that left out a td tag.

Simply create a new class for any text you want to be 15px:

.textup {font-size:15px}

<div class="offer1">
<p class="marg15"><strong>Description</strong></p>
<P>Good looking car. </P>
<P>This is a red car.</P>
<p class="textup">The car is in working order.</p>
</div>

Good luck.

jwhite68 · September 26, 2007

Thanks for your advice and pointers.

Its more difficult to add this "textup" class you suggest, because the text in question comes from different clients databases, and can be raw text or HTML. If HTML, it can be with text that contains data in a mixture of tags and no tags, as in the example above [which highlights a particular problem I found when the client data didnt wrap all text in tags].

So what I really want to do is use the stylesheet to force any text thats NOT within tags to be at the same left hand margin position as the text that IS within tags. ie so everything is left aligned - for presentation.

Its just proving very difficult to find the right way to achieve this.

This is preferable to trying to second guess all permutations of clients data and stripping, replacing text to those permutations - as you can be sure there will be a scenario ot two missed.

AndyB · September 26, 2007

If the problem is 'random' tags in client stuff, you might be able to simply use strip_tags() on the database output and then nl2br() on the resulting clean text to emulate line breaks before displaying it.

jwhite68 · September 26, 2007

Its not quite that straightforward. I do currently strip_tags on most of the content. But I leave the <li><ul> tags there, so that there can still be some of the clients presentation in the text displayed.

If I strip the tags then I lose the convenient breaks between sentences that were in the paragraph, and nl2br() will not help with this [i have tried this, and it didnt work].

Stripping tags completely would solve the alignment issue, behind this post, but still leaves a formatting issue with line breaks missing.

dbrimlow · September 26, 2007

Wow. Are you saying that you have clients that use something like "HTML Editor" in their forms - where they enter text and can format font colors headers, bullets and such?

If so, you are royally screwdaroo, my friend.

If you have no control over the text that is arriving - or the tags included - not only do you have a display issue, but you have potentially serious security problems, as well.

These HTML EDITOR JScript programs can be easily hijacked, malicious code inserted and submitted to your server.

Again, you can try to get a handle on this via reg expressions and preg_replace. You can create your own functions with reg exp that will search the text for tags and replace those within the file with proper tags that you designate. As a matter of fact, it is pretty common and I was able to find a nice little scheme at the reg exp threads.

Mine searches the incoming file for old deprecated tags and replaces them with proper tags. I have it somewhere and will look for it and post it here to give you an example. This will TRULY let you get a handle on your client submissions nightmare.

But, there is NO way to sniff for tags using css ... it isn't a "language".

jwhite68 · September 27, 2007

I decided to strip all the p tags aswell from the source (client data), and so now the output string only has one set of p tags around it. But still the problem persists, which now seems to be related to the presence of the <ul><li> tags. Its a never ending nightmare.

Heres how the HTML code looks.

<div class="offer1">
<p class="marg15">
Description
<br /><br />
This is a car. <br />
Its a red car.<br />
<UL><br />
<LI>red<br />
<LI>good mileage<br />
<LI>One previous owner </LI></UL>Dont miss this bargain.<br />
</p>
</div>

The issue being, that my stylesheet forces the to be at margin 15, as per "marg15" class. But the last sentence "Dont miss this bargain", despite being in the paragraph, is appearing at 0, instead of 15px.

Why should the UL/LI upset this?

dbrimlow · September 27, 2007

Because it is a broken tag.

The initial p tag is ignored. It is not being seen as a paragraph. You simply cannot imbed nest) block level tags ... they break.

Sign In

Issue with embedded <P> tags within existing <P> tag

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

Join the conversation

Important Information