Issue with margin - stylesheet related issue

[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 should point out that this represents data from my client, that comes in HTML format, so that last sentence didnt come with any <p> tags directly for itself.

 

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

 

[jwhite68]

I forgot to mention, the marg15 css entry is:

 

.marg15{
margin: 15px;
}

 

I have tried many things now, and simply cannot understand why the text "The car is in working order" is displayed at margin 0 instead of margin 15px.  It should fall within the paragraph defined within the <p> tag with marg15, since the end tag for that paragraph falls after this sentence.  But its as if it isnt seen in any <p>.

[dbrimlow]

You have basic markup level errors.

 

First - You cannot nest a block level html tag within another block level html tag. You are trying to nest list items within a paragraph. Close the paragraph before "Good looking car". Put the sentence after the ul tag in open and closing p tags.

 

Second - you are using an XHTML break tag, yet you are capitalizing some P tags and all list tags. When using XHTML the rule is close all tags and all tags are lower case.

 

Third - using double break tags for line spacing is very sloppy coding. Instead, use p tags and space the margins in your style sheet. Break tags should only be used within block level tags when you want a SINGLE line break and to be followed by text. Never end a paragraph or list item with a break to force a space between two tags - that is a styling issue better handled in your css for that ID or Class p tag.

[bronzemonkey]

I'd probably use this kind of markup to achieve what it appears you are trying to do. Then use css to style the div contents (without using display:table).

 

<div class="offer1">
   <h4>Summary</h4>
      <ul class="nobullet">
         <li>Decent car for sale</li>
         <li>Model :</li>
         <li>Ford Escort</li>
      </ul>
   <h4>Description</h4>
      <ul class="nobullet">
         <li>Good looking car.</li>
         <li>This is a red car.</li>
      </ul>
      <ul>
         <li>red</li>
         <li>working order</li>
         <li>1983 model</li>
      </ul>
      <p>The car is in working order.</p>
</div>

 

You margin issue is because you've misunderstood the properties of the <p> element.