What to I need to delete in my css?

[wheelcipher]

In a continuation of a conversion from the other support site, I was asking how I get the background of my .article-wrap to look like notebook paper. I am almost there … But I need to “fix” one section and cannot figure out how. Firebug is not giving me any hints and/or I am not sure of the css syntax to make it happen.

I have cut my custom.css down to nothing except the notebook paper …

This gets me ‘almost’ there …

.article-wrap {
    padding: 37px 55px 27px;
    position: relative;
    border: 1px solid #B5B5B5;
    background: white;
    background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    -webkit-background-size: 100% 30px;
    -moz-background-size: 100% 30px;
    -ms-background-size: 100% 30px;
    background-size: 100% 30px;
}

.article-wrap::before {
content:""; z-index:-1; margin:0 1px; width:706px; height:10px;
position:absolute; bottom:-3px; left:0; background:white;
border:1px solid #B5B5B5;}

.article-wrap::after {
content:''; position:absolute; width:0px; top:0;
left:39px; bottom:0; border-left:1px solid #F8D3D3;}

Any ideas on how to delete/alter that final element and line the text up?

Thanks a million!!!

Topic

[wheelcipher]

http://www.grubstreetjournal.com

[Jason Bobich]

Hello,

It’s the article tag within that currently has the box styling around it, not the article-wrap div.

article {
  background: transparent;
  border: none;
  padding: 0;
}

[wheelcipher]

Just tested … Thank you so much! I appreciate it.

Now I’ll work on lining up the text 🙁

Thanks again!

[wheelcipher]

Because getting line-height and the distance between the notebook paper lines is going to be maddening! LOL!

[wheelcipher]

Ok … Got it. Set the distance between lines and the line height in the article the same, then padded from the top. (Almost perfect). But I have a question because you are the CSS master … and I’ve run into this issue with other themes as well.

If you look at my test page: http://www.grubstreetjournal.com/uncategorized/test-post

You see the first paragraph and the letters are *right on* the lines of the notebook paper.

The second paragraph, they are slightly offset (and perfect for me). But there is some difference between the paragraphs.

I thought it was because there was a carriage return between paragraphs, but I am not sure. I put a at the beginning of the first paragraph with no love. Any thoughts?

[wheelcipher]

p {
margin-bottom:25px !important;
}

YEAH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Author]

Replies