How to deal with HTML code in PHP to overcome alignment issues

[jwhite68]

The following code displays a Summary and a Description.  The problem is that the Description (in variable $desc) comes from my clients in either raw data or HTML.  See below for more explanation of the problem.

 

            <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>

 

I use strip_tags on $desc to remove everything except for <p>,<li>,<ul> and <br> tags.

 

Since the data from the customer thats assigned to $desc can contain text with <p> tags, and text without <p> tags - I have a specific problem that any text within the customer data thats not contained in <p> tags is not left aligned with the titles for Summary and Description. Instead, it displays at 0px.

 

So, what I am looking for is a way of ensuring that client data, whether it contains <p> tags or not, is displayed 15px into the grey box, in alignment with the headings for Summary and Description.

 

Heres the css file:

 

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

div.offer1 p{margin:15px ;}

.marg15{
margin: 15px;
}

 

I realise that I cannot have the existing p class="marg15" and </p> from the first code segment, because this will cause issues when the $desc itself contains <p> tags.

 

So, in summary, the problem itself is that if $desc contains a combination of text with and without <p> tags, the text without <p> tags is not aligned (to the left) with the text that IS with <p> tags.

So the result may be like this:

 

    Summary

 

    This is line 1.

    This is line 2.

 

    Description

 

    This is line 1 of desc.

    This is line 2 of desc.

This is line 3 of desc.

 

As you see, the text "This is line 3 of desc" is not aligned with those above, and this happens when the sentence "This is line 3 of desc" does not have <p> tags around it.

 

Can anyone offer any advice?

 

I need to keep the <p> tags from the client data to ensure the presentation looks close to the clients original data.

[GingerRobot]

Hmm, i wonder if you could first remove all <p> tags, then put them back in at each line break? Not sure if that would work in practice...just an idea.

[wildteen88]

Wrapp <?=$desc?> in a span and apply 15px left padding to that rather than your <p> tags. That all text will align 15px in from the left regardless whether text in paragraph tags or not.

[jwhite68]

The problem then is that the <p> tags (from customer) can still contain style=margin type code which sets the margins in a way I dont want.  I could strip these out with preg_replace though.

Or, I wonder if I follow your suggestion if I set the div.offer1 p{ margin: 0px !important} whether that will override all <p> settings from the customers <p> tags, and the <span> left padding will then be applied from your idea?

[GingerRobot]

The problem then is that the <p> tags (from customer) can still contain style=margin type code which sets the margins in a way I dont want.  I could strip these out with preg_replace though.

Or, I wonder if I follow your suggestion if I set the div.offer1 p{ margin: 0px !important} whether that will override all <p> settings from the customers <p> tags, and the <span> left padding will then be applied from your idea?

 

Well, im no CSS expert, but as far as i'm aware, !important isn't recognised by IE, hence why it's used as a 'hack' to place things properly in IE and other browsers - so you'd still have problems for anyone (e.g. most people) viewing in IE.

[jwhite68]

Ive been using !important for a while now, and it is working in IE6.

[cooldude832]

If your issue is encapslation in elements, and you want to produce a consistent html output, look into how bb->html works.  Your idea is simliar, except you will also need to run checks for if stuff is encapsulated in elements, and if not do so.  This can be done via exploding strings at the element tags and then varifying it with more string test. It is somethign that can be done, but it be lengthy.

Your other choice is remove all html tags from ita nd place it all in a single container

[jwhite68]

wildteen88, I tried the following based on your idea (if I understood correctly):

 

<div class="offer1">
			<p class="marg15">
			<strong class="gu">Summary</strong><br /><br />
			<?=$summary?>
			<br /><br />		
			<strong class="g">Description</strong>
			<br /><br /><span style=padding:15px>
			<?=$desc?>
			</span>
			<br />
			</p>
		</div>

 

But unfortunately it didnt resolve the issue.

I made an accompanying change in the css too:

 

div.offer1 p{margin:0px  !important;}

 

The idea of the latter being that if any <p> tags in clients data do contain margin info, its overridden here, and set to 0. So then it will only use padding info from the <span>.

 

 

 

[wildteen88]

Try:

div.offer1 {
    padding: 0 30px 30px 30px;
    overflow: auto;
    width: 874px;
    border: 1px solid #DDDDDD;
    margin-top: 10px;
    background-color: #F4F3EE;
}

h3 {
    margin: 15px 0 15px -15px;
    padding: 0;
}

 

<div class="offer1">
  <h3>Summary</h3>
  <?php echo $summary; ?>

  <h3>Description</h3>
  <?php echo $desc; ?>
</div>

 

Also !important only works outside of CSS element values not within CSS values.