CODEWITHSUNDEEP
htmlcss
Chris S
Chris S

Reputation: 249

Border px issue

Currently I have a 1px border that wraps around each job title that I post. The issue that I have is that on the bottoms where i placed the red logo the 1 px's overlap making a thicker line (2px) than the rest. How can I fix this but still have a full border when each page is opened. Thanks for taking a look.

http://jobspark.ca/job-listings/

UPDATED CSS

article .post {
border: 1px solid #e3e3e3;
border-top: none;
}

article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}

enter image description here

UPDATE: Only thing is now when you click and open a page "parts person" for example the top border is missing. http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician

Upvotes: 0

Views: 87

Answers (4)

Derek Henderson
Derek Henderson

Reputation: 9706

Just remove the top border from each post except the first one: 

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article .post:first-child {
    border-top: 1px solid #e3e3e3;
}

Edit: Because your html structure has a series of article elements with one .post in each (instead of a series of .post elements inside an article, as I'd assumed), the above code won't work, but the principle is the same. You can't use article:first-child because there is another sibling element that is the first child, but since you have given the first article a specific class name, you can use that, as follows:

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

Second Edit: Since you are reusing the same html on for both item view and list view but don't want the top border removed in item view, do the following:

article .post {
    border: 1px solid #e3e3e3;
}
.view-list article post {
    border-top: none;
}
.view-list article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

Alternatively, since in your unit view you have given the article the class "article-index-null" you could also do the following:

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

Either one should work.

Upvotes: 5

Baris Birbas
Baris Birbas

Reputation: 1

Instead of using border what about using border-left border-right and border top ? Seems like this is solving your issue.

Upvotes: 0

Taylor Brown
Taylor Brown

Reputation: 1776

There are a few ways to do this. i would wrap the entire articles section with a <div> that has only a 1px top border, no padding. then every article would only need left, right and bottom borders to achieve the look you are going for.

article .post {
padding: 12px 16px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background: white;
}

Upvotes: 0

user1633525
user1633525

Reputation:

Change to this:

article .post {
  padding: 12px 16px;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  background: white;
}

And add this:

article .post:last-child { 
  border-bottom: 1px solid #e3e3e3;
}

Upvotes: 0

Related Questions