3

I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)

Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.

I am doing this by over-riding the default CSS with <style> tag on the post.

.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}

Also on the first image I add the style again like

style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;

This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.

Problem is when I do this, there is a small gap from the image to bottom-border and I cant figure out why.

Here is the link click

j08691
  • 204,283
  • 31
  • 260
  • 272
foutzos
  • 71
  • 7

2 Answers2

5

Just give the image

display:block;

see updated fiddle

it should now looks like

enter image description here

Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
0

I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.

  • Thanks for your time and answer. I will try this too, also like Peter said display:block on image style attribute gets the result its needed! :) – foutzos Mar 14 '16 at 18:51