CODEWITHSUNDEEP
htmlcssbackground-imagebox-shadow
Feirell
Feirell

Reputation: 799

HTML - Image box-shadow does not cover image border

I might need your help. I tried to use an image as the background of a div, and cover up the borders with a box-shadow. The problem is that it still displays like one pixel of the background image at the borders in Firefox and Internet Explorer, just Google Chrome displays it as supposed.

to show the border problem

Here is a link to the actual page: the page where the error occurs. I hope someone can help me with this.

Btw. I tried to use a not scaled image for the second one (the barbarian) but it didn’t made a difference :/

I am thankful for any advice, Feirell

Upvotes: 0

Views: 134

Answers (2)

Serlite
Serlite

Reputation: 12258

One way to avoid this problem is to perform a vertical centering of your graph via some other method, without using transforms. A popular approach (prior to viability of the transform-based solution) is to utilize display:table and display:table-cell styles.

Applying this method to your CSS, and making adjustments to fix any visual inconsistencies it causes, you would get the modifications to the following declaration blocks:

/* ./resurces/css/positioning.css */
#graph_wrapper{
    width: 100%;
    height: 100%;
    text-align: center;
    /*display: block;*/
    display: table;
    position:absolute;
}
#graph_wrapper_inner{
    /*height: 550px;*/
    /*min-width: 900px;*/
    display: table-cell;
    vertical-align:middle;
    /*position:absolute;*/
    /*padding: 20px;*/
}
#graph{
    display:inline-block;
    padding: 20px;
    height: 550px;
    min-width: 900px;
    position: relative; 
}
#graph,#graph_wrapper_inner{
    /*top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
}
.YPositioner{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#header,#left,#right,#bottom,#graph{
    background-color: #202020;
    color: #36B1EC;
    border: 3px solid #035881;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;      
}

/* ./resurces/css/diagram.css */
#graph_wrapper_inner{
    /*background-color: rgba(32,32,32,0.95);*/
}

Here's a JSfiddle to demonstrate the fix. For future reference, creating a more lightweight demo of the problem would make it easier for people to work with your code, and probably get you more useful replies. Hope this helps! Let me know if you have any questions.

Upvotes: 1

Umur Alpay
Umur Alpay

Reputation: 106

Can you try it like this. When you use box-shadow you should add -webkit- and -moz- prefixes along with the box-shadow property

For ex. 

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Upvotes: 1

Related Questions