CODEWITHSUNDEEP
htmlcss
user6747972
user6747972

Reputation: 31

grey border surrounding image

I have a Bootstrap table on the view and the last 2 columns are images. I load the table once the Ajax call is successful.

Issue

enter image description here

when table id populated with data, I see grey border and nothing makes sense. I don't have any code which specifies border. Below is my CSS Code

img {
    border:none;
}

table {
    border-collapse:collapse;
}

.assign {
    background: url(Images/user_not_assigned.png) no-repeat;
    width:100%;
    height:40px;
}

I added blue dashed border to the image to make sure it overrides. I see the blue dashed border along with grey border

enter image description here

CSS

img {
    border : 2px blue dashed;
    border-radius:10px;
    padding:5px;
}

table {
    border-collapse:collapse;
}

.assign {
    background: url(Images/user_not_assigned.png) no-repeat;
    width:100%;
    height:40px;
}

HTML View:

<div id="getorder" class="table-responsive" data-request-url="@Url.Action("GetPendingOrders", "Main")">
    <table id="editorder" class="table table-striped table-hover">
        <caption><h4 class="chocolatetext"><strong>Pending / Assigned Orders</strong></h4></caption>
        <thead>
            <tr>
                <th>COL1 #</th>
                <th>COL2 #</th>
                <th>COL3 #</th>
                <th>Assign</th>
                <th>Update</th>
            </tr>
        </thead>
        <tbody id="assignorder" data-request-url="@Url.Action("AssignOrder", "Main")">
        </tbody>
    </table>
</div>

@Scripts.Render("~/Scripts/Custom/main.js")

Jquery Code to load table

$.ajax({
    type: 'GET',
    url: peningorderurl,
    traditional: true,
    cache: false,
    success: function (data) {
        var table = $("table");
        table.find("tr:gt(0)").remove(); //remove all previous rows if needed
        $.each(data, function (index, element) {
            var tr = $("<tr class='clickable-row' data-href=" + element.id + " data-row=" + element.orderno + "></tr>");
            table.append(tr);
            var td = $("<td>" + element.id + "</td>");
            tr.append(td);
            var td = $("<td class='testno'>" + element.testno + "</td>");
            tr.append(td);
            var td = $("<td class='screenno'>" + element.screenno + "</td>");
            tr.append(td);
            var assignimage = ('<img class="assign assignselected" alt:"Assign Image" />');
            if (element.assigned == true) {
                assignimage = ('<img class="assigned assignselected" alt:"Assign Image" />');
            }
            var td = $("<td>" + assignimage + "</td>");
            tr.append(td);
            assignimage = ('<img class="no-testresults editselected" alt:"Update Test Results" />');
            var td = $("<td>" + assignimage + "</td>");
            tr.append(td);
        });
    },
    error: function (err) {
        alert("Ajax failed:");
        console.log(err);
    }
});

Question

How do I remove this grey border? Any help would be appreciated.

Upvotes: 1

Views: 2684

Answers (5)

Tim
Tim

Reputation: 1357

I had the same issue and finally figured it out. The combination of an img Tag and the background property causes this issue. Either use the img tag with src= or use another tag.

Answer found here: css "background-image" shows unwanted border, img "src" does not

Upvotes: 0

kawnah
kawnah

Reputation: 3404

Try using exact specificity for that vs just targeting the table, so try this:

table thead > tr > th { border: none; }

Upvotes: 0

allnodcoms
allnodcoms

Reputation: 1262

Could be background colour coming through?

td {
    background-color: #fff;
    padding: 0;
}

img {
    margin: 0;
    display: block;
}

Upvotes: 0

Anna Jeanine
Anna Jeanine

Reputation: 4125

Change your table CSS to: 

table {
    border:0;
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

add border 0 on table

table {
    border-collapse:collapse;
    border:0;
}

Upvotes: 0

Related Questions