How to get rid of white-spaces in an inline-block design of images?

Question

I have this page http://www.tripleagent.co.uk/index2.html (will change to index at a certain point) My problem is that I see white spaces between images. It appears only on Safari for windows (Safari 5.1.7) and Android (4.0) mobiles, for all others OS it works perfectly right (I don't care about ie8 and below). There is a solution of deleting the spaces in the html ... but it becomes unreadable. I would love to have it in a readable format like that...

<figure>
<a href="projects.html"><img src="images/squares/mosaics0001.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0002.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0003.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0004.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0006.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0061.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0062.jpg"></a>
<a href="projects.html"><img class="gif" src="images/squares/animgif/mosaic1.gif"></a>
<a href="projects.html"><img src="images/squares/mosaics0008.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0009.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0010.jpg"></a>

<a href="projects.html"><img src="images/squares/mosaics0005.jpg"></a>
<a href="projects.html"><img src="images/squares/mosaics0012.jpg"></a>

<ul class=nav><a href="projects2.html">projects</a></ul>
<a href="projects.html"><img class="gif" src="images/squares/animgif/mosaic2.gif"></a>
<a href="projects.html"><img src="images/squares/mosaics0015.jpg" ></a>
</figure>

I tried also the 0 size font and wordspacing tricks but they don't work

figure
{
    background: rgb(0,0,0);
    width : 100%;
    max-width: 800px;
    display: inline-block;
    font-size: 0;
    text-decoration:none;
    word-spacing: -.43em; 
}

I tried the <li></li> to eliminate the whitespace but couldn't make it to tile in the middle as shown in that page. http://www.tripleagent.co.uk/index.html

I am really new to all this and I was wandering if I am missing something really basic.

score 3 · Accepted Answer · answered Oct 06 '12 at 20:08

3

When using inline-block, I always comment out the whitespace:

<!-- the usual inline-block thing...
--><div class="inlineBlockThing">foo</div><!--
--><div class="inlineBlockThing">bar</div><!--
--><div class="inlineBlockThing">baz</div><!--
... all done -->

That gets rid of the gaps and keeps it much more readable.

answered Oct 06 '12 at 20:08

ultranaut

2,132
1
17
22

Thanks a lot,I spent hours to trying to figure out what was a good way to do it. – alexnode Oct 06 '12 at 22:41

score 1 · Answer 2 · answered Oct 06 '12 at 19:53

1

Probably float:left will work better than display:inline-block?

answered Oct 06 '12 at 19:53

Ionuț Staicu

21,360
11
51
58

Thanks, tried to use float:left but things started to become a bit complicated with the percentages and the responsive design ... tried to use the left:50% to have everything in the middle but didn't work. Will try to use that next time. – alexnode Oct 06 '12 at 22:49

score 1 · Answer 3 · answered Oct 06 '12 at 20:09

1

There are several ways to combat the space: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Personally, I favor commenting it out:

<img /><!--
--><img /><!--
--><img /><!--
--><img /><!--
--><img />

Floating via CSS is the best method if you're unable to adjust the mark-up.

answered Oct 06 '12 at 20:09

cimmanon

67,211
17
165
171

Thank you , that's it ... I wish I could tick two answers as correct. – alexnode Oct 06 '12 at 22:43

score 0 · Answer 4 · answered Mar 27 '13 at 04:58

Hello you can use for parent (figure)

display: table;
font: 0/0 sans-serif;

Or you can use @font-face with 0 space in base64 for parent http://csscoder.ru/safari-5-1-7-win-eshhe-odin-xak-chtoby-pobedit-inline-block/ or http://csscoder.ru/examples/safari-inline-block/index.html

@font-face {
font-family: 'inline-block';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA8AAAAABjAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcZhKVeUdERUYAAAF0AAAAHAAAACAAMgAET1MvMgAAAZAAAABDAAAAYG8LT11jbWFwAAAB1AAAAE0AAAFawBQnGWN2dCAAAAIkAAAABAAAAAQARAURZ2FzcAAAAigAAAAIAAAACAAAABBnbHlmAAACMAAAAGEAAABoJ54Dp2hlYWQAAAKUAAAALgAAADb7cuTdaGhlYQAAAsQAAAAdAAAAJAgAB95obXR4AAAC5AAAABQAAAAUFuwARGxvY2EAAAL4AAAADAAAAAwAWACMbWF4cAAAAwQAAAAfAAAAIABJADluYW1lAAADJAAAAOMAAAHgJGtDI3Bvc3QAAAQIAAAAMQAAAEPCf+Zpd2ViZgAABDwAAAAGAAAABpymUMgAAAABAAAAAMw9os8AAAAAzOalhQAAAADM7k0keNpjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3jaY2BmY2CcwMDKwMJqzHKWgYFhFoRmOsuQxpQG5AOl4ICRAQmEeof7MTgw8D5gYEv7B1TJOotBA02NAgMjABIYCh4AeNpjYGBgZoBgGQZGBhAIAfIYwXwWBgsgzcXAwcAEhAwMvAwKDxj+/wergrEZ/3/9/1iBBaoXChjZGOACjCCdTAyogBFi5XAGAHUwCw0AAAAARAURAAEAAf//AA942mNgYnBhYGBKYQ1lYGZgZ9DbyMigb7OJnYXhrdFGNtY7NpuYmYBMho3MIGFWkPAmdjbGPzabGEHixoKKgqqKgoouTAr/VBhn/MtgDf212oXlLAMDAyMDEjBkAACuEhZiAAAAeNpjYGRgYGBkcJSTmSUez2/zlUGegwEEzrzzVUWmmVJYQ4EUBwMTiAcA8dIIFwAAeNpjYGRgYJ31/wYDAwcDCDClMDAyoAJWAFJhAuwAAAAC7ABECAAAAAgAAAAAAAAABAAAAAAAACwALAAsACwANHjaY2BkYGBgZeBgYGIAARDJyAASc2DQAwkAAAScAIMAeNqljs1OwkAUhb8RMLAxxgVL06UbSFsk/CWsCBsTQjTK2lZUAkLCnz4ivApPwWE61NitaebOd86993SAEktymHwJwzU4vuBKKuEc99w6zuPx6LjAT7p7qYmD4xs8U3S8o2zuHO/xTZc5Y76V0mchXittzAcbZrwqLaCKry+gwzMPjBiIkp3zRiWzk030Mv0XqSUrJrbv/fnHkCc5ifp1PzW5Jrbz23SjSkO1w5dSp8o8zbzLnSk5IhTV7WlSk2r989UjqUj5527yhpP7JtXTHVs3tNWnrVOzNZAT2js8As27QLYAeNpjYGIAg//pDGkM2AArAwMjEyMzAzMjC1t6TmVBhiF7aV6mgYGBC4h2BTIAv3wIjQAAAAABUMicpQAA) format('woff');
}
figure {
font-family: 'inline-block';
font: 0/0 sans-serif;
}

How to get rid of white-spaces in an inline-block design of images?

4 Answers4