Archived

This topic is now archived and is closed to further replies.

  • 0

Span Elements In Reader Post Titles Generating Unwanted Newlines

Question

Posted · Report post

I'm building a Reader-based FAQ, and I'm using span elements to encase a trademarked product name that appears in the reader title and contents, simply so that this product name can be styled site-wide.

 

The title I am trying to insert into the Reader (to form the question tab on the left) is the following:

 

Is <span class="classname"><span class="classname-1">product</span><span class="classname-2">title</span></span>™ right for me?

 

Whereas those product spans are being rendered and styled perfectly in the contents (i.e. body) section of this Reader post, in the left-hand tab there are line breaks being inserted wherever these span elements occur in the title (please see attached image).

 

Is there any way to make the Reader NOT see any closing span as a reason to insert a line break (or whatever it's doing there)? Alternatively, is there a different element that I can use instead of the span, to be able to attach a styling class to the product name there?

 

The [pl_raw] shortcode doesn't work for this issue by placing it in the title (it just renders the shortcode as is).

 

This rendering occurs in both FF 17 and IE 10.

 

Thanks for any assistance.

 

Regards,

EJ

post-45407-0-19495400-1354787141_thumb.p

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

Okay, I figured it out. Feel pretty silly now. :D

 

The styling on the Reader's nav elements is pretty general for spans, so every span there is being put into display: block mode and given some generous padding.

 

The fix is super easy: just overwrite those styles in the custom CSS, reverting them back to their plain forms. Something like the following:

 

.readernav ul li span .classname, .readernav ul li span .classname-1, .readernav ul li span .classname-2 {

  border-bottom-style: none;

  display: inline;

  padding-bottom: 0;

  padding-top: 0;
  padding-left: 0;
  padding-right: 0;

}

 

Ta-daa!

Share this post


Link to post
Share on other sites