How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

1 Views

I’m unable to resolve an issue with my CSS. For some annoying reason, a dark blue vertical dash appears to the left of the product image — but it’s part of either the amazon-buying class or asin-title class. It looks like this:

annoying blue line

Read More

This is the only CSS I can find that would have anything to do with things: 

.amazon-product-table {
    border-collapse : collapse;
    border : 0 none !important ;
    width : 100%;
}
.amazon-product-table td {
    border : 0 none !important ;
    padding : 0 !important ;
}
div.amazon-image-wrapper {
    text-align : center;
    width : 170px;
    float : left;
    padding : 0 10px 0 10px;
}

div.amazon-buying {
    text-align : left;
}
h2.amazon-asin-title {
    margin : 0 0 5px 0;
    line-height : 1.25;
    font-size : 10pt;
}
span.asin-title {
    text-align : left;
}

Here is what Firebug is showing:

Firebug

I’m not good with CSS to begin with, but I’m completely clueless on how to eliminate this dark blue line — whatever it is. It appears to be part of the title, or the amazon-buying class; when I hover over those classes in Firebug, that’s the 665x16px area that highlights.

Here’s a live example of the issue I’m dealing with. I’ve exhausted everything I could think of. Any guidance in helping me eliminate this annoying blue line would be greatly appreciated!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Here’s the element with the border:

    enter image description here

    As to getting rid of it, you could probably do something like this:

    .amazon-product-table .amazon-asin-title {
    border-left: none;
}

  2. Here is where it’s being applied:

    .container .post-entry h2 {
    border-left: 4px solid #34495e;
    color: #4e4e4e;
    font: bold 14px Arial;
    padding-left: 5px;
    margin: 20px 0px 10px 0px;
}

    If you can’t remove the border-left property, you would overwrite it with the following:

    .container .post-entry h2 {
    border-left: none;
}

    If that doesn’t work, here is a more specific selector that will:

    .container .post-entry h2.amazon-asin-title {
    border-left: none;
}