CODEWITHSUNDEEP
csssharepoint
anothershrubery
anothershrubery

Reputation: 21023

Images have gap between them

I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/

But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/

I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.

What could I be missing?

EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.

EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.

Upvotes: 1

Views: 1340

Answers (5)

clairesuzy
clairesuzy

Reputation: 27674

Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?

In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work

CSS:

div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}

HTML

<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the &lt;p&gt; elements, which is the default</p>
</div>

Upvotes: 2

Chris Bentley
Chris Bentley

Reputation: 1945

ways to skin cats...

http://jsfiddle.net/eCSYt/45/

Update for bazmegakapa:

Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..

The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.

I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images

Upvotes: 0

Jeaf Gilbert
Jeaf Gilbert

Reputation: 12021

Remove the whitespace/line breaks between images.

Demo: http://jsfiddle.net/QZLSf/12/

Upvotes: 2

wdm
wdm

Reputation: 7189

That's just the way it is. You have to set the margin-left to -4px

.footerlinks img {
    margin-left: -4px;
}
.footerlinks img:first-child {
    margin-left: 0px;
}

Demo: http://jsfiddle.net/QZLSf/11/

EDIT: This solution is more correct. I fixed the margin on the first child.

Upvotes: -1

Teneff
Teneff

Reputation: 32148

this is your code:

#footerlinks a, #footerlinks img{

but footerlinks is class not an id, so use this:

.footerlinks a, .footerlinks img{

Upvotes: 1

Related Questions