title: Can't seem to remove underline style from image links?
body: <p>The html is as follows:</p>
  
  <pre><code>&lt;ul id="members"&gt;
      &lt;li&gt;&lt;a id="Chris"&gt;&lt;img alt="Chris" src="images/chris.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="Carlin"&gt;&lt;img alt="Carlin" src="images/bass2.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="Mikael"&gt;&lt;img alt="Mikael" src="images/drums.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="Bert"&gt;&lt;img alt="Bert" src="images/keyboard.jpg"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What I am trying to achieve is these images positioned horizontally which I managed find but the images had an underline style. I know that to fix it I need <code>text-decoration:none</code> somewhere, the css I tried was:</p>
  
  <pre><code>#members { list-style: none; text-decoration: none; float:left; display: inline; }
  #members li { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; }
  </code></pre>
  
  <p>If I change the second line of the above css to:</p>
  
  <pre><code> #members li a img { list-style: none; text-decoration: none; border: none; float:left; display: inline; margin: 0px 75px 20px 0px; } 
  </code></pre>
  
  <p>Then the underline is removed but the images are then positioned vertically in a line instead of horizontally. </p>
  
  <p>I know it's probably something really silly but I can't see what's causing it myself.</p>
  
  <p>Thanks,</p>
  
  <p>Martin</p>