CSS: Styles for <cite> won't apply

kevlin · 01-11-2012, 03:45 AM

Hi all togehter,

I'm a bit confused. I thought with CSS it is possible to define precise styles for every kind of paragraph.

I'm using the CSS below. When I mark a section with the cite-tag it won't apply completely. Strangely it shows the paragraph in bold letters and with the correct letter-spacing.

But on the other hand (and that's the strange thing): The paragraph with the cite-tag is shown with an indent - like the p-section is defined.

Besides the CSS there are no other CSS-definitions inside the XHTML-file.

Anyone an idea where this behavior might come from?

Code:

p {text-indent: 1.8em;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0.2em;
   text-align: justify;
   font-family: serif;}

cite {text-align: center;
      text-indent: 0.0em;
      font-family: serif;
      font-size: medium;
      font-style: normal;
      font-weight: bold;
      letter-spacing: 0.3em}

WS64 · 01-11-2012, 04:01 AM

I can confirm this behaviour, but no idea why...
I suggest to not use cite but create your own p class for this.

kevlin · 01-11-2012, 04:40 AM

Quote:

Originally Posted by WS64

I can confirm this behaviour, but no idea why...
I suggest to not use cite but create your own p class for this.

Ok, nice to know that this behaviour isn't just on my system(s).
I'll try it with a class then and give a feedback.

sourcejedi · 01-11-2012, 05:32 AM

You shouldn't be using CITE instead of a P element. CITE isn't a block element; it's an inline element. If you put two of your "cite paragraphs" in a row, they wouldn't be displayed as separate paragraphs.

This is probably the problem - the text-indent property has no effect on inline elements.

You almost certainly shouldn't be using CITE for an entire paragraph. Basically, it's meant for italicizing the titles of books etc. Possibly you want BLOCKQUOTE instead. If you can't be bothered with working out the semantics, just use DIV, as a generic block element. Either of those should fix your problem.

kevlin · 01-11-2012, 12:29 PM

Hi,

thanks to the hint from sourcejedi I used BLOCKQUOTE now. This works great and is more css-conform.

01-11-2012, 03:45 AM	#1
kevlin Newbie Posts: 4 Karma: 10 Join Date: Dec 2011 Location: Hamburg - Germany Device: Sony Reader PRS-T1	CSS: Styles for <cite> won't apply Hi all togehter, I'm a bit confused. I thought with CSS it is possible to define precise styles for every kind of paragraph. I'm using the CSS below. When I mark a section with the cite-tag it won't apply completely. Strangely it shows the paragraph in bold letters and with the correct letter-spacing. But on the other hand (and that's the strange thing): The paragraph with the cite-tag is shown with an indent - like the p-section is defined. Besides the CSS there are no other CSS-definitions inside the XHTML-file. Anyone an idea where this behavior might come from? Code: p {text-indent: 1.8em; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0.2em; text-align: justify; font-family: serif;} cite {text-align: center; text-indent: 0.0em; font-family: serif; font-size: medium; font-style: normal; font-weight: bold; letter-spacing: 0.3em}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Modding Calibre CSS styles	Olger	Recipes	7	01-25-2012 05:08 AM
CSS Table Styles: Does it work?	Alan Newson	ePub	3	12-12-2011 03:54 PM
Tool to centralise css styles?	snarkophilus	ePub	7	07-01-2011 04:08 AM
CSS styles not displaying in some eReader apps??	jttraverse	Sigil	12	05-23-2011 05:31 AM
Sigil styles and CSS	View[+]Finder	Sigil	4	05-27-2010 05:39 PM

01-11-2012, 04:01 AM	#2
WS64 ♫ Posts: 661 Karma: 506380 Join Date: Aug 2010 Location: Germany Device: Kobo Aura / PB Lux 2 / Bookeen Frontlight / Kobo Mini / Nook Color	I can confirm this behaviour, but no idea why... I suggest to not use cite but create your own p class for this.

01-11-2012, 05:32 AM	#4
sourcejedi Groupie Posts: 155 Karma: 200000 Join Date: Dec 2009 Location: Britania Device: Android	You shouldn't be using CITE instead of a P element. CITE isn't a block element; it's an inline element. If you put two of your "cite paragraphs" in a row, they wouldn't be displayed as separate paragraphs. This is probably the problem - the text-indent property has no effect on inline elements. You almost certainly shouldn't be using CITE for an entire paragraph. Basically, it's meant for italicizing the titles of books etc. Possibly you want BLOCKQUOTE instead. If you can't be bothered with working out the semantics, just use DIV, as a generic block element. Either of those should fix your problem.

01-11-2012, 12:29 PM	#5
kevlin Newbie Posts: 4 Karma: 10 Join Date: Dec 2011 Location: Hamburg - Germany Device: Sony Reader PRS-T1	Hi, thanks to the hint from sourcejedi I used BLOCKQUOTE now. This works great and is more css-conform.

Advert

Advert