0

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

Feirell
  • 719
  • 9
  • 26
  • 1
    Would you be able to include a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve) in your question? Something that recreates the problem but can run independently like in a JSFiddle or Stack Snippet. – Serlite Aug 13 '15 at 14:24
  • @Serlite I tried to add it, well it does not reproduce, I think it is linked to the use of `transform: translateX(-50%) translateY(-50%);` from the parent Element. Never less here is a [version in JSFiddle](https://jsfiddle.net/yzgboph4/1/) – Feirell Aug 13 '15 at 14:55
  • Ha ! I were able to reproduce it, I were right. The problem depends on the use of `transform: translateX() translateY();` . But I have no clue how to fix that. – Feirell Aug 13 '15 at 15:02

2 Answers2

1

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);
Umur Alpay
  • 106
  • 9
  • I know this tool, I used it to generate it in the first place. And I tried to use it, but it didn't changed a thing. [Here](https://jsfiddle.net/yzgboph4/4/) you can see it your self. – Feirell Aug 13 '15 at 15:15
1

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.

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • wow .... you have my full respect and I am so thankful that you made your way though my awful code, just to help me :) ... It worked like you said, just had to remove another selector and tada ! Just one little question how should I center the content of `#graph` vertically middle ? – Feirell Aug 13 '15 at 16:56
  • Glad I could help out. Since `#graph` and `.chracter_card` both have static heights of 550px and 400px respectively, you don't need to jump through any hoops to vertically center `.chracter_card`. Just use a margin, like `.chracter_card { margin-top: 75px; }`. (Though if either of the heights end up being dynamic/relative, then you'll have to get a bit more creative.) – Serlite Aug 13 '15 at 17:22
  • Ok well the content is not just those cards, the content get generated and is not always the same height, therefor I would need a dynamic design. Could I just do the same you done (with a table like css design ?) – Feirell Aug 13 '15 at 17:27
  • 1
    You certainly could - though depending on the kind of content you're displaying, it may or may not be the best choice. Here's [one resource](https://css-tricks.com/centering-in-the-unknown/) on vertical centering that may be handy going forward. – Serlite Aug 13 '15 at 17:31
  • Oh that is pretty nice ! Thanks for your help, I am really grateful for your effort. – Feirell Aug 13 '15 at 18:14