0 margin issue on line of text 1

[jwhite68]

I have a piece of HTML as follows:

<div class="offer1">
<p class="marg15">
<strong>Summary</strong><br /><br />Decent car for sale<br /><br/>Model :<br /><br />Ford escort
<br /><br />		
<strong>Description</strong>
<br /><br />
<P>Good looking car. </P>
<P>This is a red car.</P>
<UL>
<LI>red
<LI>working order
<LI>1983 model</LI></UL>The car is in working order.<br />
</p>
</div>

Here is the stylesheet code in the css for the 2 classes:

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

The text displayed below Description should all be with a margin of 15px.

But when it displays, the sentence after the <LI> tags (for bullet points) displays at 0 margin, instead of at 15px. ie the sentence 'The car is in working order.'.

Can anyone see why?

I tried putting a margin:15px !important in the div class but it didnt resolve it.

 

[Vragabond]

<LI>1983 model</LI></UL>[!]<p>[/!]The car is in working order.<br />
</p>

You had no opening paragraph there. No paragraph, no margin.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

The opening paragraph should be the 2nd line of code I showed. ie <p class="marg15">

So this extra <p> shouldnt be necessary.

If I remove:

<P>Good looking car. </P>
<P>This is a red car.</P>

From the above code, it works. SO its as if the embedding of the above 2 paragraphs causes an issue.

 

[traingamer]

You closed the paragraph.

<P>This is a red car.[b]</P>[/b]

Thus The car is in working order. is not in a paragraph.

Also the unordered list is a block item which implies a paragraph close even if you take out that specific </p>.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[jwhite68]

Hmmm.

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 <p> tags in it. I dont strip out the <p> 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 <p> 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 <p> and </p>. The issue comes about if the HTML string contains some text with <p> tags, and other text afterwards without <p> tags.

Hope this makes sense.

 

[Vragabond]

You cannot nest one paragraph inside another. That means that any paragraph opening tags inside a paragraph itself will be ignored. And where you're closing the inner paragraph, it is the outer that actually closes (because the inner one was ignored in the first place). If you are getting data that includes the paragraph, don't put the opening paragraph there. Use a div instead, since div can normally nest paragraphs and lists. If you expect to sometimes have paragraph and sometimes not, I suggest you check the input server side and work on it to come to the final solution. What you are doing is just wrong and will cause you more problems than not. Because it is invalid code and every browser will act on its own to render it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

If I just want to ensure that the particular line (in this example) is displayed at margin 15px, though, is there a reason why I cant just assign a margin: 15px !important to the offer1 div? Surely that would be applied to this sentence, if its not seen within the <p> tags?

 

[jwhite68]

If I change it to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<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?

 

[Vragabond]

You would simply add the 15px margin (or padding) to the offer1 div. If that is impossible due to other design issues, you could put another div inside the offer1 div. But that would probably be an overkill.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

I added to the div class like this (which I actually tried before):

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

But this hasnt changed the result.

The current test code I am using is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<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.
</div>
</body>
</html>

I was sure this idea would work too, but it doesnt. Can you think why?

All I want to do is use the stylesheet to control the margin for text that doesnt fall within p tags. I didnt expect it to be so difficult!

 

[Vragabond]

I suggest you do this:

div.offer1{
   overflow: auto;
    width: 874px;
    border: 1px solid #DDDDDD;
    margin-top: 10px;
    background: #F4F3EE !important;
    [!]padding: 0 15px;[/!]
}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

Sadly, that still doesnt work.

I also have an entry in the stylesheet :

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

Not sure if this is interfering with your suggestion. I wouldnt have thought so.

 

[Vragabond]

Sadly, you're not really helping us help you. The code I posted adds a 15px margin from the left edge of the box to the text. If this is not what you wanted, please explain in more detail what it is you did want. And completely remove yourself from any HTML&CSS you have so far. Just describe (or provide a picture) of how you want this thing to look.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

It should look like this:

Description

Good looking car.

This is a red car.

The car is in working order.

Where all of the text is left aligned, all within the grey box, and the distance from the left hand side to the text is 15px.

 

[Vragabond]

Your code with nothing but my css declaration does that. Of course, there is no margin at the bottom of the last sentence, but you seem to not be worried about that.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

My actual situation is controlled by PHP, in the following code (I was trying to use a simpler example to illustrate the issue on this forum).

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

The description, controlled by $desc, is taken from client databases/files, and can be raw text or HTML, that has had the strip_tags performed on it to remove everything except for <p>,<li>,<ul> and <br> tags.

Since the data for $desc can contain text with <p> tags, and in this example, text with 2 <p> tags, then a sentence at the end without <p> tags - I need a way to present the data - but at the same time maintain the margin.
Perhaps showing this makes it clearer.

It means I need to edit the code above so that the </p> is not AFTER the $desc, as this is what causes the <p> tags to be embdedded.

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.

 

[jwhite68]

Is there anything I can do with a <span> around the $desc?

 

[Vragabond]

I still think you should go with the padding on the container option and using h* elements for the Summary and Description headings.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jwhite68]

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

 

[Vragabond]

It's not in a paragraph. Paragraph cannot have a list embedded inside it and so browsers will close the paragraph when you open the list (because you must have forgotten to close it, since you cannot have a list inside a paragraph). So your last sentence is outside the paragraph, again. My solution still holds. Let me know when you will be willing to accept it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]