By -Anti- on

When I use the <p> tag in content, is it the browser which adds in the space above and below and determines what paragraphs look like? Eg.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum metus eget tortor. Nunc tellus purus, mollis ac, imperdiet eget, laoreet sit amet, metus. Integer sit amet mi. Ut ultrices diam ut mauris. Pellentesque quam nibh, fermentum at, lacinia non, malesuada in.

turpis. Aliquam lorem. Fusce non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae felis eget lorem cursus faucibus. Phasellus semper nunc in turpis. Cras facilisis, mi eu blandit euismod, nisl leo blandit nunc, ut scelerisque urna neque vitae nisl.

The reason I ask is because in fckeditor, if I apply a justify to a paragraph, I get: <p class=rtejustify> which produces:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum metus eget tortor. Nunc tellus purus, mollis ac, imperdiet eget, laoreet sit amet, metus. Integer sit amet mi. Ut ultrices diam ut mauris. Pellentesque quam nibh, fermentum at, lacinia non, malesuada in.
Turpis. Aliquam lorem. Fusce non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae felis eget lorem cursus faucibus. Phasellus semper nunc in turpis. Cras facilisis, mi eu blandit euismod, nisl leo blandit nunc, ut scelerisque urna neque vitae nisl.

No break or space between the paragraphs! Am I supposed to add padding to the rtejustify class?

Cheers.

⋅ Categories: Drupal 6.x

Comments

WorldFallz’s picture

WorldFallz commented

It's determined by css. <p> probably has different css then p.rtejustify which, iirc, is css specific to fckeditor to facilitate justification. Your best bet is to style both p and p.rtejustify (and the other fckeditor justify classes) the way you want in the style.css for your theme.

===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz

-Anti-’s picture

-Anti- commented

> It's determined by css. <p> probably has different css

That's the funny thing... there is nothing for <p> that I can find in the css.
Which is why I came to the conclusion that the browser itself might decide what paragraphs look like.

The only place <p> appears in the css is here, in style.css:

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

Maybe there is some css in drupal core applying the paragraph style, that firebug isn't picking up?

Note that I can solve the problem easily by adding padding into the rtejustify class, but really I'd like to learn why, if <p> has padding from somewhere, would <p class=rtejustify> remove that padding?

Maybe I should have something like:

p.rtejustify for the class instead of just .rtejustify ?
Would that retain any styling <p> had?

oh man, I really need to go back and try to learn css properly!

Cheers.

WorldFallz’s picture

WorldFallz commented

sometimes tracking down the css can be really frustrating. But if it's not showing up in firebug, it's not coming from drupal. When inspecting with firebug there will be an "options" selection all the way in the right of the window-- set it to 'computed style' and check again.

Every once in a while i run into these oddities. I usually just make sure i use a specific selector and override it. I used to try and track it down, but after awhile it turned into a huge time sink, lol. Now I just get it the way I want it. ;-)

As for the inheritance, anything you put on 'p' in the css will also apply to p.rtejustify unless you override it. Inheritance goes from least specific to most specific. And i believe that's true regardless of whether you use .rtejustify or p.rtejustify. The only difference with .rtejustify is that the css will apply to any tag with that class-- not just paragraphs (ie. a div with class=rtejustify).

At least that's my current understanding-- i learn more and more css each day.

===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz