Editing (v7+)

 

JohntheFish replied on Oct 26, 2011 at 1:43 pm Permalink Reply

I would guess that maybe your theme adds css for margin, padding or borders about the images, or about the blocks that contain the images.

If you look at your site in chrome, right click on an image and select "inspect element", the developer window will appear with an analysis of the styles down the right hand side showing how they are applied to the image.

beebs93 replied on Oct 26, 2011 at 3:29 pm Permalink Best Answer Reply

If John's suggestion doesn't yield anything, perhaps adding display:block to the images?

I know some versions of IE add a mysterious gap unless their CSS is set as such, but others usually play nice.

If there's access to the site, a link to it would solve the problem a lot quicker :)

ceanndesign replied on Oct 26, 2011 at 3:41 pm Permalink Reply

Thanks to both John and beebs93, I really appreciate your reply.

@beebs93... I added display:block to the images as you suggested and it fixed the my issue.

Thanks again for your help.

designsforchange replied on Feb 23, 2015 at 9:29 pm Permalink Reply

Hi there,

I am having the same issue that you responded to with a fix. Could you please explain to me where you would "adding display:block to the images".

I'm not a newbie at C5 but I'm not bridging the gap on where to solve this.

Thank you for your help.

Cheers

ceanndesign replied on Feb 23, 2015 at 9:34 pm Permalink Reply

@designsforchange
It has been a while since the issue above - however I'm pretty sure I added 'display: block;' to the css style.

designsforchange replied on Feb 23, 2015 at 9:41 pm Permalink Reply

Hey there,

Thank you for the quick reply :) Sorry adding ‘display:block;’ to my theme css ? Or somewhere within the concrete/blocks ?

ceanndesign replied on Feb 23, 2015 at 9:46 pm Permalink Reply

No problem. Yep, try adding the 'display: block;' to your main theme .css file. I'm pretty sure that was the solution... sorry again, as it has been a while.

.img {
display: block;
}

designsforchange replied on Feb 24, 2015 at 10:50 am Permalink Reply

Hi ceanndesign,

That did solve the issue of the gap in the border, but it also put all of my horizontal social icons that were at the top right in a stack into a vertical line on the top left? Ah!

jasteele12 replied on Feb 24, 2015 at 4:18 pm Permalink Reply

Use John's suggestion using Chrome above, and you can probably apply display:inline to the CSS contained within the social icons div.

Again, links to actual sites makes this much faster to help.

designsforchange replied on Feb 24, 2015 at 11:02 pm Permalink Reply

Thanks jasteele123, will give it a shot. I am building the site locally so there is no link for anyone to view.

jasteele12 replied on Feb 24, 2015 at 11:13 pm Permalink Reply

Save as webpage complete, upload to any server. Should get you the html, css and javascript ;)

designsforchange replied on Feb 25, 2015 at 12:36 pm Permalink Reply

So because the images will link to another page, I added this to a img. instead of to the image block design. Thanks to everyone for their help. Cheers

a img {
   border-width:3px;
   border-color: #edd9c7;
}

Pluto replied on Feb 25, 2015 at 12:44 am Permalink Reply

Thanks john. this worked for me.