[Solved] A weird line-height

[Eriaku]

Hello guys, you are the BEST !!
I experiencing a weir thing with my website, that is the CSS line-height is working only in the two paragraph and not in the third one :

/** BEGIN miscellaneous **/
#content .single {
padding: 2px;
}
#content .single p {
line-height: 1.7em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.7em;
padding: 2px 0;
}

.
.
.

Here is what I’m capable of doing :
#content .single p {
is controlling the first paragraph,
#content .single li {
is controlling the second one, but the third one i have no control on it, how can this be solved please ?
Thank you \m/

[Paulie_D]

Impossible to tell without seeing the HTML.

It’s not clear which p (assuming there is one) is actually being targeted &/or ignored.

[Eriaku]

      <!-- begin post -->
      <div class="single">
        <h2>الإشتراك في التحدي</h2>
        <p>
      <font size="2">
مرحباً بك و أهلاً و سهلاً مجدداً.<br>
بعدما إتخذت قرار الإقلاع عن الإستمناء والمبادرة في تنفيد الخطوات البسيطة والفاعلة في نفس الوقت التي قدمناها لك في الموقع الرسمي للإنسان، فكرنا في خلق رابط بين : <br>
<br>
_ قرار الإقلاع عن الإستمناء <br>
_ تنفيد الإقلاع والإستمرار فيه <br>
<br>
خصوصا في المرحلة الأولى من تنفيذ هذا القرار العظيم، هذه المرحلة لن تكون سهلة إلا بالمقاومة القوية، وهو ما &nbsp; يدعونا الى فتح &nbsp; باب المشاركة في &nbsp; التحدي، وبما ان معنى التحدي هو المقاومة والتغلب على المصاعب، فندعوك ايها الإنسان العزيز ان تشارك في هذا التحدي وهذه المغامرة الشيقة التي ستعيشها في حياتك اليومية لفترة ستختارها انت وحسب طاقتك،
          ومن هنا نود ان نسرد لك شروط المشاركة في التحدي :<br>
<blockquote> 
<ul>
<li><u><b>اولا :</b></u> الإبتعاد التام عن الإستمناء بنوعيه (بقدف او بدون قدف)
</li>
<li><u><b>ثانيا :</b></u> 
عدم مشاهدة جميع المواد البورنوجرافية سواء صور كانت او فيديوهات
</li>
<li><u><b>ثالثا :</b></u>
ممنوع اي علاقات جنسية مع الزوج او الزوجة، وطبعا لن ننقاش العلاقات الغير الشرعية فهي محرمة منذ الأزل
</li>
<li><u><b>رابعا :</b></u> المدة  فهي مفتوحة للمشارك، قد تكون أيام محدودة؟ اسبوع؟ شهر؟ سنة؟ هذا الإختيار راجع لك، فحبذا لو &nbsp; قمت &nbsp; بتسجيل &nbsp; مسار التحدي وذكر المدة التي وصلت إليها، &nbsp;  حتى تقوم بتحدي آخر قد تحطم فيه رقم قياسك الأخير وهكذا ..
</li>
<li><u><b>خامسا :</b></u> 
قم بالتسجيل في المنتدى الخاص بالموقع وأخبرنا  بمدت التحدي الذي تريد إختباره،  وإطرح لنا مصاعبك التي ستواجهها يوميا  حتى نساعدك لتكمل &nbsp; تحديك بنجاح، كما نحب ان  نسمع منك &nbsp; ايها الإنسان العزيز القصص والتجارب التي حصلت لك في حياتك اليومية 
</li>

</blockquote>

<br>
وبهذا نود ان نعلمكم  بإفتتاح المنتدى الذي &nbsp; منه &nbsp; سيكون لك المجال مفتوح &nbsp; للتحدث عن التحدي، بداية بإنشاء موضوع جديد سيكون خاص بكل متشارك، وفيه يمكنك ان تحدثنا عن مدة التحدي التي إخترتها انت ثم مواكبتك اليومية مع التحدي وكيف تعيش التغيير، ولما لا طرح اسئلة او طلب المساعدة عن المشاكل التي تواجهها، ونتمنى من الله سبحانه وتعالى ان يوفقنا حتى يستفيد الجميع من هذه المبادرة المباركة، اترككم في رعاية الله، وقريبا سنضع لكم رابط المنتدى بعد نهاية صيانته والسلام عليكم
    
<br>

      </font>
        </p>

      </div>
      <!-- end post -->

[Paulie_D]

OK…the font tag has been deprecated and should no longer be used…also don’t use br for spacing…that’s what margins and padding are for.

Also, under HTML5 , the u and b tags aren’t used for styling…the have a different purpose. Use spans with CSS for underlining or bolding (or strong for the latter if you must).

Next….you should not be putting block level elements like blockquotes and lists inside p tags.

Try running your code through a validator…then fix the errors.

Once you’ve done that the problem may go away. At the moment, it’s in too much of a mess to really help much further.

[Eriaku]

Okay i understand now, let do it step by step :
_ Font tag : Deleted
_ Here if I’m going to remove all br that i used to end the line and go to the next line, but what i need to put instead ?
_ The same thing with <u> and <b>, what i need to put instead because you are right, it a pain in the butt to put them on each word
_ I can give up the blockquotes, but when you says p tags what did you meant by that ?
Thank you my man, it’s getting better !

[Paulie_D]

p tags are paragraphs. Each section of differentiated text should be a paragraph.

u and b I covered…use spans & CSS.

You can find definitions, usage an snippets for elements here – http://html5doctor.com/element-index/

[Eriaku]

The “p” thing solved the problem brilliantly, now the trick of using spans with CSS like this one ? :
<span style="color:blue">
but how to underline or blod using these brilliant spans ?
As i know CSS controls the whole page, but i need to only manipulate a part of my text, so i think here i can only use spans, I’m i right ?
My man paulie you’re awesome so far, thank you so much

[__]

Here if I’m going to remove all br that i used to end the line and go to the next line, but what i need to put instead ?

<br> still has its place, but it is actually very uncommon that you’d actually need to use it. What Paulie_D is getting at is that, in most places, you’re only using it to make extra space between lines: this is what margins and padding are for.

When writing, the other main use for “going to the next line” is to start a new paragraph: but that’s not really a line break, it’s …a new paragraph. In html, that’s what the <p> tag is for.

The same thing with <u> and <b>, what i need to put instead because you are right, it a pain in the butt to put them on each word

In this specific case, you seem to be using <u> and <b> to style list item headings. You should use heading tags (<h3>, in this case, would be the most appropriate). You can make them bold and underlined via CSS, as Paulie_D said.

I can give up the blockquotes …

Is the list that you have inside the blockquote actually a quote? If it is, then the <blockquote> tags are correct, and you should keep them. If not, then you can simply remove them. Any styling can be applied to the list itself.

when you says p tags what did you meant by that ?

<p> tags create paragraphs (see above).

You should also be aware that paragraphs have some unusual rules in HTML: the closing tag is not strictly required, so sometimes a paragraph might end earlier than you expect.

For example, in your code above, it looks like almost everything is inside a single paragraph (from the opening <p> tag below the h2, all the way to the closing </p> tag just before the closing </div> tag). In fact, however, elements like blockquote and ul are not allowed inside of paragraphs, and so the paragraph automatically ends when the blockquote starts.

[Eriaku]

Thank you so much user __ for your helpful response ,
you guys are the best :D

[Author]

Posts