-2

So I've noticed the browser is adding spaces to something that there should be no spaces in.

In chrome, inspector. there is "no" browser/user_agent css that is doing this, it doesn't exist, yet here is proof.

list-items

The CSS: 

 ul.S_GAMES li {
   margin: 0;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 150px;
   height: 125px;
   background-image:url(/assets/preloadimg.GIF);
   background-repeat: no-repeat;
   background-position:center;

   /* this is just to show the design without adding extra space like borders */
   outline:#ccc 1px solid;
 }

The HTML

   <ul class="S_GAMES">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>

I also am using a CSS reset code as well which removes all margins/paddings that HTML automatically adds on. This is completely ghost. Now if I was to use float:left spaces would not exist, but I want the code to be inline, but still. without the command of me saying add space, why would there be any in the first place? It should be snug right up against each other unless I say otherwise.

Harry
  • 87,580
  • 25
  • 202
  • 214
tmarois
  • 2,424
  • 2
  • 31
  • 43
  • Did any of the answers help solve your problem mate? If yes, please mark that answer as accepted and if not, please clarify your problem further. – Harry Jan 19 '15 at 08:45

2 Answers2

0

it's the blank spaces between the <li>'s. You can solve it by commenting in between each element. JSFiddle

HTML

<ul class="S_GAMES">
    <li></li><!--
 --><li></li><!--
 --><li></li><!--
 --><li></li>
</ul>

CSS (Not modified)

 ul.S_GAMES li {
   margin: 0;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 150px;
   height: 125px;
   background-image:url(/assets/preloadimg.GIF);
   background-repeat: no-repeat;
   background-position:center;

   /* this is just to show the design without adding extra space like borders */
   outline:#ccc 1px solid;
 }

Hope it helps!

undefined
  • 3,949
  • 4
  • 26
  • 38
0

Minimized HTML will also solve this, its caused by the code having space, tabs, or line breaks. the following will also solve this for you

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>
Nickfmc
  • 369
  • 1
  • 8