Horizontal Scrollbar

• 

  yrogirg · Member · Jan 17, 2011 at 10:53 am

  • Copy link
  • Add topic to favorites

  Hello! I’m trying to insert sourcecode in my blog. By now I have this:

  <div style="overflow:auto"> MyHighlightedCode
  </div>

  But there is too much space under the horizontal scrollbar (screenshot http://rghost.net/3969779/image.png). How can I make it to look better?

  The blog I need help with is: (visible only to logged in users)

• 

  yrogirg · Member · Jan 17, 2011 at 10:55 am

  • Copy link

  Mmm.. I can’t edit my posts here. I meant that now I’m using

  <pre><pre><div style="overflow:auto"> MyHighlightedCode
  </div></pre>

• 

  panaghiotisadam · Member · Jan 17, 2011 at 3:16 pm

  • Copy link

  One way is to add a negative bottom margin. Another way is to use the sourcecode shortcode instead:
  http://en.support.wordpress.com/code/posting-source-code/

  PS We always need a link to the blog in question; your username links to an empty blog – please correct it.

• 

  yrogirg · Member · Jan 17, 2011 at 5:08 pm

  • Copy link

  Finally I’ve made my first post (http://enteropia.wordpress.com/2011/01/17/1d-gaussian-quadrature-rules-64-and-128/), there you can see the issue.

  WordPress.com doesn’t support Haskell highlighting and is not going to support it in the near future.

• 

  panaghiotisadam · Member · Jan 17, 2011 at 5:58 pm

  • Copy link

  Ah sorry, I thought you were talking about another blog.

  The problem is due to this in the CSS of the theme you’re using:

  pre { background: #f7f7f7; color: #222; line-height: 18px; margin-bottom: 18px; padding: 1.5em; }

  As I said, you can ounter it by adding a negative margin to the div tag:
  <div style="overflow:auto;margin-bottom:-18px;">

  Or you can add (decreased) padding to the pre tag:
  <pre style="padding-bottom:.4em;">

• 

  yrogirg · Member · Jan 17, 2011 at 6:43 pm

  • Copy link

  Seems the problem is solved with
  <pre style="overflow: auto;"> HighLightedCode </pre>

  thank you, panaghiotisadam

• 

  yrogirg · Member · Jan 18, 2011 at 10:50 am

  • Copy link

  And some automation for generating highlighted Haskell code:
  http://enteropia.wordpress.com/2011/01/18/haskell-syntax-highlighting-and-wordpress-com/

  The topic is resolved.