It's a mystery to me why no one seems to have the answer to this question.
Take a look at . The spacer images are surrounded by borders. While I could use empty divs instead of spacer images, I'm using them here to make a point. This issue also occurs elsewhere on the site.
You can view an image of the borders HERE.
Despite trying different ways of using "border: none", it doesn't seem to make any difference. There shouldn't be a border on any of the images throughout my entire site.
Below is the HTML:
<div class="main_title">Friend Activity</div>
<div class="notifications_container"><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-prayer-0.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-answer-2.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-posts-1.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"></div>
<div class="main_title">Communication</div>
<div class="notifications_container"><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-request-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-comments-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-messages-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"></div>
And here is the CSS:
img {
border:none;
}
.notifications_container {
width: 100%;
max-width: 840px;
margin-left: auto;
margin-right: auto;
margin-bottom: 14px;
}
@media and (max-width: 799px) {
.notifications_container {
margin-top: 0px;
}
}
@media screen and (min-width: 386px) {
.notifications_container img {
width: 20%;
height: auto;
}
.notifications_spacer {
width: 10% !important;
height: 5px !important;
border: none !important;
}
}
@media screen and (max-width: 385px) {
.notifications_container img {
width: 26.66%;
height: auto;
}
.notifications_spacer {
width: 5% !important;
height: 5px !important;
border: none !important;
}
}