Quoteblock border disappears

Help
1

Hello,

I’m currently using Jekyll to create my own blog, which renders Kramdown to html. And I found if I write this code:

![drunkbird](src){:  width="300px" style="float: left; margin-right:5%"} 

> A drunk man will find his way home, but a drunk bird may get lost forever.
> 
> <cite>-- Shizuo Kakutani</cite>

The border of quote block will disappear like below:

PastedGraphic-1
PastedGraphic-11466×320 63.2 KB

I’m new to html and not sure what happened and how to fix it. Any suggestion is highly appreciated. Thanks very much!

2

if you do it another way do you get a border?

it should just be css - look at it in Chrome’s Inspector and you can play with the css there and add that to your css.

3

Yes I can see a border if cite without adding an image. I define the css for quote block in this file as follows:

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

I can’t see what’s wrong. I suspect it’s something related with image and text alignment.

4

Thanks for help, I replied as another comment.

5

It’s the CSS on the image. The image is floated to the left of the blockquote which is overlapping it some.

7

Yes you’re right! But it’s generated automatically from markdown to html. Unfortunately, I’m not familiar with html language. So what should I do to fix it? Thanks!

8

Hi all,

I fixed this problem by wrapping the quote block within a div which floats to right. Thank you all.